From 7a1434afd46468bd84d82b54ab47f1088dc8ac70 Mon Sep 17 00:00:00 2001
From: Chris Holt <13071055+chrisdholt@users.noreply.github.com>
Date: Mon, 15 Jul 2024 16:33:35 -0700
Subject: [PATCH] fix: override tabindex attribute and default to 0 (#32007)

---
 ...ponents-4354dafd-fa30-42db-9554-3dacbce93e14.json |  7 +++++++
 .../web-components/src/button/button.template.ts     |  2 +-
 packages/web-components/src/button/button.ts         | 12 +++++++++++-
 .../src/compound-button/compound-button.template.ts  |  2 +-
 4 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 change/@fluentui-web-components-4354dafd-fa30-42db-9554-3dacbce93e14.json

diff --git a/change/@fluentui-web-components-4354dafd-fa30-42db-9554-3dacbce93e14.json b/change/@fluentui-web-components-4354dafd-fa30-42db-9554-3dacbce93e14.json
new file mode 100644
index 0000000000000..63b7bf5e04e6f
--- /dev/null
+++ b/change/@fluentui-web-components-4354dafd-fa30-42db-9554-3dacbce93e14.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: expose tabindex as an overriden attribute with a default value of 0'",
+  "packageName": "@fluentui/web-components",
+  "email": "13071055+chrisdholt@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/button/button.template.ts b/packages/web-components/src/button/button.template.ts
index 6eb9fe28741ff..928b969485002 100644
--- a/packages/web-components/src/button/button.template.ts
+++ b/packages/web-components/src/button/button.template.ts
@@ -11,7 +11,7 @@ import { ButtonOptions } from './button.options.js';
 export function buttonTemplate<T extends Button>(options: ButtonOptions = {}): ElementViewTemplate<T> {
   return html<T>`
     <template
-      tabindex="${x => (x.disabled ? -1 : x.tabIndex ?? 0)}"
+      tabindex="${x => (x.disabled ? null : x.tabIndex ?? 0)}"
       @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
       @keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
     >
diff --git a/packages/web-components/src/button/button.ts b/packages/web-components/src/button/button.ts
index 9536715bfa1db..a1d187b25167c 100644
--- a/packages/web-components/src/button/button.ts
+++ b/packages/web-components/src/button/button.ts
@@ -1,4 +1,4 @@
-import { attr, FASTElement, observable } from '@microsoft/fast-element';
+import { attr, FASTElement, nullableNumberConverter, observable } from '@microsoft/fast-element';
 import { keyEnter, keySpace } from '@microsoft/fast-web-utilities';
 import { StartEnd } from '../patterns/index.js';
 import { applyMixins } from '../utils/apply-mixins.js';
@@ -82,6 +82,16 @@ export class Button extends FASTElement {
   @attr({ attribute: 'disabled-focusable', mode: 'boolean' })
   public disabledFocusable: boolean = false;
 
+  /**
+   * Sets that the button tabindex attribute
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: `tabindex`
+   */
+  @attr({ attribute: 'tabindex', mode: 'fromView', converter: nullableNumberConverter })
+  public override tabIndex: number = 0;
+
   /**
    * Sets the element's internal disabled state when the element is focusable while disabled.
    *
diff --git a/packages/web-components/src/compound-button/compound-button.template.ts b/packages/web-components/src/compound-button/compound-button.template.ts
index 63dad65bef753..106c638d992d9 100644
--- a/packages/web-components/src/compound-button/compound-button.template.ts
+++ b/packages/web-components/src/compound-button/compound-button.template.ts
@@ -9,7 +9,7 @@ import type { CompoundButtonOptions } from './compound-button.options.js';
  */
 export function buttonTemplate<T extends CompoundButton>(options: CompoundButtonOptions = {}): ElementViewTemplate<T> {
   return html<T>`
-    <template ?disabled="${x => x.disabled}" tabindex="${x => (x.disabled ? -1 : x.tabIndex ?? 0)}">
+    <template ?disabled="${x => x.disabled}" tabindex="${x => (x.disabled ? null : x.tabIndex ?? 0)}">
       ${startSlotTemplate(options)}
       <span class="content" part="content">
         <slot ${slotted('defaultSlottedContent')}></slot>