Skip to content

Commit fbdcac4

Browse files
Feat(SelectPanel) remove aria active-descendant pattern in favor of roving tab index under FF (#6330)
Co-authored-by: Pavithra Kodmad <[email protected]>
1 parent b5c189f commit fbdcac4

File tree

11 files changed

+1452
-1176
lines changed

11 files changed

+1452
-1176
lines changed

.changeset/pink-worms-kneel.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": patch
3+
---
4+
5+
feat(SelectPanel): remove aria activedescendant and add a roving tab index

packages/react/src/ActionList/ActionListContainerContext.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type {AriaRole} from '../utils/types'
66
type ContextProps = {
77
container?: string
88
listRole?: AriaRole
9-
selectionVariant?: 'single' | 'multiple'
9+
selectionVariant?: 'single' | 'multiple' | 'radio'
1010
selectionAttribute?: 'aria-selected' | 'aria-checked'
1111
listLabelledBy?: string
1212
// This can be any function, we don't know anything about the arguments

packages/react/src/ActionList/Item.tsx

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

packages/react/src/ActionList/List.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
2828
listLabelledBy,
2929
selectionVariant: containerSelectionVariant, // TODO: Remove after DropdownMenu2 deprecation
3030
enableFocusZone: enableFocusZoneFromContainer,
31+
container,
3132
} = React.useContext(ActionListContainerContext)
3233

3334
const ariaLabelledBy = slots.heading ? (slots.heading.props.id ?? headingId) : listLabelledBy
@@ -42,7 +43,8 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
4243
disabled: !enableFocusZone,
4344
containerRef: listRef,
4445
bindKeys: FocusKeys.ArrowVertical | FocusKeys.HomeAndEnd | FocusKeys.PageUpDown,
45-
focusOutBehavior: listRole === 'menu' ? 'wrap' : undefined,
46+
focusOutBehavior:
47+
listRole === 'menu' || container === 'SelectPanel' || container === 'FilteredActionList' ? 'wrap' : undefined,
4648
})
4749

4850
return (

packages/react/src/ActionList/Selection.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({se
3232
return (
3333
<VisualContainer className={className} data-component="ActionList.Selection">
3434
{/* This is just a way to get the visuals from Radio, but it should be ignored in terms of accessibility */}
35-
<Radio value="unused" checked={selected} aria-hidden tabIndex={-1} />
35+
<Radio value="unused" checked={selected} aria-hidden tabIndex={-1} hidden />
3636
</VisualContainer>
3737
)
3838
}

packages/react/src/FeatureFlags/DefaultFeatureFlags.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({
66
primer_react_segmented_control_tooltip: false,
77
primer_react_select_panel_fullscreen_on_narrow: false,
88
primer_react_select_panel_order_selected_at_top: false,
9+
primer_react_select_panel_remove_active_descendant: false,
910
})

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,22 @@
55
flex-grow: 1;
66
}
77

8+
.ActionListItem:focus {
9+
background: var(--control-transparent-bgColor-selected);
10+
11+
&::after {
12+
@mixin activeIndicatorLine;
13+
}
14+
}
15+
16+
.ActionListItem:where([data-input-focused]):where([data-first-child]) {
17+
background: var(--control-transparent-bgColor-selected);
18+
19+
&::after {
20+
@mixin activeIndicatorLine;
21+
}
22+
}
23+
824
.FullScreenTextInput {
925
@media screen and (--viewportRange-narrow) {
1026
/* Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad */

0 commit comments

Comments
 (0)