Feat(SelectPanel) remove aria active-descendant pattern in favor of roving tab index under FF (#6330)

Co-authored-by: Pavithra Kodmad <[email protected]>

Author: francinelucca

.changeset/pink-worms-kneel.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+feat(SelectPanel): remove aria activedescendant and add a roving tab index

packages/react/src/ActionList/ActionListContainerContext.tsx

@@ -6,7 +6,7 @@ import type {AriaRole} from '../utils/types'
 type ContextProps = {
   container?: string
   listRole?: AriaRole
-  selectionVariant?: 'single' | 'multiple'
+  selectionVariant?: 'single' | 'multiple' | 'radio'
   selectionAttribute?: 'aria-selected' | 'aria-checked'
   listLabelledBy?: string
   // This can be any function, we don't know anything about the arguments

packages/react/src/ActionList/Item.tsx

@@ -92,7 +92,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
     const inactive = Boolean(inactiveText)
     // TODO change `menuContext` check to ```listRole !== undefined && ['menu', 'listbox'].includes(listRole)```
     // once we have a better way to handle existing usage in dotcom that incorrectly use ActionList.TrailingAction
-    const menuContext = container === 'ActionMenu' || container === 'SelectPanel'
+    const menuContext = container === 'ActionMenu' || container === 'SelectPanel' || container === 'FilteredActionList'
     // TODO: when we change `menuContext` to check `listRole` instead of `container`
     const showInactiveIndicator = inactive && !(listRole !== undefined && ['menu', 'listbox'].includes(listRole))
 

packages/react/src/ActionList/List.tsx

@@ -28,6 +28,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
@@ -42,7 +43,8 @@ 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 === 'SelectPanel' || container === 'FilteredActionList' ? 'wrap' : undefined,
     })
 
     return (

packages/react/src/ActionList/Selection.tsx

@@ -32,7 +32,7 @@ export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({se
     return (
       <VisualContainer className={className} data-component="ActionList.Selection">
         {/* This is just a way to get the visuals from Radio, but it should be ignored in terms of accessibility */}
-        <Radio value="unused" checked={selected} aria-hidden tabIndex={-1} />
+        <Radio value="unused" checked={selected} aria-hidden tabIndex={-1} hidden />
       </VisualContainer>
     )
   }

packages/react/src/FeatureFlags/DefaultFeatureFlags.ts

@@ -6,4 +6,5 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({
   primer_react_segmented_control_tooltip: false,
   primer_react_select_panel_fullscreen_on_narrow: false,
   primer_react_select_panel_order_selected_at_top: false,
+  primer_react_select_panel_remove_active_descendant: false,
 })

packages/react/src/FilteredActionList/FilteredActionList.module.css

@@ -5,6 +5,22 @@
   flex-grow: 1;
 }
 
+.ActionListItem:focus {
+  background: var(--control-transparent-bgColor-selected);
+
+  &::after {
+    @mixin activeIndicatorLine;
+  }
+}
+
+.ActionListItem:where([data-input-focused]):where([data-first-child]) {
+  background: var(--control-transparent-bgColor-selected);
+
+  &::after {
+    @mixin activeIndicatorLine;
+  }
+}
+
 .FullScreenTextInput {
   @media screen and (--viewportRange-narrow) {
     /* Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad */