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

francinelucca · 2025-07-16T22:18:24Z

Closes https://github.com/github/primer/issues/5303

Changelog

Remove active descendant behaviour
Add roving tab index
Add active descendant through separate indicator
Remove focus indicator announcements
Fix no items announcement

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2025-07-16T22:18:28Z

🦋 Changeset detected

Latest commit: dd82743

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-07-16T22:18:49Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2025-07-16T22:22:21Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	89.99 KB (+0.46% 🔺)
packages/react/dist/browser.umd.js	90.24 KB (+0.76% 🔺)

Copilot

Pull Request Overview

This PR removes the aria-activedescendant accessibility pattern from SelectPanel and replaces it with a roving tabindex approach to improve accessibility. The changes only affect SelectPanel when the primer_react_select_panel_with_modern_action_list feature flag is enabled.

Key changes:

Replace aria-activedescendant focus management with roving tabindex behavior
Simplify announcement logic since roving tabindex provides automatic focus announcements
Update keyboard navigation to directly focus list items instead of using virtual focus

Reviewed Changes

Copilot reviewed 10 out of 11 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/react/src/SelectPanel/SelectPanel.tsx	Fix logical operator and add item IDs for accessibility
packages/react/src/SelectPanel/SelectPanel.test.tsx	Update tests to verify roving tabindex behavior and different announcement patterns
packages/react/src/FilteredActionList/useAnnouncements.tsx	Simplify announcements for item count instead of active descendant tracking
packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx	Implement roving tabindex with focus management and active indicator styling
packages/react/src/FilteredActionList/FilteredActionListEntry.tsx	Remove unused onListContainerRefChanged prop from modern implementation
packages/react/src/FilteredActionList/FilteredActionList.module.css	Add CSS for active item indicator
packages/react/src/ActionList/List.tsx	Enable focus wrapping for FilteredActionList container
packages/react/src/ActionList/Item.tsx	Add FilteredActionList to menu context and option role inference
packages/react/src/ActionList/ActionListContainerContext.tsx	Add radio selection variant type
packages/react/.changeset/four-cars-attend.md	Document the breaking change for SelectPanel accessibility

Comments suppressed due to low confidence (1)

packages/react/src/SelectPanel/SelectPanel.test.tsx:300

This test case for keyboard navigation is incomplete - it only checks that the combobox has focus after clicking, but doesn't actually test arrow key navigation as the name suggests.

        it('should support navigating through items with ArrowUp and ArrowDown', async () => {

Copilot · 2025-07-23T13:39:27Z

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -350,7 +349,7 @@ function Panel({
    if (open) {
      if (items.length === 0 && !(isLoading || loading)) {
        // we need to wait for the listContainerElement to disappear before announcing no items, otherwise it will be interrupted
-        if (!listContainerElement || !usingModernActionList) {
+        if (!listContainerElement && !usingModernActionList) {


The logical operator change from || to && appears to be a bug fix, but this changes the condition semantics significantly. The original condition !listContainerElement || !usingModernActionList would announce when either condition was true, but the new condition !listContainerElement && !usingModernActionList only announces when both conditions are true. This could prevent announcements in valid scenarios.

Suggested change

if (!listContainerElement && !usingModernActionList) {

if (!listContainerElement || !usingModernActionList) {

Copilot · 2025-07-23T13:39:28Z

packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx

@@ -85,10 +79,12 @@ export function FilteredActionList({
    [onFilterChange, setInternalFilterValue],
  )

+  const [enableAnnouncements, setEnableAnnouncements] = useState(false)
+  const [selectedItems] = useState<(string | number | undefined)[]>([])


The selectedItems state is initialized as an empty array and never updated, making it effectively unused. This variable should either be removed or properly maintained to track selected items.

francinelucca

Visuals look good! have some change requests and questions

.changeset/poor-laws-hope.md

packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx

packages/react/src/FilteredActionList/useAnnouncements.tsx

…b.com:primer/react into recreate-pr-5801-remove-aria-activedescendant

primer-integration · 2025-07-31T23:24:23Z

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/394030

primer-integration · 2025-08-01T00:17:05Z

🟢 golden-jobs completed with status success.

github-actions bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Jul 16, 2025

francinelucca deployed to github-pages July 16, 2025 22:27 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6330 July 16, 2025 22:27 Inactive

pksjce deployed to github-pages July 21, 2025 23:56 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6330 July 21, 2025 23:56 Inactive

pksjce changed the title ~~Reacreare PR-5801 to remove aria activedescendant and add a roving ta…~~ Recreate PR-5801 to remove aria activedescendant and add a roving tab index Jul 22, 2025

pksjce force-pushed the recreate-pr-5801-remove-aria-activedescendant branch from e01ad94 to 5b99a1d Compare July 22, 2025 01:51

pksjce deployed to github-pages July 22, 2025 02:00 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6330 July 22, 2025 02:00 Inactive

pksjce deployed to github-pages July 22, 2025 02:11 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6330 July 22, 2025 02:12 Inactive

pksjce deployed to github-pages July 22, 2025 05:18 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6330 July 22, 2025 05:19 Inactive

pksjce force-pushed the recreate-pr-5801-remove-aria-activedescendant branch from 54538c5 to 847426e Compare July 23, 2025 13:38

pksjce marked this pull request as ready for review July 23, 2025 13:38

Copilot AI review requested due to automatic review settings July 23, 2025 13:38

pksjce requested review from a team as code owners July 23, 2025 13:38

pksjce requested a review from langermank July 23, 2025 13:38

Copilot AI reviewed Jul 23, 2025

View reviewed changes

github-actions bot requested a deployment to storybook-preview-6330 July 23, 2025 13:43 Abandoned

pksjce had a problem deploying to github-pages July 23, 2025 13:47 — with GitHub Actions Failure

github-actions bot requested a deployment to storybook-preview-6330 July 23, 2025 13:47 Abandoned

francinelucca commented Jul 25, 2025

View reviewed changes

.changeset/poor-laws-hope.md Outdated Show resolved Hide resolved

packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx Outdated Show resolved Hide resolved

packages/react/src/FilteredActionList/useAnnouncements.tsx Outdated Show resolved Hide resolved

francinelucca requested a review from TylerJDev July 25, 2025 02:29

pksjce reviewed Jul 25, 2025

View reviewed changes

packages/react/src/FilteredActionList/useAnnouncements.tsx Outdated Show resolved Hide resolved

TylerJDev approved these changes Jul 31, 2025

View reviewed changes

re-add useScrollFlash

41472fc

francinelucca deployed to github-pages July 31, 2025 15:28 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6330 July 31, 2025 15:29 Inactive

Merge branch 'main' into recreate-pr-5801-remove-aria-activedescendant

b55977a

francinelucca deployed to github-pages July 31, 2025 20:58 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6330 July 31, 2025 20:59 Inactive

francinelucca added 3 commits July 31, 2025 17:08

re-add changes

ccfdcce

Merge branch 'recreate-pr-5801-remove-aria-activedescendant' of githu…

dc4ccfe

…b.com:primer/react into recreate-pr-5801-remove-aria-activedescendant

fix test

0fbf871

github-actions bot temporarily deployed to storybook-preview-6330 July 31, 2025 21:18 Inactive

francinelucca deployed to github-pages July 31, 2025 21:27 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6330 July 31, 2025 21:27 Inactive

francinelucca deployed to github-pages July 31, 2025 21:42 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6330 July 31, 2025 21:43 Inactive

loading fix

4271f2f

francinelucca deployed to github-pages July 31, 2025 22:53 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6330 July 31, 2025 22:53 Inactive

add usingRemoveActiveDescendant conditional

dd82743

francinelucca deployed to github-pages July 31, 2025 23:27 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6330 July 31, 2025 23:27 View deployment

github-actions bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels Aug 1, 2025

francinelucca added this pull request to the merge queue Aug 1, 2025

Merged via the queue into main with commit fbdcac4 Aug 1, 2025
43 checks passed

francinelucca deleted the recreate-pr-5801-remove-aria-activedescendant branch August 1, 2025 00:30

primer bot mentioned this pull request Jul 31, 2025

Release tracking #6418

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

francinelucca commented Jul 16, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Jul 16, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 16, 2025

Uh oh!

github-actions bot commented Jul 16, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jul 23, 2025

Uh oh!

Copilot AI Jul 23, 2025

Uh oh!

francinelucca left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

primer-integration bot commented Jul 31, 2025

Uh oh!

primer-integration bot commented Aug 1, 2025

Uh oh!

Uh oh!

Uh oh!

	if (!listContainerElement && !usingModernActionList) {
	if (!listContainerElement \|\| !usingModernActionList) {

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

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

Uh oh!

Conversation

francinelucca commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Jul 16, 2025

Uh oh!

github-actions bot commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

francinelucca left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

primer-integration bot commented Jul 31, 2025

Uh oh!

primer-integration bot commented Aug 1, 2025

Uh oh!

Uh oh!

Uh oh!

francinelucca commented Jul 16, 2025 •

edited

Loading

changeset-bot bot commented Jul 16, 2025 •

edited

Loading

github-actions bot commented Jul 16, 2025 •

edited

Loading