refactor: do not override tabindex property to set default value (#8418)

vaadin · Dec 31, 2024 · 2b22d9c · 2b22d9c
1 parent b239d40
commit 2b22d9c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 38 deletions.
diff --git a/packages/button/src/vaadin-button-mixin.js b/packages/button/src/vaadin-button-mixin.js
@@ -17,20 +17,11 @@ import { TabindexMixin } from '@vaadin/a11y-base/src/tabindex-mixin.js';
  */
 export const ButtonMixin = (superClass) =>
   class ButtonMixinClass extends ActiveMixin(TabindexMixin(FocusMixin(superClass))) {
-    static get properties() {
-      return {
-        /**
-         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
-         *
-         * @override
-         * @protected
-         */
-        tabindex: {
-          type: Number,
-          value: 0,
-          reflectToAttribute: true,
-        },
-      };
+    constructor() {
+      super();
+
+      // Set tabindex to 0 by default
+      this.tabindex = 0;
     }
 
     /**

diff --git a/packages/checkbox/src/vaadin-checkbox-mixin.js b/packages/checkbox/src/vaadin-checkbox-mixin.js
@@ -60,18 +60,6 @@ export const CheckboxMixin = (superclass) =>
           value: false,
           reflectToAttribute: true,
         },
-
-        /**
-         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
-         *
-         * @override
-         * @protected
-         */
-        tabindex: {
-          type: Number,
-          value: 0,
-          reflectToAttribute: true,
-        },
       };
     }
 
@@ -99,6 +87,10 @@ export const CheckboxMixin = (superclass) =>
       // Set the string "on" as the default value for the checkbox following the HTML specification:
       // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
       this.value = 'on';
+
+      // Set tabindex to 0 by default to not lose focus on click in Safari
+      // See https://github.com/vaadin/web-components/pull/6780
+      this.tabindex = 0;
     }
 
     /** @protected */

diff --git a/packages/radio-group/src/vaadin-radio-button-mixin.js b/packages/radio-group/src/vaadin-radio-button-mixin.js
@@ -32,18 +32,6 @@ export const RadioButtonMixin = (superclass) =>
           type: String,
           value: '',
         },
-
-        /**
-         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
-         *
-         * @override
-         * @protected
-         */
-        tabindex: {
-          type: Number,
-          value: 0,
-          reflectToAttribute: true,
-        },
       };
     }
 
@@ -60,6 +48,10 @@ export const RadioButtonMixin = (superclass) =>
       // Set the string "on" as the default value for the radio button following the HTML specification:
       // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
       this.value = 'on';
+
+      // Set tabindex to 0 by default to not lose focus on click in Safari
+      // See https://github.com/vaadin/web-components/pull/6780
+      this.tabindex = 0;
     }
 
     /** @protected */