use default tab order for AnchorNav

.changeset/soft-mugs-live.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Improved keyboard navigation in mobile `AnchorNav` component. Arrow key navigation has been replaced with tab navigation.

packages/react/src/AnchorNav/AnchorNav.tsx

@@ -59,7 +59,6 @@ function _AnchorNav({children, enableDefaultBgColor = false, hideUntilSticky = f
 
   const wrapperRef = useRef<HTMLDivElement | null>(null)
   const rootRef = useRef<HTMLElement | null>(null)
-  const menuToggleButtonRef = useRef<HTMLButtonElement | null>(null)
   const linkContainerRef = useRef<HTMLDivElement | null>(null)
 
   const {isLarge} = useWindowSize()
@@ -87,7 +86,7 @@ function _AnchorNav({children, enableDefaultBgColor = false, hideUntilSticky = f
   }
 
   useKeyboardEscape(closeMenuCallback)
-  useExpandedMenu(menuOpen, linkContainerRef, menuToggleButtonRef, !isLarge)
+  useExpandedMenu(menuOpen, linkContainerRef, !isLarge)
 
   useEffect(() => {
     const queryResult = window.matchMedia('(prefers-reduced-motion: reduce)')
@@ -213,7 +212,6 @@ function _AnchorNav({children, enableDefaultBgColor = false, hideUntilSticky = f
           )}
         >
           <button
-            ref={menuToggleButtonRef}
             onClick={handleMenuToggle}
             className={clsx(styles['AnchorNav-menu-button'])}
             aria-expanded={menuOpen ? 'true' : 'false'}

packages/react/src/AnchorNav/useExpandedMenu.ts

@@ -1,11 +1,6 @@
 import React, {useEffect} from 'react'
 
-export const useExpandedMenu = (
-  open: boolean,
-  containerRef: React.RefObject<HTMLElement>,
-  anchorRef: React.RefObject<HTMLElement>,
-  isNarrow: boolean,
-) => {
+export const useExpandedMenu = (open: boolean, containerRef: React.RefObject<HTMLElement>, isNarrow: boolean) => {
   // Prevent background scroll when menu is open
   useEffect(() => {
     if (open && isNarrow) {
@@ -22,62 +17,4 @@ export const useExpandedMenu = (
       firstChildOfMenu.focus()
     }
   }, [open, containerRef])
-
-  // Manage the keyboard focus on the menu items
-  useEffect(() => {
-    const anchor = anchorRef.current
-    const container = containerRef.current
-    const nextNode = container?.nextSibling as HTMLElement | null
-    const childNodes = container?.children as unknown as HTMLElement[] | null // convert from HTMLCollecion to HTMLElement[]
-
-    let activeNodeIndex = 0
-
-    const handler = (event: KeyboardEvent) => {
-      if (!open || !container || !childNodes || childNodes.length <= 1) return
-
-      const lastChild = childNodes[childNodes.length - 1]
-      const lastChildIndexPos = childNodes.length - 1
-      // tab key
-      if (event.key === 'Tab') {
-        event.preventDefault()
-
-        if (nextNode?.getAttribute('data-forward-focus') === 'true' && nextNode.firstChild instanceof HTMLElement) {
-          nextNode.firstChild.focus()
-        } else {
-          nextNode?.focus()
-        }
-      }
-      // shift+tab
-      if (event.shiftKey && event.key === 'Tab') {
-        event.preventDefault()
-        anchor?.focus()
-      }
-      if (event.key === 'ArrowDown') {
-        event.preventDefault()
-        if (activeNodeIndex === lastChildIndexPos) {
-          childNodes[0].focus()
-          activeNodeIndex = 0
-          return
-        } else if (activeNodeIndex < lastChildIndexPos) {
-          childNodes[activeNodeIndex + 1].focus()
-          activeNodeIndex += 1
-          return
-        }
-      } else if (event.key === 'ArrowUp') {
-        event.preventDefault() // prevent scroll event
-        if (activeNodeIndex === 0) {
-          lastChild.focus()
-          activeNodeIndex = lastChildIndexPos
-          return
-        } else {
-          childNodes[activeNodeIndex - 1].focus()
-          activeNodeIndex--
-          return
-        }
-      }
-    }
-
-    container?.addEventListener('keydown', handler)
-    return () => container?.addEventListener('keydown', handler)
-  }, [open, containerRef, anchorRef])
 }