diff --git a/change/@fluentui-react-nav-preview-d6e9b504-9ca3-4bbd-8066-2e70a8efba32.json b/change/@fluentui-react-nav-preview-d6e9b504-9ca3-4bbd-8066-2e70a8efba32.json new file mode 100644 index 00000000000000..928fd2e7367893 --- /dev/null +++ b/change/@fluentui-react-nav-preview-d6e9b504-9ca3-4bbd-8066-2e70a8efba32.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat: Adding roles and current where appropriate.", + "packageName": "@fluentui/react-nav-preview", + "email": "matejera@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/useNavCategoryItem.tsx b/packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/useNavCategoryItem.tsx index 7d7c78201c4154..084f832643d379 100644 --- a/packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/useNavCategoryItem.tsx +++ b/packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/useNavCategoryItem.tsx @@ -29,6 +29,8 @@ export const useNavCategoryItem_unstable = ( ); const selected = selectedCategoryValue === value; + // there's more than 2 possible values for aria-current, but this is the only one that's used in this component + const validAriaCurrent: 'page' | 'false' = selected && !open ? 'page' : 'false'; return { open, @@ -42,6 +44,7 @@ export const useNavCategoryItem_unstable = ( root: slot.always( getIntrinsicElementProps('button', { ref, + 'aria-current': validAriaCurrent, ...props, onClick: onNavCategoryItemClick, }), diff --git a/packages/react-components/react-nav-preview/library/src/components/NavItem/useNavItem.ts b/packages/react-components/react-nav-preview/library/src/components/NavItem/useNavItem.ts index 9de2fee197a7e9..ec66e38d7ed3bf 100644 --- a/packages/react-components/react-nav-preview/library/src/components/NavItem/useNavItem.ts +++ b/packages/react-components/react-nav-preview/library/src/components/NavItem/useNavItem.ts @@ -38,7 +38,14 @@ export const useNavItem_unstable = ( }); const root = slot.always>( - getIntrinsicElementProps(rootElementType, useARIAButtonProps(rootElementType, props)), + getIntrinsicElementProps( + rootElementType, + useARIAButtonProps(rootElementType, { + 'aria-current': selected ? 'page' : 'false', + role: rootElementType, + ...props, + }), + ), { elementType: rootElementType, defaultProps: { diff --git a/packages/react-components/react-nav-preview/library/src/components/NavSubItem/useNavSubItem.ts b/packages/react-components/react-nav-preview/library/src/components/NavSubItem/useNavSubItem.ts index e7997b304f95d1..fc83644d2ea393 100644 --- a/packages/react-components/react-nav-preview/library/src/components/NavSubItem/useNavSubItem.ts +++ b/packages/react-components/react-nav-preview/library/src/components/NavSubItem/useNavSubItem.ts @@ -41,7 +41,14 @@ export const useNavSubItem_unstable = ( }); const root = slot.always>( - getIntrinsicElementProps(rootElementType, useARIAButtonProps(rootElementType, props)), + getIntrinsicElementProps( + rootElementType, + useARIAButtonProps(rootElementType, { + 'aria-current': selected ? 'page' : 'false', + role: rootElementType, + ...props, + }), + ), { elementType: rootElementType, defaultProps: {