Correct inactive ActionList.Item behavior in NavList and SelectPanel contexts

[mperrotti]

Note

The fix for SelectPanel will only be available with the "primer_react_select_panel_with_modern_action_list" feature flag. The deprecated ActionList did not support inactive items.

Helpful context

Slack thread that kicked this off
A11y Office Hours recording and recap
A11y Office Hours notes

Demo

Before

Kapture.2025-04-02.at.19.00.22.mp4

After

Kapture.2025-04-02.at.18.49.23.mp4

Changelog

New

Changed

• Instead of relying on parent component checks (e.g. “is this ActionList wrapped in an ActionMenu or SelectPanel?”) to decide between a tooltip or inline inactive message, we now check the role on ActionList.
  • If role is "menu" or "listbox", the inactive message is rendered inline (e.g. in ActionMenu or SelectPanel)
  • Otherwise, the message is shown in a tooltip
• This role-based logic fixes inactive NavList item behavior:
  • Now shows the message in a tooltip instead of inline
• This role-based logic fixes inactive SelectPanel item behavior:
  • Now shows the message inline instead of in a tooltip
  • Important note: Inactive text only works in SelectPanel items when using the modern ActionList. The deprecated ActionList does not support inactive items.
• Uses the same role-based logic to determine whether ActionList.TrailingAction is allowed inside an item
  • Previously, we relied on parent component checks to block nesting interactive elements
  • This change is unrelated to inactive states, but it's a more robust way to prevent interactive conflicts
• Updates aria-describedby and aria-labelledby associations for tooltip buttons on inactive items:
  • Before: aria-describedby → item label ("Item 1"), aria-labelledby → inactive message ("Unavailable due to an outage")
  • After: aria-labelledby → item label, aria-describedby → inactive message

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)
• [unsure] 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)

[github-actions]

👋 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]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	104.44 KB (+0.01% 🔺)
packages/react/dist/browser.umd.js	104.79 KB (+0.04% 🔺)

[changeset-bot]

🦋 Changeset detected

Latest commit: 075695f

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

[francinelucca]

✨

[primer-integration]

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

[primer-integration]

🔴 golden-jobs completed with status failure.

[langermank]

Nice! ✨

[mperrotti]

Failing integration should be fixed by https://github.com/github/github/pull/371483

[francinelucca]

Failing integration should be fixed by https://github.com/github/github/pull/371483

Nice! let's merge the fix in gh/gh before merging this pr as to not block main 🙏