focus trap and fixes

Author: broccolinisoup

src/UnderlineNav2/UnderlineNav.tsx

@@ -5,6 +5,8 @@ import {UnderlineNavContext} from './UnderlineNavContext'
 import {ActionMenu} from '../ActionMenu'
 import {ActionList} from '../ActionList'
 import {useResizeObserver, ResizeObserverEntry} from '../hooks/useResizeObserver'
+import {useFocusZone} from '../hooks/useFocusZone'
+import {FocusKeys} from '@primer/behaviors'
 
 type Overflow = 'auto' | 'menu' | 'scroll'
 type ChildWidthArray = Array<{width: number}>
@@ -84,6 +86,16 @@ export const UnderlineNav = forwardRef(
   ) => {
     const backupRef = useRef<HTMLElement>(null)
     const newRef = (forwardedRef ?? backupRef) as MutableRefObject<HTMLElement>
+
+    // This might change if we decide tab through the navigation items rather than navigationg with the arrow keys.
+    // TBD. In the meantime keeping it as a menu with the focus trap.
+    // ref: https://www.w3.org/WAI/ARIA/apg/example-index/menubar/menubar-navigation.html (Keyboard Support)
+    useFocusZone({
+      containerRef: backupRef,
+      bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+      focusOutBehavior: 'wrap'
+    })
+
     const styles = {
       display: 'flex',
       justifyContent: align === 'right' ? 'flex-end' : 'space-between',
@@ -144,7 +156,7 @@ export const UnderlineNav = forwardRef(
       <UnderlineNavContext.Provider
         value={{setChildrenWidth, selectedLink, setSelectedLink, afterSelect: afterSelectHandler, variant}}
       >
-        <Box as={as} sx={merge(styles, sxProp)} aria-label={label} ref={newRef}>
+        <Box tabIndex={0} as={as} sx={merge(styles, sxProp)} aria-label={label} ref={newRef}>
           <Box as="ul" sx={merge<BetterSystemStyleObject>(overflowStyles, ulStyles)}>
             {responsiveProps.items}
           </Box>

src/UnderlineNav2/UnderlineNavItem.tsx

@@ -5,6 +5,7 @@ import {IconProps} from '@primer/octicons-react'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {UnderlineNavContext} from './UnderlineNavContext'
 import CounterLabel from '../CounterLabel'
+import {get} from '../constants'
 
 // adopted from React.AnchorHTMLAttributes
 type LinkProps = {
@@ -109,15 +110,15 @@ export const UnderlineNavItem = forwardRef(
       '&:focus': {
         outline: 0,
         '& > div[data-component="wrapper"]': {
-          boxShadow: `inset 0 0 0 2px #0969da`
+          boxShadow: `inset 0 0 0 2px ${get('colors.accent.fg')}`
         },
         // where focus-visible is supported, remove the focus box-shadow
         '&:not(:focus-visible) > div[data-component="wrapper"]': {
           boxShadow: 'none'
         }
       },
       '&:focus-visible > div[data-component="wrapper"]': {
-        boxShadow: `inset 0 0 0 2px #0969da`
+        boxShadow: `inset 0 0 0 2px ${get('colors.accent.fg')}`
       },
       // renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected
       '& span[data-content]::before': {
@@ -131,7 +132,7 @@ export const UnderlineNavItem = forwardRef(
       '&::after': {
         position: 'absolute',
         right: '50%',
-        bottom: 'calc(50% - 23px)',
+        bottom: 0,
         width: `calc(100% - 8px)`,
         height: 2,
         content: '""',