Skip to content

Commit

Permalink
use default tab order for AnchorNav
Browse files Browse the repository at this point in the history
  • Loading branch information
joshfarrant committed Jun 24, 2024
1 parent 67d0af9 commit 7b40471
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 67 deletions.
4 changes: 1 addition & 3 deletions packages/react/src/AnchorNav/AnchorNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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)')
Expand Down Expand Up @@ -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'}
Expand Down
65 changes: 1 addition & 64 deletions packages/react/src/AnchorNav/useExpandedMenu.ts
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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])
}

0 comments on commit 7b40471

Please sign in to comment.