From 424835a9e7ceb42bb7f76e4749a78fe163847e16 Mon Sep 17 00:00:00 2001
From: Mason Tejera <17346018+mltejera@users.noreply.github.com>
Date: Fri, 8 Nov 2024 00:32:01 +0000
Subject: [PATCH] [react-nav-preview](feat): Allowing Nav to be navigable by
 tabbing (#33232)

---
 ...-preview-bbaa31db-f4ef-4bdb-95f0-f3f749a409c9.json |  7 +++++++
 .../library/etc/react-nav-preview.api.md              |  4 +++-
 .../src/components/NavDrawer/NavDrawer.types.ts       | 11 ++++++++++-
 .../library/src/components/NavDrawer/useNavDrawer.ts  |  3 +++
 .../stories/src/NavDrawer/Controlled.stories.tsx      |  1 +
 5 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 change/@fluentui-react-nav-preview-bbaa31db-f4ef-4bdb-95f0-f3f749a409c9.json

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
new file mode 100644
index 0000000000000..064403730a92c
--- /dev/null
+++ 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": "matejera@microsoft.com",
+  "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
index 18680afb49c0f..183c5222ea603 100644
--- 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/packages/react-components/react-nav-preview/library/src/components/NavDrawer/NavDrawer.types.ts b/packages/react-components/react-nav-preview/library/src/components/NavDrawer/NavDrawer.types.ts
index cf5f9f06f3a14..4c23d1ac19eab 100644
--- a/packages/react-components/react-nav-preview/library/src/components/NavDrawer/NavDrawer.types.ts
+++ b/packages/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
index 87d2beeec6634..e0e0114439160 100644
--- 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
index 74fbff871859f..10d6bf73bc5c4 100644
--- 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}