SelectPanel2: Keyboard navigation for list

src/drafts/SelectPanel2/SelectPanel.tsx

@@ -8,15 +8,16 @@ import {
   Heading,
   Box,
   AnchoredOverlay,
+  AnchoredOverlayProps,
   Tooltip,
   TextInput,
-  AnchoredOverlayProps,
   Spinner,
   Text,
 } from '../../../src/index'
 import {ActionListContainerContext} from '../../../src/ActionList/ActionListContainerContext'
 import {useSlots} from '../../hooks/useSlots'
 import {useProvidedRefOrCreate} from '../../hooks'
+import {useFocusZone} from '../../hooks/useFocusZone'
 
 const SelectPanelContext = React.createContext<{
   title: string
@@ -72,6 +73,15 @@ const SelectPanel = props => {
 
   const [slots, childrenInBody] = useSlots(contents, {header: SelectPanelHeader, footer: SelectPanelFooter})
 
+  /* Arrow keys navigation for list items */
+  const {containerRef: listContainerRef} = useFocusZone(
+    {
+      bindKeys: FocusKeys.ArrowVertical | FocusKeys.HomeAndEnd | FocusKeys.PageUpDown,
+      focusableElementFilter: element => element.tagName === 'LI',
+    },
+    [internalOpen],
+  )
+
   return (
     <>
       <AnchoredOverlay
@@ -83,11 +93,13 @@ const SelectPanel = props => {
         onClose={onInternalClose}
         width={props.width || 'medium'}
         height={props.height || 'large'}
-        focusZoneSettings={{bindKeys: FocusKeys.Tab}}
+        focusZoneSettings={{
+          // we only want focus trap from the overlay,
+          // we don't want focus zone on the whole overlay because
+          // we have a focus zone on the list
+          disabled: true,
+        }}
       >
-        {/* TODO: Keyboard navigation of actionlist should be arrow keys
-            with tabs to enter and escape
-        */}
         <SelectPanelContext.Provider
           value={{
             title: props.title,
@@ -110,6 +122,8 @@ const SelectPanel = props => {
             {/* render default header as fallback */}
             {slots.header || <SelectPanel.Header />}
             <Box
+              as="div"
+              ref={listContainerRef as React.RefObject<HTMLDivElement>}
               sx={{
                 flexShrink: 1,
                 flexGrow: 1,

src/drafts/SelectPanel2/work-log.md

@@ -6,6 +6,7 @@
 
 ## Open accessibility questions
 
+1. Should pressing ArrowDown on SearchInput jump to first list item? Or only with Tab
 1. Should the text for Submit/Save button be customisable based on the page context? So that it says something like "Assign users" or "Add labels" instead of just "Save" or "Submit". Or is optional because the context is already established?
 
 ## Answered accessibility questions