fix(react-tabs): focus selected tab by default (#33236)

microsoft · Nov 13, 2024 · 4046b33 · 4046b33
1 parent ea90f38
commit 4046b33
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 5 deletions.
diff --git a/change/@fluentui-react-tabs-4503bfaf-5cb1-41dd-8b65-19cfa0d1acce.json b/change/@fluentui-react-tabs-4503bfaf-5cb1-41dd-8b65-19cfa0d1acce.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: focus selected tab by default",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/...es/react-components/react-tabs/library/src/components/Tab/__snapshots__/Tab.test.tsx.snap b/...es/react-components/react-tabs/library/src/components/Tab/__snapshots__/Tab.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`Tab renders correctly 1`] = `
   <button
     aria-selected="false"
     class="fui-Tab"
+    data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
     role="tab"
     style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
     type="button"
@@ -23,6 +24,7 @@ exports[`Tab renders correctly when disabled 1`] = `
 <div>
   <button
     class="fui-Tab"
+    data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
     disabled=""
     role="tab"
     type="button"
@@ -42,6 +44,7 @@ exports[`Tab renders default correctly with icon slotted 1`] = `
   <button
     aria-selected="false"
     class="fui-Tab"
+    data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
     role="tab"
     style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
     type="button"
@@ -79,6 +82,7 @@ exports[`Tab renders large size and vertical correctly with icon slotted 1`] = `
   <button
     aria-selected="false"
     class="fui-Tab"
+    data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
     role="tab"
     style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
     type="button"
@@ -116,6 +120,7 @@ exports[`Tab renders large size correctly with icon slotted 1`] = `
   <button
     aria-selected="false"
     class="fui-Tab"
+    data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
     role="tab"
     style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
     type="button"
@@ -153,6 +158,7 @@ exports[`Tab renders medium size and vertical correctly with icon slotted 1`] =
   <button
     aria-selected="false"
     class="fui-Tab"
+    data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
     role="tab"
     style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
     type="button"
@@ -190,6 +196,7 @@ exports[`Tab renders medium size correctly with icon slotted 1`] = `
   <button
     aria-selected="false"
     class="fui-Tab"
+    data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
     role="tab"
     style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
     type="button"
@@ -227,6 +234,7 @@ exports[`Tab renders small size and vertical correctly with icon slotted 1`] = `
   <button
     aria-selected="false"
     class="fui-Tab"
+    data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
     role="tab"
     style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
     type="button"
@@ -264,6 +272,7 @@ exports[`Tab renders small size correctly with icon slotted 1`] = `
   <button
     aria-selected="false"
     class="fui-Tab"
+    data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
     role="tab"
     style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
     type="button"
@@ -301,6 +310,7 @@ exports[`Tab renders subtle appearance correctly with icon slotted 1`] = `
   <button
     aria-selected="false"
     class="fui-Tab"
+    data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
     role="tab"
     style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
     type="button"
@@ -338,6 +348,7 @@ exports[`Tab renders vertical correctly with icon slotted 1`] = `
   <button
     aria-selected="false"
     class="fui-Tab"
+    data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
     role="tab"
     style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
     type="button"

diff --git a/packages/react-components/react-tabs/library/src/components/Tab/useTab.ts b/packages/react-components/react-tabs/library/src/components/Tab/useTab.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTabsterAttributes } from '@fluentui/react-tabster';
 import {
   getIntrinsicElementProps,
   mergeCallbacks,
@@ -40,6 +41,10 @@ export const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): T
   const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));
   const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));
 
+  const focusProps = useTabsterAttributes({
+    focusable: { isDefault: selected },
+  });
+
   React.useEffect(() => {
     onRegister({
       value,
@@ -72,6 +77,7 @@ export const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): T
         // aria-selected undefined indicates it is not selectable
         // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected
         'aria-selected': disabled ? undefined : (`${selected}` as 'true' | 'false'),
+        ...focusProps,
         ...props,
         disabled,
         onClick: onTabClick,

diff --git a/...-components/react-tabs/library/src/components/TabList/__snapshots__/TabList.test.tsx.snap b/...-components/react-tabs/library/src/components/TabList/__snapshots__/TabList.test.tsx.snap
@@ -5,11 +5,12 @@ exports[`TabList renders tabs when disabled 1`] = `
   <div
     aria-orientation="horizontal"
     class="fui-TabList"
-    data-tabster="{\\"mover\\":{\\"cyclic\\":true,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
+    data-tabster="{\\"mover\\":{\\"cyclic\\":true,\\"direction\\":2,\\"memorizeCurrent\\":false,\\"hasDefault\\":true}}"
     role="tablist"
   >
     <button
       class="fui-Tab"
+      data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
       disabled=""
       role="tab"
       type="button"
@@ -28,6 +29,7 @@ exports[`TabList renders tabs when disabled 1`] = `
     </button>
     <button
       class="fui-Tab"
+      data-tabster="{\\"focusable\\":{\\"isDefault\\":true}}"
       disabled=""
       role="tab"
       type="button"
@@ -41,6 +43,7 @@ exports[`TabList renders tabs when disabled 1`] = `
     </button>
     <button
       class="fui-Tab"
+      data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
       disabled=""
       role="tab"
       type="button"
@@ -66,12 +69,13 @@ exports[`TabList renders tabs with default selected tab 1`] = `
   <div
     aria-orientation="horizontal"
     class="fui-TabList"
-    data-tabster="{\\"mover\\":{\\"cyclic\\":true,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
+    data-tabster="{\\"mover\\":{\\"cyclic\\":true,\\"direction\\":2,\\"memorizeCurrent\\":false,\\"hasDefault\\":true}}"
     role="tablist"
   >
     <button
       aria-selected="false"
       class="fui-Tab"
+      data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
       role="tab"
       style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
       type="button"
@@ -91,6 +95,7 @@ exports[`TabList renders tabs with default selected tab 1`] = `
     <button
       aria-selected="true"
       class="fui-Tab"
+      data-tabster="{\\"focusable\\":{\\"isDefault\\":true}}"
       role="tab"
       style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
       type="button"
@@ -105,6 +110,7 @@ exports[`TabList renders tabs with default selected tab 1`] = `
     <button
       aria-selected="false"
       class="fui-Tab"
+      data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
       role="tab"
       style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
       type="button"
@@ -130,7 +136,7 @@ exports[`TabList renders with no tabs 1`] = `
   <div
     aria-orientation="horizontal"
     class="fui-TabList"
-    data-tabster="{\\"mover\\":{\\"cyclic\\":true,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
+    data-tabster="{\\"mover\\":{\\"cyclic\\":true,\\"direction\\":2,\\"memorizeCurrent\\":false,\\"hasDefault\\":true}}"
     role="tablist"
   />
 </div>
@@ -141,12 +147,13 @@ exports[`TabList renders with tabs 1`] = `
   <div
     aria-orientation="horizontal"
     class="fui-TabList"
-    data-tabster="{\\"mover\\":{\\"cyclic\\":true,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
+    data-tabster="{\\"mover\\":{\\"cyclic\\":true,\\"direction\\":2,\\"memorizeCurrent\\":false,\\"hasDefault\\":true}}"
     role="tablist"
   >
     <button
       aria-selected="false"
       class="fui-Tab"
+      data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
       role="tab"
       style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
       type="button"
@@ -166,6 +173,7 @@ exports[`TabList renders with tabs 1`] = `
     <button
       aria-selected="false"
       class="fui-Tab"
+      data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
       role="tab"
       style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
       type="button"
@@ -185,6 +193,7 @@ exports[`TabList renders with tabs 1`] = `
     <button
       aria-selected="false"
       class="fui-Tab"
+      data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
       role="tab"
       style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
       type="button"

diff --git a/packages/react-components/react-tabs/library/src/components/TabList/useTabList.ts b/packages/react-components/react-tabs/library/src/components/TabList/useTabList.ts
@@ -35,7 +35,9 @@ export const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElem
   const focusAttributes = useArrowNavigationGroup({
     circular: true,
     axis: vertical ? 'vertical' : 'horizontal',
-    memorizeCurrent: true,
+    memorizeCurrent: false,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    unstable_hasDefault: true,
   });
 
   const [selectedValue, setSelectedValue] = useControllableState({