From 2afb9dd91722847d05dc2df9b80fe822f73350a3 Mon Sep 17 00:00:00 2001 From: "Andrea N. Cardona" Date: Tue, 17 Oct 2023 13:00:16 -0600 Subject: [PATCH 01/13] feat: udpate menu examples aria false --- .../menu-button-actions-active-descendant.html | 11 +++++++++++ .../menu-button/examples/menu-button-actions.html | 11 +++++++++++ .../menu-button/examples/menu-button-links.html | 13 ++++++++++++- .../patterns/menu-button/menu-button-pattern.html | 2 +- content/patterns/toolbar/examples/toolbar.html | 11 +++++++++++ 5 files changed, 46 insertions(+), 2 deletions(-) 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 0e0a2df07c..cf9d0c8bb9 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 @@ -240,6 +240,17 @@

Menu Button

+ + + aria-expanded="false" + button + + + +

Menu

diff --git a/content/patterns/menu-button/examples/menu-button-actions.html b/content/patterns/menu-button/examples/menu-button-actions.html index 300c429428..fd8e2bd047 100644 --- a/content/patterns/menu-button/examples/menu-button-actions.html +++ b/content/patterns/menu-button/examples/menu-button-actions.html @@ -241,6 +241,17 @@

Menu Button

+ + + aria-expanded="false" + button + + + +

Menu

diff --git a/content/patterns/menu-button/examples/menu-button-links.html b/content/patterns/menu-button/examples/menu-button-links.html index e1b32731bd..f8458f0b6c 100644 --- a/content/patterns/menu-button/examples/menu-button-links.html +++ b/content/patterns/menu-button/examples/menu-button-links.html @@ -56,7 +56,7 @@

Example

-
- @@ -772,32 +772,17 @@

Menu Button (Font Family)

- + - aria-expanded="true" + aria-expanded="false" 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 not displayed and that activating the menu button opens the menu. - + - aria-expanded="false" + aria-expanded="true" button - -
    -
  • Added when the menu is closed.
    • -
  • The aria-expanded attribute is set to false when the menu is closed.
    • -
- + Indicates the menu is displayed and that activating the menu button closes the menu. From 56fefc4300f82046226d6621e3e2eb3aba121474 Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 28 Nov 2023 00:30:25 -0800 Subject: [PATCH 09/13] Update pattern requirement for aria-expanded false --- content/patterns/menu-button/menu-button-pattern.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/content/patterns/menu-button/menu-button-pattern.html b/content/patterns/menu-button/menu-button-pattern.html index 290c0112b4..e9ee4f4ff6 100644 --- a/content/patterns/menu-button/menu-button-pattern.html +++ b/content/patterns/menu-button/menu-button-pattern.html @@ -56,8 +56,7 @@

WAI-ARIA Roles, States, and Properties

  • The element with role button has aria-haspopup set to either menu or true.
  • When the menu is displayed, the element with role button has aria-expanded set to true. - When the menu is hidden, it is recommended that aria-expanded is not present. - If aria-expanded is specified when the menu is closed, button has aria-expanded set to false. + When the menu is hidden, aria-expanded is set to false.
  • The element that contains the menu items displayed by activating the button has role menu. From 1f2d047a3ecb155055d8e3cbab1e0910bc284bb6 Mon Sep 17 00:00:00 2001 From: "Andrea N. Cardona" Date: Mon, 4 Dec 2023 12:05:15 -0700 Subject: [PATCH 10/13] feat: update regression tests --- .../examples/js/menu-button-actions-active-descendant.js | 2 +- content/patterns/toolbar/examples/js/FontMenu.js | 2 +- test/tests/menu-button_actions-active-descendant.js | 2 +- test/tests/menu-button_actions.js | 2 +- test/tests/menu-button_links.js | 2 +- 5 files changed, 5 insertions(+), 5 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 4f7195b5bc..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 @@ -164,7 +164,7 @@ class MenuButtonActionsActiveDescendant { if (this.isOpen()) { 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/toolbar/examples/js/FontMenu.js b/content/patterns/toolbar/examples/js/FontMenu.js index 5287404ff7..763ad8df6f 100644 --- a/content/patterns/toolbar/examples/js/FontMenu.js +++ b/content/patterns/toolbar/examples/js/FontMenu.js @@ -242,6 +242,6 @@ FontMenu.prototype.close = function (force) { (!this.hasFocus && !this.hasHover && !this.controller.hasHover) ) { this.domNode.style.display = 'none'; - this.controller.domNode.removeAttribute('aria-expanded'); + this.controller.domNode.setAttribute('aria-expanded', 'false'); } }; diff --git a/test/tests/menu-button_actions-active-descendant.js b/test/tests/menu-button_actions-active-descendant.js index 0ecd9585b5..e5adddc57f 100644 --- a/test/tests/menu-button_actions-active-descendant.js +++ b/test/tests/menu-button_actions-active-descendant.js @@ -87,7 +87,7 @@ ariaTest( t.false( 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..184182a6bb 100644 --- a/test/tests/menu-button_actions.js +++ b/test/tests/menu-button_actions.js @@ -71,7 +71,7 @@ ariaTest( t.false( 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..38cc9554a9 100644 --- a/test/tests/menu-button_links.js +++ b/test/tests/menu-button_links.js @@ -100,7 +100,7 @@ ariaTest( t.false( 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( From 45766ac93a2b38a592b960d6fcdfddac5e05bf11 Mon Sep 17 00:00:00 2001 From: "Andrea N. Cardona" Date: Mon, 4 Dec 2023 12:11:06 -0700 Subject: [PATCH 11/13] feat: update regression tests --- test/tests/menu-button_actions-active-descendant.js | 2 +- test/tests/menu-button_actions.js | 2 +- test/tests/menu-button_links.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/test/tests/menu-button_actions-active-descendant.js b/test/tests/menu-button_actions-active-descendant.js index e5adddc57f..0cbf5d2503 100644 --- a/test/tests/menu-button_actions-active-descendant.js +++ b/test/tests/menu-button_actions-active-descendant.js @@ -85,7 +85,7 @@ ariaTest( return document.querySelector(selector).hasAttribute('aria-expanded'); }, ex.menubuttonSelector); - t.false( + t.true( hasAttribute, 'The menuitem should have the "aria-expanded is false" attribute if the popup is closed' ); diff --git a/test/tests/menu-button_actions.js b/test/tests/menu-button_actions.js index 184182a6bb..410399bf2d 100644 --- a/test/tests/menu-button_actions.js +++ b/test/tests/menu-button_actions.js @@ -69,7 +69,7 @@ ariaTest( return document.querySelector(selector).hasAttribute('aria-expanded'); }, ex.menubuttonSelector); - t.false( + t.true( hasAttribute, 'The menuitem should have the "aria-expanded is false" attribute if the popup is closed' ); diff --git a/test/tests/menu-button_links.js b/test/tests/menu-button_links.js index 38cc9554a9..055c39aae1 100644 --- a/test/tests/menu-button_links.js +++ b/test/tests/menu-button_links.js @@ -98,7 +98,7 @@ ariaTest( return document.querySelector(selector).hasAttribute('aria-expanded'); }, ex.menubuttonSelector); - t.false( + t.true( hasAttribute, 'The menuitem should have the "aria-expanded is false" attribute if the popup is closed' ); From 5238bcfab656f009cc2c7f01d1977244fd725be5 Mon Sep 17 00:00:00 2001 From: "Andrea N. Cardona" Date: Mon, 4 Dec 2023 12:23:48 -0700 Subject: [PATCH 12/13] feat: update tests --- test/tests/toolbar_toolbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/tests/toolbar_toolbar.js b/test/tests/toolbar_toolbar.js index fbb3f080f6..cae3bad2d2 100644 --- a/test/tests/toolbar_toolbar.js +++ b/test/tests/toolbar_toolbar.js @@ -311,7 +311,7 @@ ariaTest( t, ex.fontFamilyButtonSelector, 'aria-expanded', - 'true' + 'false' ); } ); From 4f39928abc67a51687b633ae2b2b1d19f07cec2e Mon Sep 17 00:00:00 2001 From: "Andrea N. Cardona" Date: Tue, 5 Dec 2023 12:52:57 -0700 Subject: [PATCH 13/13] chore: update tests again --- .../patterns/toolbar/examples/toolbar.html | 2 +- test/tests/toolbar_toolbar.js | 21 ++++++++++++++----- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/content/patterns/toolbar/examples/toolbar.html b/content/patterns/toolbar/examples/toolbar.html index 14429fd147..2fc727d6fd 100644 --- a/content/patterns/toolbar/examples/toolbar.html +++ b/content/patterns/toolbar/examples/toolbar.html @@ -778,7 +778,7 @@

    Menu Button (Font Family)

    button Indicates the menu is not displayed and that activating the menu button opens the menu. - + aria-expanded="true" button diff --git a/test/tests/toolbar_toolbar.js b/test/tests/toolbar_toolbar.js index cae3bad2d2..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(); @@ -311,7 +322,7 @@ ariaTest( t, ex.fontFamilyButtonSelector, 'aria-expanded', - 'false' + 'true' ); } );