From b63c87c7d96a2c543e2437845d8f7f23ae49a506 Mon Sep 17 00:00:00 2001 From: Mason Tejera <17346018+mltejera@users.noreply.github.com> Date: Mon, 10 Jun 2024 15:43:12 -0700 Subject: [PATCH 1/6] adding more a11y features --- .../src/components/NavCategoryItem/useNavCategoryItem.tsx | 3 +++ .../library/src/components/NavDrawer/useNavDrawer.ts | 1 + .../library/src/components/NavItem/useNavItem.ts | 5 ++++- .../library/src/components/NavSubItem/useNavSubItem.ts | 5 ++++- 4 files changed, 12 insertions(+), 2 deletions(-) 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 7d7c78201c415..64bb06e798b27 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 @@ -42,6 +42,9 @@ export const useNavCategoryItem_unstable = ( root: slot.always( getIntrinsicElementProps('button', { ref, + role: 'menuitem', + 'aria-level': 1, + 'aria-expanded': open, ...props, onClick: onNavCategoryItemClick, }), 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 5ec217dd05278..c6e320cdf6810 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 @@ -38,6 +38,7 @@ export const useNavDrawer_unstable = (props: NavDrawerProps, ref: React.Ref( { ref, + role: 'menu', ...props, ...focusAttributes, }, 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 9de2fee197a7e..d88af2c558e0d 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,10 @@ export const useNavItem_unstable = ( }); const root = slot.always>( - getIntrinsicElementProps(rootElementType, useARIAButtonProps(rootElementType, props)), + getIntrinsicElementProps( + rootElementType, + useARIAButtonProps(rootElementType, { role: 'menuitem', 'aria-level': 1, ...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 e7997b304f95d..990e28beb881e 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,10 @@ export const useNavSubItem_unstable = ( }); const root = slot.always>( - getIntrinsicElementProps(rootElementType, useARIAButtonProps(rootElementType, props)), + getIntrinsicElementProps( + rootElementType, + useARIAButtonProps(rootElementType, { role: 'menuitem', 'aria-level': 2, ...props }), + ), { elementType: rootElementType, defaultProps: { From 8080192b8de84d7caa372591e0ed91768d0366ed Mon Sep 17 00:00:00 2001 From: Mason Tejera <17346018+mltejera@users.noreply.github.com> Date: Mon, 10 Jun 2024 15:54:21 -0700 Subject: [PATCH 2/6] change file --- ...t-nav-preview-d6e9b504-9ca3-4bbd-8066-2e70a8efba32.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-nav-preview-d6e9b504-9ca3-4bbd-8066-2e70a8efba32.json 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 0000000000000..dc6bc11b21f3b --- /dev/null +++ b/change/@fluentui-react-nav-preview-d6e9b504-9ca3-4bbd-8066-2e70a8efba32.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Adding aria menu and menu item roles. Adding aria expanded and collapsed. Adding aria-levels.", + "packageName": "@fluentui/react-nav-preview", + "email": "matejera@microsoft.com", + "dependentChangeType": "patch" +} From f2437b09327c87ff97ee2ea15b44bb7d0a9bc00a Mon Sep 17 00:00:00 2001 From: Mason Tejera <17346018+mltejera@users.noreply.github.com> Date: Mon, 10 Jun 2024 15:54:58 -0700 Subject: [PATCH 3/6] update change file --- ...-react-nav-preview-d6e9b504-9ca3-4bbd-8066-2e70a8efba32.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index dc6bc11b21f3b..18b120e43a215 100644 --- a/change/@fluentui-react-nav-preview-d6e9b504-9ca3-4bbd-8066-2e70a8efba32.json +++ b/change/@fluentui-react-nav-preview-d6e9b504-9ca3-4bbd-8066-2e70a8efba32.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "Adding aria menu and menu item roles. Adding aria expanded and collapsed. Adding aria-levels.", + "comment": "feat: Adding aria menu and menu item roles. Adding aria expanded and collapsed. Adding aria-levels.", "packageName": "@fluentui/react-nav-preview", "email": "matejera@microsoft.com", "dependentChangeType": "patch" From 9d0b4ea72361c6731d429a11975b12070a4c0416 Mon Sep 17 00:00:00 2001 From: Mason Tejera <17346018+mltejera@users.noreply.github.com> Date: Mon, 10 Jun 2024 16:02:52 -0700 Subject: [PATCH 4/6] More change file updates --- ...-react-nav-preview-d6e9b504-9ca3-4bbd-8066-2e70a8efba32.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 18b120e43a215..8884f233bb8ea 100644 --- a/change/@fluentui-react-nav-preview-d6e9b504-9ca3-4bbd-8066-2e70a8efba32.json +++ b/change/@fluentui-react-nav-preview-d6e9b504-9ca3-4bbd-8066-2e70a8efba32.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "feat: Adding aria menu and menu item roles. Adding aria expanded and collapsed. Adding aria-levels.", + "comment": "feat: Adding roles, expanded and levels.", "packageName": "@fluentui/react-nav-preview", "email": "matejera@microsoft.com", "dependentChangeType": "patch" From 64e94049241872c0c380d7f97c3b03e897b56caf Mon Sep 17 00:00:00 2001 From: Mason Tejera <17346018+mltejera@users.noreply.github.com> Date: Tue, 11 Jun 2024 10:17:19 -0700 Subject: [PATCH 5/6] more updates --- .../src/components/NavCategoryItem/useNavCategoryItem.tsx | 6 +++--- .../library/src/components/NavDrawer/useNavDrawer.ts | 1 - .../library/src/components/NavItem/useNavItem.ts | 6 +++++- .../library/src/components/NavSubItem/useNavSubItem.ts | 6 +++++- 4 files changed, 13 insertions(+), 6 deletions(-) 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 64bb06e798b27..084f832643d37 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,9 +44,7 @@ export const useNavCategoryItem_unstable = ( root: slot.always( getIntrinsicElementProps('button', { ref, - role: 'menuitem', - 'aria-level': 1, - 'aria-expanded': open, + 'aria-current': validAriaCurrent, ...props, onClick: onNavCategoryItemClick, }), 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 c6e320cdf6810..5ec217dd05278 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 @@ -38,7 +38,6 @@ export const useNavDrawer_unstable = (props: NavDrawerProps, ref: React.Ref( { ref, - role: 'menu', ...props, ...focusAttributes, }, 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 d88af2c558e0d..ec66e38d7ed3b 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 @@ -40,7 +40,11 @@ export const useNavItem_unstable = ( const root = slot.always>( getIntrinsicElementProps( rootElementType, - useARIAButtonProps(rootElementType, { role: 'menuitem', 'aria-level': 1, ...props }), + useARIAButtonProps(rootElementType, { + 'aria-current': selected ? 'page' : 'false', + role: rootElementType, + ...props, + }), ), { elementType: rootElementType, 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 990e28beb881e..fc83644d2ea39 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 @@ -43,7 +43,11 @@ export const useNavSubItem_unstable = ( const root = slot.always>( getIntrinsicElementProps( rootElementType, - useARIAButtonProps(rootElementType, { role: 'menuitem', 'aria-level': 2, ...props }), + useARIAButtonProps(rootElementType, { + 'aria-current': selected ? 'page' : 'false', + role: rootElementType, + ...props, + }), ), { elementType: rootElementType, From 1939acf624d7061d253af736530ff8d5f7043464 Mon Sep 17 00:00:00 2001 From: Mason Tejera <17346018+mltejera@users.noreply.github.com> Date: Tue, 11 Jun 2024 10:24:20 -0700 Subject: [PATCH 6/6] updating change file --- ...-react-nav-preview-d6e9b504-9ca3-4bbd-8066-2e70a8efba32.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 8884f233bb8ea..928fd2e736789 100644 --- a/change/@fluentui-react-nav-preview-d6e9b504-9ca3-4bbd-8066-2e70a8efba32.json +++ b/change/@fluentui-react-nav-preview-d6e9b504-9ca3-4bbd-8066-2e70a8efba32.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "feat: Adding roles, expanded and levels.", + "comment": "feat: Adding roles and current where appropriate.", "packageName": "@fluentui/react-nav-preview", "email": "matejera@microsoft.com", "dependentChangeType": "patch"