From b7cb9d06d6875790b869fd751b675ab2d78f492f Mon Sep 17 00:00:00 2001 From: Noemite Date: Fri, 15 Apr 2022 18:56:29 +0200 Subject: [PATCH] fix(accessibility): fix broken aria menu (#7699) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(accessibility): fix broken aria menu * Update src/js/menu/menu-button.js Co-authored-by: mister-ben * add tests Co-authored-by: Noémie Macault Co-authored-by: mister-ben --- src/js/menu/menu-button.js | 3 +++ test/unit/menu.test.js | 17 +++++++++++++++++ 2 files changed, 20 insertions(+) diff --git a/src/js/menu/menu-button.js b/src/js/menu/menu-button.js index 6b9c48f9d..375ebca1d 100644 --- a/src/js/menu/menu-button.js +++ b/src/js/menu/menu-button.js @@ -88,8 +88,11 @@ class MenuButton extends Component { if (this.items && this.items.length <= this.hideThreshold_) { this.hide(); + this.menu.contentEl_.removeAttribute('role'); + } else { this.show(); + this.menu.contentEl_.setAttribute('role', 'menu'); } } diff --git a/test/unit/menu.test.js b/test/unit/menu.test.js index eca8f1e0e..cc2925ec8 100644 --- a/test/unit/menu.test.js +++ b/test/unit/menu.test.js @@ -139,6 +139,23 @@ QUnit.test('should keep all the added menu items', function(assert) { MenuButton.prototype.createItems = oldCreateItems; }); +QUnit.test('should add or remove role menu for accessibility purpose', function(assert) { + const player = TestHelpers.makePlayer(); + const menuButton = new MenuButton(player); + + menuButton.createItems = () => []; + menuButton.update(); + assert.equal(menuButton.menu.contentEl_.hasAttribute('role'), false, 'the menu does not have a role attribute when it contains no menu items'); + + menuButton.createItems = () => [new MenuItem(player, { label: 'menu-item' })]; + menuButton.update(); + assert.equal(menuButton.menu.contentEl_.hasAttribute('role'), true, 'the menu has a role attribute when it contains menu items'); + assert.strictEqual(menuButton.menu.contentEl_.getAttribute('role'), 'menu', 'the menu role is `menu`'); + + menuButton.dispose(); + player.dispose(); +}); + QUnit.test('should remove old event listeners when the menu item adds to the new menu', function(assert) { const player = TestHelpers.makePlayer(); const menuButton = new MenuButton(player, {});