ActionList: Add new prop disableFocusZone (#6116)

Author: TylerJDev

.changeset/clever-pans-tap.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+ActionList: Add new prop `disableFocusZone` to disable the default focus zone provided

packages/react/src/ActionList/ActionList.test.tsx

@@ -149,4 +149,29 @@ describe('ActionList', () => {
     expect(container.querySelector('.leading')).toBeInTheDocument()
     expect(container.querySelector('.description')).toBeInTheDocument()
   })
+
+  it('should not be navigatable with arrow keys if `disableFocusZone` is true', async () => {
+    const {container} = HTMLRender(
+      <ActionList role="listbox" aria-label="Select a project" disableFocusZone={true}>
+        <ActionList.Item role="option">Option 1</ActionList.Item>
+        <ActionList.Item role="option">Option 2</ActionList.Item>
+        <ActionList.Item role="option" disabled>
+          Option 3
+        </ActionList.Item>
+        <ActionList.Item role="option">Option 4</ActionList.Item>
+        <ActionList.Item role="option" inactiveText="Unavailable due to an outage">
+          Option 5
+        </ActionList.Item>
+      </ActionList>,
+    )
+
+    await userEvent.tab() // tab into the story, this should focus on the first button
+    expect(document.activeElement).toHaveTextContent('Option 1')
+
+    await userEvent.keyboard('{ArrowDown}')
+    expect(document.activeElement).toHaveTextContent('Option 1')
+
+    expect(container.querySelector('li[aria-disabled="true"]')?.nextElementSibling).toHaveTextContent('Option 4')
+    expect(container.querySelector('li[aria-disabled="true"]')?.nextElementSibling).toHaveAttribute('tabindex', '0')
+  })
 })

packages/react/src/ActionList/List.tsx

@@ -14,7 +14,16 @@ import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
   (
-    {variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = defaultSxProp, className, ...props},
+    {
+      variant = 'inset',
+      selectionVariant,
+      showDividers = false,
+      role,
+      sx: sxProp = defaultSxProp,
+      disableFocusZone = false,
+      className,
+      ...props
+    },
     forwardedRef,
   ): JSX.Element => {
     const [slots, childrenWithoutSlots] = useSlots(props.children, {
@@ -37,7 +46,7 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
 
     let enableFocusZone = false
     if (enableFocusZoneFromContainer !== undefined) enableFocusZone = enableFocusZoneFromContainer
-    else if (listRole) enableFocusZone = ['menu', 'menubar', 'listbox'].includes(listRole)
+    else if (listRole && !disableFocusZone) enableFocusZone = ['menu', 'menubar', 'listbox'].includes(listRole)
 
     useFocusZone({
       disabled: !enableFocusZone,

packages/react/src/ActionList/shared.ts

@@ -136,6 +136,10 @@ export type ActionListProps = React.PropsWithChildren<{
    * The ARIA role describing the function of `List` component. `listbox` or `menu` are a common values.
    */
   role?: AriaRole
+  /**
+   * Disables the focus zone for the list if applicable. Focus zone is enabled by default for `menu` and `listbox` roles, or components such as `ActionMenu` and `SelectPanel`.
+   */
+  disableFocusZone?: boolean
   className?: string
 }> &
   SxProp