rename feature flag, update JSDoc

vaadin · Jan 17, 2025 · 48f3d25 · 48f3d25
1 parent 6bc5144
commit 48f3d25
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 24 deletions.
diff --git a/packages/button/src/vaadin-button.d.ts b/packages/button/src/vaadin-button.d.ts
@@ -38,18 +38,19 @@ import { ButtonMixin } from './vaadin-button-mixin.js';
  */
 declare class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {
   /**
-   * When set to true, prevents any user interaction with the button
-   * such as clicking, focusing, etc.
+   * When set to true, prevents any user interaction with the button such as
+   * clicking, hovering, etc. It also removes the button from the tab order.
    *
-   * To improve accessibility, disabled buttons can be made focusable
-   * so that screen readers can reach and properly announce them to
-   * users. Other interactions such as clicks remain disabled. This
-   * behavior is currently experimental and can be enabled with the
-   * feature flag:
+   * Please note that this behavior may negatively impact accessibility, as disabled
+   * buttons become completely hidden from screen readers. To improve accessibility,
+   * disabled buttons can be made focusable so that screen readers can reach and
+   * properly announce them, including any attached tooltips and popovers, while
+   * still preventing clicks. This is currently available as an experimental feature
+   * that can be enabled with the following feature flag:
    *
    * ```
    * // Set before any button is attached to the DOM.
-   * window.Vaadin.featureFlags.focusableDisabledComponents = true
+   * window.Vaadin.featureFlags.accessibleDisabledButtons = true;
    * ```
    */
   disabled: boolean;

diff --git a/packages/button/src/vaadin-button.js b/packages/button/src/vaadin-button.js
@@ -53,18 +53,19 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(Poly
   static get properties() {
     return {
       /**
-       * When set to true, prevents any user interaction with the button
-       * such as clicking, focusing, etc.
+       * When set to true, prevents any user interaction with the button such as
+       * clicking, hovering, etc. It also removes the button from the tab order.
        *
-       * To improve accessibility, disabled buttons can be made focusable
-       * so that screen readers can reach and properly announce them to
-       * users. Other interactions such as clicks remain disabled. This
-       * behavior is currently experimental and can be enabled with the
-       * feature flag:
+       * Please note that this behavior may negatively impact accessibility, as disabled
+       * buttons become completely hidden from screen readers. To improve accessibility,
+       * disabled buttons can be made focusable so that screen readers can reach and
+       * properly announce them, including any attached tooltips and popovers, while
+       * still preventing clicks. This is currently available as an experimental feature
+       * that can be enabled with the following feature flag:
        *
        * ```
        * // Set before any button is attached to the DOM.
-       * window.Vaadin.featureFlags.focusableDisabledComponents = true
+       * window.Vaadin.featureFlags.accessibleDisabledButtons = true;
        * ```
        */
       disabled: {
@@ -92,7 +93,7 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(Poly
 
   /** @override */
   _shouldAllowFocusWhenDisabled() {
-    return window.Vaadin.featureFlags.focusableDisabledComponents;
+    return window.Vaadin.featureFlags.accessibleDisabledButtons;
   }
 }
 

diff --git a/packages/button/src/vaadin-lit-button.js b/packages/button/src/vaadin-lit-button.js
@@ -45,7 +45,7 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElem
 
   /** @override */
   _shouldAllowFocusWhenDisabled() {
-    return window.Vaadin.featureFlags.focusableDisabledComponents;
+    return window.Vaadin.featureFlags.accessibleDisabledButtons;
   }
 }
 

diff --git a/packages/button/test/button.common.ts b/packages/button/test/button.common.ts
@@ -173,16 +173,16 @@ describe('vaadin-button', () => {
     });
   });
 
-  describe('disabled and focusable', () => {
+  describe('disabled and accessible', () => {
     let lastGlobalFocusable: HTMLInputElement;
 
     before(() => {
       window.Vaadin.featureFlags ??= {};
-      window.Vaadin.featureFlags.focusableDisabledComponents = true;
+      window.Vaadin.featureFlags.accessibleDisabledButtons = true;
     });
 
     after(() => {
-      window.Vaadin.featureFlags!.focusableDisabledComponents = false;
+      window.Vaadin.featureFlags!.accessibleDisabledButtons = false;
     });
 
     beforeEach(async () => {

diff --git a/test/integration/component-tooltip.test.js b/test/integration/component-tooltip.test.js
@@ -202,16 +202,16 @@ before(() => {
   });
 });
 
-describe('focusable disabled button', () => {
+describe('accessible disabled button', () => {
   let button, tooltip;
 
   before(() => {
     window.Vaadin.featureFlags ??= {};
-    window.Vaadin.featureFlags.focusableDisabledComponents = true;
+    window.Vaadin.featureFlags.accessibleDisabledButtons = true;
   });
 
   after(() => {
-    window.Vaadin.featureFlags.focusableDisabledComponents = false;
+    window.Vaadin.featureFlags.accessibleDisabledButtons = false;
   });
 
   beforeEach(() => {