fix: support users setting tabindex attribute for button (#32003)

microsoft · Jul 15, 2024 · 294d82a · 294d82a
1 parent b3187cd
commit 294d82a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 2 deletions.
diff --git a/change/@fluentui-web-components-d81fb123-abf5-44cf-a97e-4ceda13d1edf.json b/change/@fluentui-web-components-d81fb123-abf5-44cf-a97e-4ceda13d1edf.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: support tabindex values from implementors on buttons",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/button/button.spec.ts b/packages/web-components/src/button/button.spec.ts
@@ -224,6 +224,24 @@ test.describe('Button', () => {
     expect(ReceivedNoKeyDownEvent2).toBeTruthy();
   });
 
+  test('should NOT receive focus when the `tabindex` is manually set to -1', async ({ page }) => {
+    const element = page.locator('fluent-button', { hasText: 'Button' });
+    const focusable = page.locator('fluent-button', { hasText: 'Focusable' });
+
+    await page.setContent(/* html */ `
+      <fluent-button>Focusable</fluent-button>
+      <fluent-button tabindex="-1">Button</fluent-button>
+    `);
+
+    await focusable.focus();
+
+    await expect(focusable).toBeFocused();
+
+    await focusable.press('Tab');
+
+    await expect(element).not.toBeFocused();
+  });
+
   test('should focus the element when the `autofocus` attribute is present', async ({ page }) => {
     const element = page.locator('fluent-button');
 

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 : 0)}"
+      tabindex="${x => (x.disabled ? -1 : 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/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 : 0)}">
+    <template ?disabled="${x => x.disabled}" tabindex="${x => (x.disabled ? -1 : x.tabIndex ?? 0)}">
       ${startSlotTemplate(options)}
       <span class="content" part="content">
         <slot ${slotted('defaultSlottedContent')}></slot>