ActionList: Add `role="option"` if `role="listbox"` is present #6049

TylerJDev · 2025-05-15T00:34:09Z

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

Adds role="option" if role="listbox" is applied to ActionList. This stemmed from some instances of ActionList utilizing role="listbox" without adding role="option". This broke functionality, as usage of selectionVariant requires either aria-checked being present, or role="option".

Since we can infer what child roles should be based on the parent role, this PR adds role="option" if role="listbox" is present

Changelog

New

Adds role="option" if role="listbox" is present in ActionList

Changed

Allows ActionList.Item(s) to be focused even if inferredItemRole is present

Removed

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-05-15T00:34:13Z

🦋 Changeset detected

Latest commit: 7e4a18e

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-05-15T00:34:39Z

👋 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-05-15T00:37:24Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	96.19 KB (+0.05% 🔺)
packages/react/dist/browser.umd.js	96.51 KB (+0.03% 🔺)

primer-integration · 2025-05-15T19:22:52Z

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

primer-integration · 2025-05-15T19:44:42Z

🔴 golden-jobs completed with status failure.

Copilot

Pull Request Overview

Adds automatic role="option" for ActionList.Item when its parent ActionList is a listbox, and adjusts focus logic and tests accordingly.

Extends inferred item role logic to detect any listRole === 'listbox'.
Simplifies disabled/inactive focusable branch.
Updates tests and stories to validate and demonstrate the new behavior.

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/react/src/ActionList/Item.tsx	Simplify and extend role inference logic for `listbox` contexts
packages/react/src/ActionList/Item.test.tsx	Remove hardcoded `role="option"` and add assertion for inferred option roles
packages/react/src/ActionList/ActionList.test.tsx	Update disabled item focus expectation in keyboard navigation tests
packages/react/src/ActionList/ActionList.features.stories.tsx	Rename story, show explicit `role="option"` (to illustrate) under `listbox`
.changeset/soft-webs-study.md	Update changelog with new inference and focusable behavior

Comments suppressed due to low confidence (2)

packages/react/src/ActionList/ActionList.features.stories.tsx:332

[nitpick] The story name uses inconsistent casing for 'Listbox'. Consider renaming to ListBoxSingleSelect to match the established PascalCase convention (ListBoxMultiSelect).

export const ListboxSingleSelect = () => {

packages/react/src/ActionList/Item.test.tsx:425

Consider adding a corresponding test for the multiple selectionVariant="multiple" case to ensure role="option" is inferred correctly for multi-select listboxes.

it('should add `role="option"` if `role="listbox"` and `selectionVariant` is present', async () => {

Copilot · 2025-05-16T15:34:48Z

packages/react/src/ActionList/Item.tsx

      else inferredItemRole = 'menuitem'
-    } else if (container === 'SelectPanel' && listRole === 'listbox') {
-      if (selectionVariant !== undefined) inferredItemRole = 'option'
+    } else if ((container === 'SelectPanel' && listRole === 'listbox') || listRole === 'listbox') {


This conditional can be simplified to if (listRole === 'listbox'), since the extra SelectPanel check is redundant.

Suggested change

} else if ((container === 'SelectPanel' && listRole === 'listbox') || listRole === 'listbox') {

} else if (listRole === 'listbox') {

Copilot · 2025-05-16T15:34:48Z

packages/react/src/ActionList/ActionList.features.stories.tsx

+          aria-checked={selectedIndice === index}
+          onSelect={() => handleSelect(index)}
+          disabled={index === 3 ? true : undefined}
+          role="option"


[nitpick] Since role="option" is now inferred when ActionList has role="listbox", this explicit prop in the story is redundant and could be removed for clarity.

Suggested change

role="option"

Add role="option" if role="listbox" is applied to <ActionList>

2174651

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 May 15, 2025

TylerJDev deployed to github-pages May 15, 2025 00:48 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6049 May 15, 2025 00:48 Inactive

TylerJDev added 2 commits May 15, 2025 09:45

Fix test

5c96202

Add changeset

3254e55

TylerJDev deployed to github-pages May 15, 2025 14:01 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6049 May 15, 2025 14:01 Inactive

github-actions bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels May 15, 2025

This comment was marked as off-topic.

Sign in to view

TylerJDev marked this pull request as ready for review May 16, 2025 15:32

Copilot AI review requested due to automatic review settings May 16, 2025 15:32

TylerJDev requested a review from a team as a code owner May 16, 2025 15:32

TylerJDev requested a review from joshblack May 16, 2025 15:32

joshblack approved these changes May 16, 2025

View reviewed changes

Copilot AI reviewed May 16, 2025

View reviewed changes

Remove redundant check

7e4a18e

TylerJDev deployed to github-pages May 19, 2025 14:34 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6049 May 19, 2025 14:34 View deployment

TylerJDev added this pull request to the merge queue May 19, 2025

Merged via the queue into main with commit 776e05e May 19, 2025
35 checks passed

TylerJDev deleted the tylerjdev/add-implicit-role-for-listbox-action-list branch May 19, 2025 19:36

primer bot mentioned this pull request May 19, 2025

Release tracking (37.25.0) #6062

Merged

hectahertz pushed a commit that referenced this pull request May 20, 2025

ActionList: Add role="option" if role="listbox" is present (#6049)

776d414

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

ActionList: Add `role="option"` if `role="listbox"` is present #6049

ActionList: Add `role="option"` if `role="listbox"` is present #6049

Uh oh!

TylerJDev commented May 15, 2025

Uh oh!

changeset-bot bot commented May 15, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 15, 2025

Uh oh!

github-actions bot commented May 15, 2025 •

edited

Loading

Uh oh!

primer-integration bot commented May 15, 2025

Uh oh!

primer-integration bot commented May 15, 2025

Uh oh!

This comment was marked as off-topic.

Copilot AI left a comment

Uh oh!

Copilot AI May 16, 2025

Uh oh!

Copilot AI May 16, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	} else if ((container === 'SelectPanel' && listRole === 'listbox') \|\| listRole === 'listbox') {
	} else if (listRole === 'listbox') {

ActionList: Add role="option" if role="listbox" is present #6049

ActionList: Add role="option" if role="listbox" is present #6049

Uh oh!

Conversation

TylerJDev commented May 15, 2025

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented May 15, 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 May 15, 2025

Uh oh!

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

Uh oh!

size-limit report 📦

Uh oh!

primer-integration bot commented May 15, 2025

Uh oh!

primer-integration bot commented May 15, 2025

Uh oh!

This comment was marked as off-topic.

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI May 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 16, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ActionList: Add `role="option"` if `role="listbox"` is present #6049

ActionList: Add `role="option"` if `role="listbox"` is present #6049

changeset-bot bot commented May 15, 2025 •

edited

Loading

github-actions bot commented May 15, 2025 •

edited

Loading