fix: override tabindex attribute and default to 0

microsoft · Jul 15, 2024 · 0513b2e · 0513b2e
1 parent 8f7e877
commit 0513b2e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git a/change/@fluentui-web-components-4354dafd-fa30-42db-9554-3dacbce93e14.json 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": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git 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
@@ -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
@@ -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>