From f32ebb3b8adc57c083a6fb5beca20b5af9aac349 Mon Sep 17 00:00:00 2001
From: Ray Knight <array.knight+github@gmail.com>
Date: Thu, 3 Sep 2026 11:28:58 -0700
Subject: [PATCH] fix(react-headless-components-preview): default aria-hidden
 on NavCategoryItem's expandIcon slot

The Griffel react-nav hooks default the decorative expand chevron to
aria-hidden: true; the headless NavCategoryItem re-implements the slot
without that default, so any expandIcon a consumer supplies (other than
an untitled Fluent icon, which self-hides) leaks into the button's
accessible name.

Fixes #36685.
---
 ...-e4e832ae-9516-48ff-bcdb-4c477a4cc4d8.json |  7 +++++
 .../library/src/components/Nav/Nav.test.tsx   | 30 +++++++++++++++++++
 .../Nav/NavCategoryItem/useNavCategoryItem.ts |  1 +
 3 files changed, 38 insertions(+)
 create mode 100644 change/@fluentui-react-headless-components-preview-e4e832ae-9516-48ff-bcdb-4c477a4cc4d8.json

diff --git a/change/@fluentui-react-headless-components-preview-e4e832ae-9516-48ff-bcdb-4c477a4cc4d8.json b/change/@fluentui-react-headless-components-preview-e4e832ae-9516-48ff-bcdb-4c477a4cc4d8.json
new file mode 100644
index 0000000000000..6ebdd9825e28e
--- /dev/null
+++ b/change/@fluentui-react-headless-components-preview-e4e832ae-9516-48ff-bcdb-4c477a4cc4d8.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: default aria-hidden on NavCategoryItem's expandIcon slot",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "array.knight@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Nav/Nav.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Nav/Nav.test.tsx
index e1bd45c6110fc..df7f9baec147e 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Nav/Nav.test.tsx
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Nav/Nav.test.tsx
@@ -202,4 +202,34 @@ describe('Nav', () => {
     expect(link.tagName).toBe('A');
     expect(link).toHaveAttribute('href', 'https://example.com');
   });
+
+  it('hides NavCategoryItem expandIcon from assistive technology by default', () => {
+    const result = render(
+      <Nav>
+        <NavCategory value="cat1">
+          <NavCategoryItem expandIcon={{ children: <img alt="expand" src="chevron.png" /> }}>
+            Category 1
+          </NavCategoryItem>
+        </NavCategory>
+      </Nav>,
+    );
+
+    expect(result.getByRole('button', { name: 'Category 1' })).toBeInTheDocument();
+    expect(result.getByAltText('expand').parentElement).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('allows a consumer to override NavCategoryItem expandIcon aria-hidden', () => {
+    const result = render(
+      <Nav>
+        <NavCategory value="cat1">
+          <NavCategoryItem expandIcon={{ 'aria-hidden': false, children: <img alt="expand" src="chevron.png" /> }}>
+            Category 1
+          </NavCategoryItem>
+        </NavCategory>
+      </Nav>,
+    );
+
+    expect(result.getByRole('button', { name: 'Category 1 expand' })).toBeInTheDocument();
+    expect(result.getByAltText('expand').parentElement).toHaveAttribute('aria-hidden', 'false');
+  });
 });
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Nav/NavCategoryItem/useNavCategoryItem.ts b/packages/react-components/react-headless-components-preview/library/src/components/Nav/NavCategoryItem/useNavCategoryItem.ts
index d4235eb68a3f3..10ce6b71cb75f 100644
--- a/packages/react-components/react-headless-components-preview/library/src/components/Nav/NavCategoryItem/useNavCategoryItem.ts
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Nav/NavCategoryItem/useNavCategoryItem.ts
@@ -53,6 +53,7 @@ export const useNavCategoryItem = (
       elementType: 'span',
     }),
     expandIcon: slot.optional(expandIcon, {
+      defaultProps: { 'aria-hidden': true },
       elementType: 'span',
     }),
     components: {