SelectPanel: Remove aria-activedescendant from SelectPanel (#5801)

Co-authored-by: TylerJDev <[email protected]>
Co-authored-by: Marie Lucca <[email protected]>
Co-authored-by: francinelucca <[email protected]>

Author: TylerJDev

.changeset/four-cars-attend.md

@@ -137,12 +137,12 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       if (selectionVariant === 'single') inferredItemRole = 'menuitemradio'
       else if (selectionVariant === 'multiple') inferredItemRole = 'menuitemcheckbox'
       else inferredItemRole = 'menuitem'
-    } else if (container === 'SelectPanel' && listRole === 'listbox') {
+    } else if (container && ['SelectPanel', 'FilteredActionList'].includes(container) && listRole === 'listbox') {
       if (selectionVariant !== undefined) inferredItemRole = 'option'
     }
 
     const itemRole = role || inferredItemRole
-    const menuContext = container === 'ActionMenu' || container === 'SelectPanel'
+    const menuContext = container === 'ActionMenu' || container === 'SelectPanel' || container === 'FilteredActionList'
 
     if (slots.trailingAction) {
       invariant(!menuContext, `ActionList.TrailingAction can not be used within a ${container}.`)

.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-colorblind-modern-action-list--true-linux.png

@@ -41,6 +41,7 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
       listLabelledBy,
       selectionVariant: containerSelectionVariant, // TODO: Remove after DropdownMenu2 deprecation
       enableFocusZone: enableFocusZoneFromContainer,
+      container,
     } = React.useContext(ActionListContainerContext)
 
     const ariaLabelledBy = slots.heading ? (slots.heading.props.id ?? headingId) : listLabelledBy
@@ -55,7 +56,7 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
       disabled: !enableFocusZone,
       containerRef: listRef,
       bindKeys: FocusKeys.ArrowVertical | FocusKeys.HomeAndEnd | FocusKeys.PageUpDown,
-      focusOutBehavior: listRole === 'menu' ? 'wrap' : undefined,
+      focusOutBehavior: listRole === 'menu' || container === 'FilteredActionList' ? 'wrap' : undefined,
     })
 
     const enabled = useFeatureFlag(actionListCssModulesFlag)

.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-dimmed-modern-action-list--true-linux.png

@@ -4,11 +4,11 @@ import {FilteredActionList as WithDeprecatedActionList} from './FilteredActionLi
 import {FilteredActionList as WithStableActionList} from './FilteredActionListWithModernActionList'
 import {useFeatureFlag} from '../FeatureFlags'
 
-export function FilteredActionList(props: FilteredActionListProps): JSX.Element {
+export function FilteredActionList({onListContainerRefChanged, ...props}: FilteredActionListProps) {
   const enabled = useFeatureFlag('primer_react_select_panel_with_modern_action_list')
 
   if (enabled) return <WithStableActionList {...props} />
-  else return <WithDeprecatedActionList {...props} />
+  else return <WithDeprecatedActionList onListContainerRefChanged={onListContainerRefChanged} {...props} />
 }
 
 FilteredActionList.displayName = 'FilteredActionList'

.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-high-contrast-modern-action-list--true-linux.png

@@ -1,6 +1,3 @@
-import type {ScrollIntoViewOptions} from '@primer/behaviors'
-import {scrollIntoView, FocusKeys} from '@primer/behaviors'
-import type {KeyboardEventHandler} from 'react'
 import React, {useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
 import Box from '../Box'
@@ -9,7 +6,6 @@ import TextInput from '../TextInput'
 import {get} from '../constants'
 import {ActionList} from '../ActionList'
 import type {GroupedListProps, ListPropsBase, ItemInput} from '../SelectPanel/types'
-import {useFocusZone} from '../hooks/useFocusZone'
 import {useId} from '../hooks/useId'
 import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate'
 import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
@@ -18,13 +14,12 @@ import {VisuallyHidden} from '../VisuallyHidden'
 import type {SxProp} from '../sx'
 import type {FilteredActionListLoadingType} from './FilteredActionListLoaders'
 import {FilteredActionListLoadingTypes, FilteredActionListBodyLoader} from './FilteredActionListLoaders'
+import {ActionListContainerContext} from '../ActionList/ActionListContainerContext'
 
 import {isValidElementType} from 'react-is'
 import type {RenderItemFn} from '../deprecated/ActionList/List'
 import {useAnnouncements} from './useAnnouncements'
 
-const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
-
 export interface FilteredActionListProps
   extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>,
     ListPropsBase,
@@ -34,7 +29,6 @@ export interface FilteredActionListProps
   placeholderText?: string
   filterValue?: string
   onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void
-  onListContainerRefChanged?: (ref: HTMLElement | null) => void
   onInputRefChanged?: (ref: React.RefObject<HTMLInputElement>) => void
   textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
   inputRef?: React.RefObject<HTMLInputElement>
@@ -53,7 +47,6 @@ export function FilteredActionList({
   filterValue: externalFilterValue,
   loadingType = FilteredActionListLoadingTypes.bodySpinner,
   onFilterChange,
-  onListContainerRefChanged,
   onInputRefChanged,
   items,
   textInputProps,
@@ -62,10 +55,14 @@ export function FilteredActionList({
   groupMetadata,
   showItemDividers,
   className,
+  selectionVariant,
   announcementsEnabled = true,
   ...listProps
 }: FilteredActionListProps): JSX.Element {
   const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '')
+  const [enableAnnouncements, setEnableAnnouncements] = useState(false)
+  const [selectedItems, setSelectedItems] = useState<(string | number | undefined)[]>([])
+
   const onInputChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const value = e.target.value
@@ -77,70 +74,69 @@ export function FilteredActionList({
 
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const inputRef = useProvidedRefOrCreate<HTMLInputElement>(providedInputRef)
-  const [listContainerElement, setListContainerElement] = useState<HTMLUListElement | null>(null)
-  const activeDescendantRef = useRef<HTMLElement>()
+  const listRef = useRef<HTMLUListElement>(null)
   const listId = useId()
   const inputDescriptionTextId = useId()
-  const onInputKeyPress: KeyboardEventHandler = useCallback(
-    event => {
-      if (event.key === 'Enter' && activeDescendantRef.current) {
-        event.preventDefault()
-        event.nativeEvent.stopImmediatePropagation()
 
-        // Forward Enter key press to active descendant so that item gets activated
-        const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent)
-        activeDescendantRef.current.dispatchEvent(activeDescendantEvent)
-      }
-    },
-    [activeDescendantRef],
-  )
+  const keydownListener = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowDown') {
+        if (listRef.current) {
+          const firstSelectedItem = listRef.current.querySelector('[role="option"]') as HTMLElement | undefined
+          firstSelectedItem?.focus()
 
-  const listContainerRefCallback = useCallback(
-    (node: HTMLUListElement | null) => {
-      setListContainerElement(node)
-      onListContainerRefChanged?.(node)
+          event.preventDefault()
+        }
+      } else if (event.key === 'Enter') {
+        let firstItem
+        // If there are groups, it's not guaranteed that the first item is the actual first item in the first -
+        // as groups are rendered in the order of the groupId provided
+        if (groupMetadata) {
+          const firstGroup = groupMetadata[0].groupId
+          firstItem = items.filter(item => item.groupId === firstGroup)[0]
+        } else {
+          firstItem = items[0]
+        }
+
+        if (firstItem.onAction) {
+          firstItem.onAction(firstItem, event)
+          event.preventDefault()
+        }
+      }
     },
-    [onListContainerRefChanged],
+    [items, groupMetadata],
   )
 
   useEffect(() => {
     onInputRefChanged?.(inputRef)
   }, [inputRef, onInputRefChanged])
 
-  useFocusZone(
-    {
-      containerRef: {current: listContainerElement},
-      bindKeys: FocusKeys.ArrowVertical | FocusKeys.PageUpDown,
-      focusOutBehavior: 'wrap',
-      focusableElementFilter: element => {
-        return !(element instanceof HTMLInputElement)
-      },
-      activeDescendantFocus: inputRef,
-      onActiveDescendantChanged: (current, previous, directlyActivated) => {
-        activeDescendantRef.current = current
+  useEffect(() => {
+    if (items.length === 0) {
+      inputRef.current?.focus()
+    } else {
+      const itemIds = items.filter(item => item.selected).map(item => item.id)
+      const removedItem = selectedItems.find(item => !itemIds.includes(item))
 
-        if (current && scrollContainerRef.current && directlyActivated) {
-          scrollIntoView(current, scrollContainerRef.current, menuScrollMargins)
+      if (removedItem && document.activeElement !== inputRef.current) {
+        const list = listRef.current
+        if (list) {
+          const firstSelectedItem = list.querySelector('[role="option"]') as HTMLElement
+          firstSelectedItem.focus()
         }
-      },
-    },
-    [
-      // List container isn't in the DOM while loading.  Need to re-bind focus zone when it changes.
-      listContainerElement,
-    ],
-  )
+      }
+    }
+  }, [items, inputRef, selectedItems])
 
   useEffect(() => {
-    // if items changed, we want to instantly move active descendant into view
-    if (activeDescendantRef.current && scrollContainerRef.current) {
-      scrollIntoView(activeDescendantRef.current, scrollContainerRef.current, {
-        ...menuScrollMargins,
-        behavior: 'auto',
-      })
-    }
+    const selectedItemIds = items.filter(item => item.selected).map(item => item.id)
+    setSelectedItems(selectedItemIds)
   }, [items])
 
-  useAnnouncements(items, {current: listContainerElement}, inputRef, announcementsEnabled)
+  useEffect(() => {
+    setEnableAnnouncements(announcementsEnabled)
+  }, [announcementsEnabled])
+
   useScrollFlash(scrollContainerRef)
 
   function getItemListForEachGroup(groupId: string) {
@@ -154,6 +150,8 @@ export function FilteredActionList({
     return itemsInGroup
   }
 
+  useAnnouncements(items, listRef, inputRef, enableAnnouncements)
+
   return (
     <Box
       display="flex"
@@ -171,7 +169,7 @@ export function FilteredActionList({
           color="fg.default"
           value={filterValue}
           onChange={onInputChange}
-          onKeyPress={onInputKeyPress}
+          onKeyDown={keydownListener}
           placeholder={placeholderText}
           role="combobox"
           aria-expanded="true"
@@ -189,33 +187,36 @@ export function FilteredActionList({
         {loading && scrollContainerRef.current && loadingType.appearsInBody ? (
           <FilteredActionListBodyLoader loadingType={loadingType} height={scrollContainerRef.current.clientHeight} />
         ) : (
-          <ActionList
-            ref={listContainerRefCallback}
-            showDividers={showItemDividers}
-            {...listProps}
-            role="listbox"
-            id={listId}
-            sx={{flexGrow: 1}}
+          <ActionListContainerContext.Provider
+            value={{
+              container: 'FilteredActionList',
+              listRole: 'listbox',
+              selectionAttribute: 'aria-selected',
+              selectionVariant,
+              enableFocusZone: true,
+            }}
           >
-            {groupMetadata?.length
-              ? groupMetadata.map((group, index) => {
-                  return (
-                    <ActionList.Group key={index}>
-                      <ActionList.GroupHeading variant={group.header?.variant ? group.header.variant : undefined}>
-                        {group.header?.title ? group.header.title : `Group ${group.groupId}`}
-                      </ActionList.GroupHeading>
-                      {getItemListForEachGroup(group.groupId).map((item, index) => {
-                        const key = item.key ?? item.id?.toString() ?? index.toString()
-                        return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
-                      })}
-                    </ActionList.Group>
-                  )
-                })
-              : items.map((item, index) => {
-                  const key = item.key ?? item.id?.toString() ?? index.toString()
-                  return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
-                })}
-          </ActionList>
+            <ActionList ref={listRef} showDividers={showItemDividers} {...listProps} id={listId} sx={{flexGrow: 1}}>
+              {groupMetadata?.length
+                ? groupMetadata.map((group, index) => {
+                    return (
+                      <ActionList.Group key={index}>
+                        <ActionList.GroupHeading variant={group.header?.variant ? group.header.variant : undefined}>
+                          {group.header?.title ? group.header.title : `Group ${group.groupId}`}
+                        </ActionList.GroupHeading>
+                        {getItemListForEachGroup(group.groupId).map((item, index) => {
+                          const key = item.key ?? item.id?.toString() ?? index.toString()
+                          return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
+                        })}
+                      </ActionList.Group>
+                    )
+                  })
+                : items.map((item, index) => {
+                    const key = item.key ?? item.id?.toString() ?? index.toString()
+                    return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
+                  })}
+            </ActionList>
+          </ActionListContainerContext.Provider>
         )}
       </Box>
     </Box>