SelectPanel2: Keyboard navigation for list (#3768)

* remove sort + divider

* reorder state to be more cohesive

* clean up suspended story

* clean up C and D

* A: sort items to show initially selected ones first

* add event.preventDefault by default

* add initial sorting function to stories

* add missing props for D with use transition

* Replace SelectPanel.Heading with title

* add default footer

* add minimal story

* oops, it's not possible to have query

* clean up story with tabs

* Add option for external anchor

* improve custom events story

* story: bring back filter for Filter story

* rename story

* remove the need for SelectPanel.ActionList

* add selection variable by default

* add list and item role automatically

* oops, unused imports

* reduce scope

* update ActionList snapshot

* fix bad merge, sorry!

* missed a spot!

* remove unrelated change

* update snapshots

* add focus zone around list

* we don't need data-component anymore :)

* make loading state full height

* bring back explicit footer for suspense

* Add warning to ActionMenu story

* undefined can't be a string!

* test(vrt): update snapshots

* found an easier way to style

* Revert "test(vrt): update snapshots"

This reverts commit 02901a8.

* Empty message should be out of ActionList

* footer outside BOx

* arrow keys navigation is only for list items

* add question

---------

Co-authored-by: siddharthkp <[email protected]>

src/drafts/SelectPanel2/SelectPanel.tsx

@@ -8,16 +8,17 @@ import {
   Heading,
   Box,
   AnchoredOverlay,
+  AnchoredOverlayProps,
   Tooltip,
   TextInput,
-  AnchoredOverlayProps,
   Spinner,
   Text,
   ActionListProps,
 } 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
@@ -79,6 +80,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
@@ -90,11 +100,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,
@@ -118,6 +130,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