From 9be382554d1c51d16a677bbd9b064f175ae79213 Mon Sep 17 00:00:00 2001 From: "Andrea N. Cardona" Date: Sun, 17 Dec 2023 12:18:52 -0800 Subject: [PATCH] Menu button pattern and 4 examples: Set aria-expanded to false when menus are closed (pull #2839) Closes issues #697 and #2834 with the following changes: * Revise menu button pattern to specify that aria-expanded is set to false when the menu is not displayed. * Revise JS and documentation for 3 menu button examples and the toolbar example to set aria-expanded false when their menus are closed. * Adjusts corresponding regression tests to ensure the state of expanded is true when the menus are open and false when the menus are closed. --------- Co-authored-by: Matt King --- .../menu-button-actions-active-descendant.js | 4 +-- .../examples/js/menu-button-actions.js | 2 +- .../examples/js/menu-button-links.js | 2 +- ...menu-button-actions-active-descendant.html | 34 ++++++++----------- .../examples/menu-button-actions.html | 32 ++++++++--------- .../examples/menu-button-links.html | 30 +++++++--------- .../menu-button/menu-button-pattern.html | 3 +- .../patterns/toolbar/examples/js/FontMenu.js | 2 +- .../patterns/toolbar/examples/toolbar.html | 22 +++++------- .../menu-button_actions-active-descendant.js | 4 +-- test/tests/menu-button_actions.js | 4 +-- test/tests/menu-button_links.js | 4 +-- test/tests/toolbar_toolbar.js | 19 ++++++++--- 13 files changed, 78 insertions(+), 84 deletions(-) diff --git a/content/patterns/menu-button/examples/js/menu-button-actions-active-descendant.js b/content/patterns/menu-button/examples/js/menu-button-actions-active-descendant.js index 35472f1e00..a1165150d5 100644 --- a/content/patterns/menu-button/examples/js/menu-button-actions-active-descendant.js +++ b/content/patterns/menu-button/examples/js/menu-button-actions-active-descendant.js @@ -162,9 +162,9 @@ class MenuButtonActionsActiveDescendant { closePopup() { if (this.isOpen()) { - this.buttonNode.removeAttribute('aria-expanded'); + this.buttonNode.setAttribute('aria-expanded', 'false'); this.menuNode.setAttribute('aria-activedescendant', ''); - for (var i = 0; i < this.menuitemNodes.length; i++) { + for (let i = 0; i < this.menuitemNodes.length; i++) { this.menuitemNodes[i].classList.remove('focus'); } this.menuNode.style.display = 'none'; diff --git a/content/patterns/menu-button/examples/js/menu-button-actions.js b/content/patterns/menu-button/examples/js/menu-button-actions.js index 7f81486f5f..cd69d5621f 100644 --- a/content/patterns/menu-button/examples/js/menu-button-actions.js +++ b/content/patterns/menu-button/examples/js/menu-button-actions.js @@ -156,7 +156,7 @@ class MenuButtonActions { closePopup() { if (this.isOpen()) { - this.buttonNode.removeAttribute('aria-expanded'); + this.buttonNode.setAttribute('aria-expanded', 'false'); this.menuNode.style.display = 'none'; } } diff --git a/content/patterns/menu-button/examples/js/menu-button-links.js b/content/patterns/menu-button/examples/js/menu-button-links.js index 90f4146da1..757aac2268 100644 --- a/content/patterns/menu-button/examples/js/menu-button-links.js +++ b/content/patterns/menu-button/examples/js/menu-button-links.js @@ -153,7 +153,7 @@ class MenuButtonLinks { closePopup() { if (this.isOpen()) { - this.buttonNode.removeAttribute('aria-expanded'); + this.buttonNode.setAttribute('aria-expanded', 'false'); this.menuNode.style.display = 'none'; } } diff --git a/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html b/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html index 3a3076574b..1fbd72bbcd 100644 --- a/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html +++ b/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html @@ -52,7 +52,7 @@

Example

-
- @@ -773,21 +773,17 @@

Menu Button (Font Family)

- + + + aria-expanded="false" + button + Indicates the menu is not displayed and that activating the menu button opens the menu. + + aria-expanded="true" button - -
    -
  • Added when the menu is open.
    • -
  • Indicates that the menu is displayed and that activating the menu button closes the menu.
    • -
  • The aria-expanded attribute is removed when the menu is closed.
    • -
  • - Included to support touch devices where screen reader users can touch the menu button when the menu is displayed. - Keyboard users cannot focus the menu button when the menu is open. -
    • -
- + Indicates the menu is displayed and that activating the menu button closes the menu. diff --git a/test/tests/menu-button_actions-active-descendant.js b/test/tests/menu-button_actions-active-descendant.js index 0ecd9585b5..0cbf5d2503 100644 --- a/test/tests/menu-button_actions-active-descendant.js +++ b/test/tests/menu-button_actions-active-descendant.js @@ -85,9 +85,9 @@ ariaTest( return document.querySelector(selector).hasAttribute('aria-expanded'); }, ex.menubuttonSelector); - t.false( + t.true( hasAttribute, - 'The menuitem should not have the "aria-expanded" attribute if the popup is closed' + 'The menuitem should have the "aria-expanded is false" attribute if the popup is closed' ); t.false( diff --git a/test/tests/menu-button_actions.js b/test/tests/menu-button_actions.js index 406a067335..410399bf2d 100644 --- a/test/tests/menu-button_actions.js +++ b/test/tests/menu-button_actions.js @@ -69,9 +69,9 @@ ariaTest( return document.querySelector(selector).hasAttribute('aria-expanded'); }, ex.menubuttonSelector); - t.false( + t.true( hasAttribute, - 'The menuitem should not have the "aria-expanded" attribute if the popup is closed' + 'The menuitem should have the "aria-expanded is false" attribute if the popup is closed' ); t.false( diff --git a/test/tests/menu-button_links.js b/test/tests/menu-button_links.js index 019a98b9ed..055c39aae1 100644 --- a/test/tests/menu-button_links.js +++ b/test/tests/menu-button_links.js @@ -98,9 +98,9 @@ ariaTest( return document.querySelector(selector).hasAttribute('aria-expanded'); }, ex.menubuttonSelector); - t.false( + t.true( hasAttribute, - 'The menuitem should not have the "aria-expanded" attribute if the popup is closed' + 'The menuitem should have the "aria-expanded is false" attribute if the popup is closed' ); t.false( diff --git a/test/tests/toolbar_toolbar.js b/test/tests/toolbar_toolbar.js index fbb3f080f6..928b75bd6d 100644 --- a/test/tests/toolbar_toolbar.js +++ b/test/tests/toolbar_toolbar.js @@ -3,7 +3,6 @@ const { By, Key } = require('selenium-webdriver'); const assertAriaControls = require('../util/assertAriaControls'); const assertAriaLabelExists = require('../util/assertAriaLabelExists'); const assertAriaRoles = require('../util/assertAriaRoles'); -const assertAttributeDNE = require('../util/assertAttributeDNE'); const assertAttributeValues = require('../util/assertAttributeValues'); const assertRovingTabindex = require('../util/assertRovingTabindex'); const assertHasFocus = require('../util/assertHasFocus'); @@ -297,12 +296,24 @@ ariaTest( ); ariaTest( - 'Font family button has aria-expanded', + 'Font family button has aria-expanded=false', exampleFile, - 'toolbar-menubutton-aria-expanded', + 'toolbar-menubutton-aria-expanded-false', async (t) => { - await assertAttributeDNE(t, ex.fontFamilyButtonSelector, 'aria-expanded'); + await assertAttributeValues( + t, + ex.fontFamilyButtonSelector, + 'aria-expanded', + 'false' + ); + } +); +ariaTest( + 'Font family button has aria-expanded=true', + exampleFile, + 'toolbar-menubutton-aria-expanded-true', + async (t) => { await ( await t.context.session.findElement(By.css(ex.fontFamilyButtonSelector)) ).click();