Improve keyboard navigation in SubMenu anchor variant (#1084)

* remove visibility:hidden from SubNav anchor variant

* ensure SubNav anchor menu is visible when it contains focus

* convert AnchorNavVariant story to reusable template

* add a storybook interaction test to assert focus order in SubNav anchor variant

* add changeset

Author: joshfarrant

.changeset/breezy-shrimps-sell.md

@@ -0,0 +1,7 @@
+---
+'@primer/react-brand': patch
+---
+
+Improved keyboard navigation in `SubNav` anchor variant.
+
+The anchor-based submenu now appears after the main `SubNav` items in the focus order, and becomes visible when focussed.

packages/react/src/SubNav/SubNav.features.stories.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react'
-import {Meta} from '@storybook/react'
+import type {Meta, StoryFn} from '@storybook/react'
 import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport'
 import {linkTo} from '@storybook/addon-links'
 
@@ -250,7 +250,7 @@ const AnchorNavVariantData = {
   ['Reliability']: 'reliability',
 }
 
-export const AnchorNavVariant = args => (
+export const AnchorNavVariantTemplate: StoryFn<typeof SubNav> = args => (
   <main>
     <Box paddingBlockStart={64} backgroundColor="subtle" style={{position: 'relative', zIndex: 32}}></Box>
     <SubNav {...args}>
@@ -290,6 +290,9 @@ export const AnchorNavVariant = args => (
     </Box>
   </main>
 )
+
+const AnchorNavVariant = AnchorNavVariantTemplate.bind({})
+
 AnchorNavVariant.parameters = {
   layout: 'fullscreen',
 }
@@ -454,3 +457,54 @@ KeyboardNavigation.play = async ({canvasElement}) => {
   await userEvent.tab({shift: true})
   expect(getByRole('link', {name: 'Discussions'})).toHaveFocus()
 }
+
+export const AnchorNavVariantKeyboardNavigation = AnchorNavVariant.bind({})
+
+AnchorNavVariantKeyboardNavigation.play = async ({canvasElement}) => {
+  const {getByRole, getAllByRole} = within(canvasElement)
+
+  await userEvent.tab()
+  expect(getByRole('link', {name: 'Enterprise'})).toHaveFocus()
+
+  await userEvent.tab()
+  expect(getByRole('link', {name: 'Overview'})).toHaveFocus()
+
+  await userEvent.tab()
+  expect(getByRole('link', {name: 'Advanced Security'})).toHaveFocus()
+
+  await userEvent.tab()
+  expect(getByRole('link', {name: 'Copilot Enterprise'})).toHaveFocus()
+
+  await userEvent.tab()
+  expect(getByRole('link', {name: 'Premium Support'})).toHaveFocus()
+
+  await userEvent.tab()
+  expect(getByRole('link', {name: 'Scale'})).toHaveFocus()
+
+  await userEvent.tab()
+  expect(getByRole('link', {name: 'AI'})).toHaveFocus()
+
+  await userEvent.tab()
+  expect(getByRole('link', {name: 'Security'})).toHaveFocus()
+
+  await userEvent.tab()
+  expect(getByRole('link', {name: 'Reliability'})).toHaveFocus()
+
+  await userEvent.tab()
+  expect(getAllByRole('button', {name: 'Learn more'})[0]).toHaveFocus()
+
+  await userEvent.tab({shift: true})
+  expect(getByRole('link', {name: 'Reliability'})).toHaveFocus()
+
+  await userEvent.tab({shift: true})
+  expect(getByRole('link', {name: 'Security'})).toHaveFocus()
+
+  await userEvent.tab({shift: true})
+  expect(getByRole('link', {name: 'AI'})).toHaveFocus()
+
+  await userEvent.tab({shift: true})
+  expect(getByRole('link', {name: 'Scale'})).toHaveFocus()
+
+  await userEvent.tab({shift: true})
+  expect(getByRole('link', {name: 'Premium Support'})).toHaveFocus()
+}

packages/react/src/SubNav/SubNav.module.css

@@ -104,6 +104,7 @@
     background-color var(--brand-animation-duration-default) var(--brand-animation-easing-default);
 }
 
+.SubNav__anchor-menu-outer-container:focus-within .SubNav__anchor-menu-container,
 .SubNav__anchor-menu-outer-container--stuck .SubNav__anchor-menu-container {
   transform: translateY(0);
   opacity: 1;
@@ -115,19 +116,20 @@
   transition: height var(--brand-animation-duration-default) var(--brand-animation-easing-default);
 }
 
+.SubNav__anchor-menu-outer-container:focus-within,
 .SubNav__anchor-menu-outer-container--stuck {
   height: auto;
 }
 
 .SubNav__sub-menu--anchor {
   opacity: 0;
-  visibility: hidden;
   transform: translateY(var(--brand-animation-variant-slideInDown-distance));
   transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
     height var(--brand-animation-duration-default) var(--brand-animation-easing-default),
     transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
 }
 
+.SubNav__anchor-menu-outer-container:focus-within .SubNav__sub-menu--anchor,
 .SubNav__anchor-menu-outer-container--stuck .SubNav__sub-menu--anchor {
   visibility: visible;
   opacity: 1;