explain how to make disabled buttons focusable

vaadin · Jan 17, 2025 · 48007f1 · 48007f1
1 parent ade7511
commit 48007f1
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/packages/menu-bar/src/vaadin-menu-bar-mixin.d.ts b/packages/menu-bar/src/vaadin-menu-bar-mixin.d.ts
@@ -99,6 +99,21 @@ export declare class MenuBarMixinClass {
    *   {text: 'Help'}
    * ];
    * ```
+   *
+   * #### Disabled items
+   *
+   * When an item is disabled, it prevents any user interaction with it, such as
+   * focusing, clicking, or opening a sub-menu. However, for better accessibility,
+   * disabled root-level items (menu bar buttons) can be made focusable so that
+   * screen readers can reach and properly announce them to users. This behavior
+   * can be enabled with the feature flag:
+   *
+   * ```
+   * // Enable before any menu bar is attached to the DOM.
+   * window.Vaadin.featureFlags.focusableDisabledComponents = true
+   * ```
+   *
+   * In Vaadin 25, disabled menu bar buttons will be focusable by default.
    */
   items: MenuBarItem[];
 

diff --git a/packages/menu-bar/src/vaadin-menu-bar-mixin.js b/packages/menu-bar/src/vaadin-menu-bar-mixin.js
@@ -78,6 +78,21 @@ export const MenuBarMixin = (superClass) =>
          * ];
          * ```
          *
+         * #### Disabled items
+         *
+         * When an item is disabled, it prevents any user interaction with it, such as
+         * focusing, clicking, or opening a sub-menu. However, for better accessibility,
+         * disabled root-level items (menu bar buttons) can be made focusable so that
+         * screen readers can reach and properly announce them to users. This behavior
+         * can be enabled with the feature flag:
+         *
+         * ```
+         * // Enable before any menu bar is attached to the DOM.
+         * window.Vaadin.featureFlags.focusableDisabledComponents = true
+         * ```
+         *
+         * In Vaadin 25, disabled menu bar buttons will be focusable by default.
+         *
          * @type {!Array<!MenuBarItem>}
          */
         items: {