Close hovered SubNav.SubMenu on Escape (#989)

* add test to ensure hovered submenus close when escape is pressed

* create utilities for managing submenu state

* close hovered submenu on escape

* explicitly hide collapsed submenu children with aria-hidden

* add changeset

Author: joshfarrant

.changeset/calm-countries-explain.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Allow hovered `SubNav.SubMenu` menus to be closed using <kbd>Escape</kbd> key

packages/react/src/SubNav/SubNav.test.tsx

@@ -172,4 +172,32 @@ describe('SubNav', () => {
 
     expect(toggleSubmenuButton).toHaveAttribute('aria-expanded', 'false')
   })
+
+  it('hides a hovered submenu when escape is pressed', async () => {
+    mockUseWindowSize.mockImplementation(() => ({isLarge: true}))
+
+    const {getByRole, queryByRole} = render(
+      <SubNav fullWidth>
+        <SubNav.Link href="#" aria-current="page">
+          Copilot
+          <SubNav.SubMenu>
+            <SubNav.Link href="#">Copilot feature page one</SubNav.Link>
+            <SubNav.Link href="#">Copilot feature page two</SubNav.Link>
+            <SubNav.Link href="#">Copilot feature page three</SubNav.Link>
+          </SubNav.SubMenu>
+        </SubNav.Link>
+        <SubNav.Link href="#">Code review</SubNav.Link>
+        <SubNav.Link href="#">Search</SubNav.Link>
+        <SubNav.Action href="#">Call to action</SubNav.Action>
+      </SubNav>,
+    )
+
+    await userEvent.hover(getByRole('link', {name: 'Copilot'}))
+
+    expect(getByRole('link', {name: 'Copilot feature page one'})).toBeVisible()
+
+    await userEvent.keyboard('{escape}')
+
+    expect(queryByRole('link', {name: 'Copilot feature page one'})).not.toBeInTheDocument()
+  })
 })

packages/react/src/SubNav/SubNav.tsx

@@ -363,19 +363,21 @@ const SubNavLinkWithSubmenu = forwardRef<HTMLDivElement, SubNavLinkProps>(
       }
     })
 
-    const [label, SubMenuChildren] = children as ReactNode[]
+    const expand = useCallback(() => setIsExpanded(true), [])
+    const collapse = useCallback(() => setIsExpanded(false), [])
+    const toggleExpanded = useCallback(() => setIsExpanded(prev => !prev), [])
+
+    useKeyboardEscape(collapse)
 
-    const handleOnClick = useCallback(() => {
-      setIsExpanded(prev => !prev)
-    }, [])
+    const [label, SubMenuChildren] = children as ReactNode[]
 
     return (
       <div
         className={clsx(styles['SubNav__link--has-sub-menu'], isExpanded && styles['SubNav__link--expanded'])}
         data-testid={testId || testIds.subMenu}
         ref={ref}
-        onMouseOver={() => setIsExpanded(true)}
-        onMouseOut={() => setIsExpanded(false)}
+        onMouseOver={expand}
+        onMouseOut={collapse}
         /**
          * onFocus and onBlur need to be defined to keep the jsx-a11y/mouse-events-have-key-events
          * eslint rule happy. The focus/blur behaviour is handled by useContainsFocus
@@ -402,7 +404,7 @@ const SubNavLinkWithSubmenu = forwardRef<HTMLDivElement, SubNavLinkProps>(
         {isLarge && (
           <button
             className={styles['SubNav__sub-menu-toggle']}
-            onClick={handleOnClick}
+            onClick={toggleExpanded}
             aria-expanded={isExpanded ? 'true' : 'false'}
             aria-controls={submenuId}
             aria-label={`${isExpanded ? 'Close' : 'Open'} submenu`}
@@ -411,7 +413,7 @@ const SubNavLinkWithSubmenu = forwardRef<HTMLDivElement, SubNavLinkProps>(
           </button>
         )}
 
-        <div id={submenuId} className={styles['SubNav__sub-menu-children']}>
+        <div id={submenuId} className={styles['SubNav__sub-menu-children']} aria-hidden={!isExpanded}>
           {SubMenuChildren}
         </div>
       </div>