feat: make disabled menu bar buttons focusable with feature flag

vaadin · Jan 16, 2025 · b5333bb · b5333bb
1 parent ef7b25e
commit b5333bb
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 16 deletions.
diff --git a/dev/button.html b/dev/button.html
@@ -7,16 +7,23 @@
     <title>Button</title>
     <script type="module" src="./common.js"></script>
 
+    <script>
+      window.Vaadin ??= {};
+      window.Vaadin.featureFlags ??= {};
+      window.Vaadin.featureFlags.focusableDisabledComponents = true;
+    </script>
+
     <script type="module">
-      import '@vaadin/button';
-      import '@vaadin/tooltip';
+      import '@vaadin/button/theme/material/vaadin-button.js';
     </script>
   </head>
 
   <body>
-    <vaadin-button>
-      Edit
-      <vaadin-tooltip slot="tooltip" text="Click to edit"></vaadin-tooltip>
-    </vaadin-button>
+    <vaadin-button disabled>Default</vaadin-button>
+    <vaadin-button disabled theme="primary">Primary</vaadin-button>
+    <vaadin-button disabled theme="secondary">Secondary</vaadin-button>
+    <vaadin-button disabled theme="success">Success</vaadin-button>
+    <vaadin-button disabled theme="error">Error</vaadin-button>
+    <vaadin-button disabled theme="warning">Warning</vaadin-button>
   </body>
 </html>
diff --git a/dev/menu-bar.html b/dev/menu-bar.html
@@ -14,7 +14,7 @@
       const menuBar = document.querySelector('vaadin-menu-bar');
       menuBar.items = [
         { text: 'View', tooltip: 'Options for how to view the content' },
-        { text: 'Edit' },
+        { text: 'Edit', tooltip: 'You cannot edit', disabled: true },
         {
           text: 'Share',
           children: [

diff --git a/packages/a11y-base/src/keyboard-direction-mixin.js b/packages/a11y-base/src/keyboard-direction-mixin.js
@@ -171,22 +171,27 @@ export const KeyboardDirectionMixin = (superclass) =>
 
         const item = items[idx];
 
-        if (!item.hasAttribute('disabled') && this.__isMatchingItem(item, condition)) {
-          return idx;
+        if (!this._isItemFocusable(item)) {
+          continue;
         }
+
+        if (typeof condition === 'function' && !condition(item)) {
+          continue;
+        }
+
+        return idx;
       }
       return -1;
     }
 
     /**
-     * Returns true if the item matches condition.
+     * Returns whether the item is focusable
      *
      * @param {Element} item - item to check
-     * @param {Function} condition - function used to check the item
-     * @return {number}
-     * @private
+     * @return {boolean}
+     * @protected
      */
-    __isMatchingItem(item, condition) {
-      return typeof condition === 'function' ? condition(item) : true;
+    _isItemFocusable(item) {
+      return !item.hasAttribute('disabled');
     }
   };
diff --git a/packages/menu-bar/src/vaadin-lit-menu-bar-button.js b/packages/menu-bar/src/vaadin-lit-menu-bar-button.js
@@ -48,6 +48,22 @@ class MenuBarButton extends Button {
     super._onKeyDown(event);
     this.__triggeredWithActiveKeys = null;
   }
+
+  /**
+   * Override method inherited from `ButtonMixin` to allow keyboard navigation with
+   * arrow keys in the menu bar when the button is focusable in the disabled state.
+   *
+   * @param {Event} event
+   * @override
+   * @protected
+   */
+  _shouldSuppressInteractionEvent(event) {
+    if (event.type === 'keydown' && ['ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      return false;
+    }
+
+    return super._shouldSuppressInteractionEvent(event);
+  }
 }
 
 defineCustomElement(MenuBarButton);
diff --git a/packages/menu-bar/src/vaadin-menu-bar-button.js b/packages/menu-bar/src/vaadin-menu-bar-button.js
@@ -45,6 +45,22 @@ class MenuBarButton extends Button {
     super._onKeyDown(event);
     this.__triggeredWithActiveKeys = null;
   }
+
+  /**
+   * Override method inherited from `ButtonMixin` to allow keyboard navigation with
+   * arrow keys in the menu bar when the button is focusable in the disabled state.
+   *
+   * @param {Event} event
+   * @override
+   * @protected
+   */
+  _shouldSuppressInteractionEvent(event) {
+    if (event.type === 'keydown' && ['ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      return false;
+    }
+
+    return super._shouldSuppressInteractionEvent(event);
+  }
 }
 
 defineCustomElement(MenuBarButton);
diff --git a/packages/menu-bar/src/vaadin-menu-bar-mixin.js b/packages/menu-bar/src/vaadin-menu-bar-mixin.js
@@ -688,7 +688,7 @@ export const MenuBarMixin = (superClass) =>
 
     /** @protected */
     _setTabindex(button, focused) {
-      if (this.tabNavigation && !button.disabled) {
+      if (this.tabNavigation && this._isItemFocusable(button)) {
         button.setAttribute('tabindex', '0');
       } else {
         button.setAttribute('tabindex', focused ? '0' : '-1');
@@ -1030,4 +1030,20 @@ export const MenuBarMixin = (superClass) =>
     close() {
       this._close();
     }
+
+    /**
+     * Override method inherited from `KeyboardDirectionMixin` to allow
+     * focusing disabled buttons that are configured accordingly.
+     *
+     * @param {Element} button
+     * @protected
+     * @override
+     */
+    _isItemFocusable(button) {
+      if (button.disabled && button._shouldAllowFocusWhenDisabled) {
+        return button._shouldAllowFocusWhenDisabled();
+      }
+
+      return super._isItemFocusable(button);
+    }
   };