fix(web-components): change tabindex assignment logic for button and switch

change/@fluentui-web-components-81845afa-d1f3-4f90-b2d6-df4f9e4920cd.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: change tabindex logic for button and switch, remove automatic assignment of false for button disabled attr",
+  "packageName": "@fluentui/web-components",
+  "email": "13071055+chrisdholt@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/button/button.base.ts

@@ -42,21 +42,23 @@ export class BaseButton extends FASTElement {
    * HTML Attribute: `disabled`
    */
   @attr({ mode: 'boolean' })
-  disabled = false;
+  disabled!: boolean;
 
-  protected disabledChanged() {
-    if (!this.$fastController.isConnected) {
-      return;
-    }
+  private setTabIndex(): void {
     if (this.disabled) {
       this.removeAttribute('tabindex');
-    } else {
-      // If author sets tabindex to a non-positive value, the component should
-      // respect it, otherwise set it to 0 to avoid the anti-pattern of setting
-      // tabindex to a positive number. See details:
-      // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex
-      this.tabIndex = Number(this.getAttribute('tabindex') ?? 0) < 0 ? -1 : 0;
+      return;
     }
+
+    // If author sets tabindex to a non-positive value, the component should
+    // respect it, otherwise set it to 0 to avoid the anti-pattern of setting
+    // tabindex to a positive number. See details:
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex
+    this.tabIndex = Number(this.getAttribute('tabindex') ?? 0) < 0 ? -1 : 0;
+  }
+
+  protected disabledChanged() {
+    this.setTabIndex();
   }
 
   /**
@@ -262,7 +264,7 @@ export class BaseButton extends FASTElement {
   connectedCallback(): void {
     super.connectedCallback();
     this.elementInternals.ariaDisabled = `${!!this.disabledFocusable}`;
-    this.disabledChanged();
+    this.setTabIndex();
   }
 
   constructor() {

packages/web-components/src/checkbox/checkbox.base.ts

@@ -45,21 +45,26 @@ export class BaseCheckbox extends FASTElement {
   @observable
   public disabled?: boolean;
 
+  private setTabIndex(): void {
+    if (this.disabled) {
+      this.removeAttribute('tabindex');
+      return;
+    }
+
+    // If author sets tabindex to a non-positive value, the component should
+    // respect it, otherwise set it to 0 to avoid the anti-pattern of setting
+    // tabindex to a positive number. See details:
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex
+    this.tabIndex = Number(this.getAttribute('tabindex') ?? 0) < 0 ? -1 : 0;
+  }
+
   /**
    * Toggles the disabled state when the user changes the `disabled` property.
    *
    * @internal
    */
   protected disabledChanged(prev: boolean | undefined, next: boolean | undefined): void {
-    if (this.disabled) {
-      this.removeAttribute('tabindex');
-    } else {
-      // If author sets tabindex to a non-positive value, the component should
-      // respect it, otherwise set it to 0 to avoid the anti-pattern of setting
-      // tabindex to a positive number. See details:
-      // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex
-      this.tabIndex = Number(this.getAttribute('tabindex') ?? 0) < 0 ? -1 : 0;
-    }
+    this.setTabIndex();
     this.elementInternals.ariaDisabled = this.disabled ? 'true' : 'false';
     toggleState(this.elementInternals, 'disabled', this.disabled);
   }
@@ -353,6 +358,7 @@ export class BaseCheckbox extends FASTElement {
     super.connectedCallback();
 
     this.disabled = !!this.disabledAttribute;
+    this.setTabIndex();
     this.setAriaChecked();
     this.setValidity();
   }