From 49dfc0ef64037eccf4efa2819fc2441c22f1622a Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Thu, 26 Oct 2023 08:19:59 +0200
Subject: [PATCH] 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 02901a8dc26fc840d2c5c7cb76bd4de47be7efc0.

* Empty message should be out of ActionList

* footer outside BOx

* arrow keys navigation is only for list items

* add question

---------

Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>
---
 src/drafts/SelectPanel2/SelectPanel.tsx | 24 +++++++++++++++++++-----
 src/drafts/SelectPanel2/work-log.md     |  1 +
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/drafts/SelectPanel2/SelectPanel.tsx b/src/drafts/SelectPanel2/SelectPanel.tsx
index 6dd34fc7f90..053d877621d 100644
--- a/src/drafts/SelectPanel2/SelectPanel.tsx
+++ b/src/drafts/SelectPanel2/SelectPanel.tsx
@@ -8,9 +8,9 @@ import {
   Heading,
   Box,
   AnchoredOverlay,
+  AnchoredOverlayProps,
   Tooltip,
   TextInput,
-  AnchoredOverlayProps,
   Spinner,
   Text,
   ActionListProps,
@@ -18,6 +18,7 @@ import {
 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,
diff --git a/src/drafts/SelectPanel2/work-log.md b/src/drafts/SelectPanel2/work-log.md
index 39884c13b35..7a0cd07be63 100644
--- a/src/drafts/SelectPanel2/work-log.md
+++ b/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