Menu: remove excess role attribute when menu is in adaptivity mode (#…

…28066)
DevExpress · Sep 25, 2024 · 147725a · 147725a
1 parent 3f2bdc8
commit 147725a
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 0 deletions.
diff --git 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<Properties> = {
   items: [items],
   disabled: [true, false],
+  width: [400, 1024],
   orientation: ['horizontal', 'vertical'],
+  adaptivityEnabled: [true, false],
 };
 
 const created = async (t: TestController, optionConfiguration): Promise<void> => {

diff --git 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
@@ -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,