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 00000000000000..6ebdd9825e28e0 --- /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 e1bd45c6110fce..df7f9baec147ec 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( + , + ); + + 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( + , + ); + + 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 d4235eb68a3f3f..10ce6b71cb75fe 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: {