1
0
mirror of https://github.com/videojs/video.js.git synced 2024-12-25 02:42:10 +02:00

fix(accessibility): fix broken aria menu (#7699)

* fix(accessibility): fix broken aria menu

* Update src/js/menu/menu-button.js

Co-authored-by: mister-ben <git@misterben.me>

* add tests

Co-authored-by: Noémie Macault <noemie.macault@capgemini.com>
Co-authored-by: mister-ben <git@misterben.me>
This commit is contained in:
Noemite 2022-04-15 18:56:29 +02:00 committed by GitHub
parent 145aba6aea
commit b7cb9d06d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 0 deletions

View File

@ -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');
}
}

View File

@ -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, {});