[react-nav-preview](feat): Allowing Nav to be navigable by tabbing (m…

…icrosoft#33232)
marcosmoura · Nov 8, 2024 · 424835a · 424835a
1 parent 27655a9
commit 424835a
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 2 deletions.
diff --git a/change/@fluentui-react-nav-preview-bbaa31db-f4ef-4bdb-95f0-f3f749a409c9.json b/change/@fluentui-react-nav-preview-bbaa31db-f4ef-4bdb-95f0-f3f749a409c9.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Exposed 'tabbable' prop on NavDrawer to let consumers disagree with default arrowing opinion.",
+  "packageName": "@fluentui/react-nav-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-nav-preview/library/etc/react-nav-preview.api.md b/packages/react-components/react-nav-preview/library/etc/react-nav-preview.api.md
@@ -217,7 +217,9 @@ export type NavDrawerHeaderSlots = DrawerHeaderSlots;
 export type NavDrawerHeaderState = DrawerHeaderState;
 
 // @public
-export type NavDrawerProps = ComponentProps<NavDrawerSlots> & DrawerProps & NavProps;
+export type NavDrawerProps = ComponentProps<NavDrawerSlots> & DrawerProps & NavProps & {
+    tabbable?: boolean;
+};
 
 // @public
 export type NavDrawerSlots = DrawerSlots;

diff --git a/...es/react-components/react-nav-preview/library/src/components/NavDrawer/NavDrawer.types.ts b/...es/react-components/react-nav-preview/library/src/components/NavDrawer/NavDrawer.types.ts
@@ -11,7 +11,16 @@ export type NavDrawerSlots = DrawerSlots;
 /**
  * NavDrawer Props
  */
-export type NavDrawerProps = ComponentProps<NavDrawerSlots> & DrawerProps & NavProps;
+export type NavDrawerProps = ComponentProps<NavDrawerSlots> &
+  DrawerProps &
+  NavProps & {
+    /**
+     * The component uses arrow navigation by default.
+     * Setting this to true enables tab AND arrow navigation.
+     * @default false
+     */
+    tabbable?: boolean;
+  };
 
 /**
  * State used in rendering NavDrawer

diff --git a/packages/react-components/react-nav-preview/library/src/components/NavDrawer/useNavDrawer.ts b/packages/react-components/react-nav-preview/library/src/components/NavDrawer/useNavDrawer.ts
@@ -16,9 +16,12 @@ import type { NavDrawerProps, NavDrawerState } from './NavDrawer.types';
  * @param ref - reference to root HTMLDivElement of NavDrawer
  */
 export const useNavDrawer_unstable = (props: NavDrawerProps, ref: React.Ref<HTMLDivElement>): NavDrawerState => {
+  const { tabbable = false } = props;
+
   const focusAttributes = useArrowNavigationGroup({
     axis: 'vertical',
     circular: true,
+    tabbable,
   });
 
   const navState = useNav_unstable(

diff --git a/packages/react-components/react-nav-preview/stories/src/NavDrawer/Controlled.stories.tsx b/packages/react-components/react-nav-preview/stories/src/NavDrawer/Controlled.stories.tsx
@@ -204,6 +204,7 @@ export const Controlled = (props: Partial<NavDrawerProps>) => {
         // multiple={isMultiple}
         onNavCategoryItemToggle={handleCategoryToggle}
         onNavItemSelect={handleItemSelect}
+        tabbable={true} // enables keyboard tabbing
         openCategories={openCategories}
         selectedValue={selectedValue}
         selectedCategoryValue={selectedCategoryValue}