diff --git a/e2e/testcafe-devextreme/tests/accessibility/menu.ts b/e2e/testcafe-devextreme/tests/accessibility/menu.ts index 0312ac435e0c..c3e8e4025c78 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/menu.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/menu.ts @@ -41,7 +41,9 @@ const items: Item[] = [ const options: Options = { items: [items], disabled: [true, false], + width: [400, 1024], orientation: ['horizontal', 'vertical'], + adaptivityEnabled: [true, false], }; const created = async (t: TestController, optionConfiguration): Promise => { diff --git a/packages/devextreme/js/__internal/ui/menu/m_menu.ts b/packages/devextreme/js/__internal/ui/menu/m_menu.ts index 6f32392efd13..09966d9edef2 100644 --- a/packages/devextreme/js/__internal/ui/menu/m_menu.ts +++ b/packages/devextreme/js/__internal/ui/menu/m_menu.ts @@ -278,6 +278,11 @@ class Menu extends MenuBase { this.setAria('role', 'menubar'); } + _setAriaRole(state: boolean): void { + const role = this._isAdaptivityEnabled() && state ? undefined : 'menubar'; + this.setAria({ role }); + } + _render(): void { super._render(); this._initAdaptivity(); @@ -346,6 +351,8 @@ class Menu extends MenuBase { this._overlay && this._toggleTreeView(state); } + this._setAriaRole(state); + $menuItemsContainer.toggle(!state); $adaptiveElements.toggle(state); } diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/menu.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/menu.tests.js index 7912c0d5590a..80377411aef4 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/menu.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/menu.tests.js @@ -2970,6 +2970,53 @@ QUnit.module('adaptivity: render', { fx.off = false; } }, () => { + QUnit.test('Adds "menubar" role when menu is wider than item', function(assert) { + new Menu(this.$element, { + items: this.items, + adaptivityEnabled: true, + width: 1000 + }); + + assert.strictEqual(this.$element.attr('role'), 'menubar'); + }); + + QUnit.test('No role added when menu is smaller than item', function(assert) { + new Menu(this.$element, { + items: this.items, + adaptivityEnabled: true, + width: 20 + }); + + assert.strictEqual(this.$element.attr('role'), undefined); + }); + + QUnit.test('Adds "menu bar" role when menu width is increased at runtime', function(assert) { + const instance = new Menu(this.$element, { + items: this.items, + adaptivityEnabled: true, + width: 20 + }); + + assert.strictEqual(this.$element.attr('role'), undefined); + + instance.option('width', 1000); + + assert.strictEqual(this.$element.attr('role'), 'menubar'); + }); + + QUnit.test('Removes role when menu width is decreased at runtime', function(assert) { + const instance = new Menu(this.$element, { + items: this.items, + adaptivityEnabled: true, + width: 1200 + }); + assert.strictEqual(this.$element.attr('role'), 'menubar'); + + instance.option('width', 20); + + assert.strictEqual(this.$element.attr('role'), undefined); + }); + QUnit.test('Hamburger button should be rendered', function(assert) { new Menu(this.$element, { items: this.items,