Add support to `ActionList` and `ActionList.Item` for `tablist` and `tab` roles #7109

adierkens · 2025-10-30T20:37:57Z

This change stems from an effort to create a vertical version of UnderlinePanels leveraging an ActionList. The semantic checks in ActionList prevented the role from showing on the right item.

Changelog

Changed

Updates the handling for checking list semantics of ActionList to include tablist and tab items in order to work with the tab-container element.

Rollout strategy

Patch release

Testing & Reviewing

Check for ActionList selection bugs.

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-10-30T20:38:01Z

🦋 Changeset detected

Latest commit: 011da96

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

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Minor
@primer/styled-react	Major

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-10-30T20:38:35Z

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

adierkens · 2025-10-30T20:38:56Z

packages/react/src/ActionList/Item.tsx

  // Ensures ActionList.Item retains list item semantics if a valid ARIA role is applied, or if item is inactive
  const listItemSemantics =
-    role === 'option' || role === 'menuitem' || role === 'menuitemradio' || role === 'menuitemcheckbox'
+    itemRole === 'option' ||


This just seemed like a bug. We weren't using the inferredItemRole when checking if the item is a list item

packages/react/src/ActionList/ActionList.module.css

adierkens · 2025-10-31T13:49:52Z

packages/react/src/ActionList/Item.tsx

    disabled = false,
    inactiveText,
    selected = undefined,
    active = false,


We may want to also derive this based on the aria-attributes (i.e. active if aria-selected == true)

adierkens · 2025-10-31T14:00:51Z

packages/react/src/ActionList/Item.tsx

        ref={listSemantics ? forwardedRef : null}
        data-variant={variant === 'danger' ? variant : undefined}
        data-active={active ? true : undefined}
+        data-selectable={includeSelectionAttribute ? true : undefined}


Using this to limit the new CSS selector. Could also gate this behavior behind a FF or prop to limit exposure if needed.

primer-integration · 2025-11-03T16:44:46Z

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

primer-integration · 2025-11-03T17:06:06Z

🟢 ci completed with status success.

Copilot

Pull Request Overview

This PR adds support for ARIA tablist and tab roles to the ActionList component, enabling it to be used for tab navigation patterns.

Key changes:

Adds automatic tab role inference when ActionList has role="tablist"
Updates list item semantics to preserve proper structure for tab roles
Adds unit tests to verify tab role behavior

Reviewed Changes

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

File	Description
packages/react/src/ActionList/Item.tsx	Adds logic to infer `tab` role for items within tablists and includes tab role in listItemSemantics check
packages/react/src/ActionList/Item.test.tsx	Adds two unit tests verifying tab role is correctly applied
.changeset/early-ghosts-enter.md	Changelog entry documenting the new feature

Comments suppressed due to low confidence (2)

packages/react/src/ActionList/Item.tsx:142

The tab role requires aria-selected attribute for proper ARIA semantics. When itemRole === 'tab', the code should set inferredSelectionAttribute = 'aria-selected'. This is consistent with other tab implementations in the codebase (TabNav and UnderlinePanels) which use aria-selected with tab roles.

  /** Infer the proper selection attribute based on the item's role */
  let inferredSelectionAttribute: 'aria-selected' | 'aria-checked' | undefined
  if (itemRole === 'menuitemradio' || itemRole === 'menuitemcheckbox') inferredSelectionAttribute = 'aria-checked'
  else if (itemRole === 'option') inferredSelectionAttribute = 'aria-selected'

packages/react/src/ActionList/Item.tsx:194

The selectableRoles array should include 'tab' to ensure that tab elements receive the appropriate selection attributes. Tabs need aria-selected to indicate which tab is currently active, as seen in TabNav and UnderlinePanels implementations.

  const selectableRoles = ['menuitemradio', 'menuitemcheckbox', 'option']
  const includeSelectionAttribute = itemSelectionAttribute && itemRole && selectableRoles.includes(itemRole)

joshblack

Oh boy, more action list roles 😰 Changes look great so if it works for you then 👍 Makes sense to extend this if we're doing it already for listbox/menu.

.changeset/early-ghosts-enter.md

Co-authored-by: Josh Black <joshblack@github.com>

github-actions · 2025-11-03T19:57:08Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

adierkens added 2 commits October 30, 2025 20:29

Update ActionList to work with tablist & tab roles

4e1a797

Add tests

bef3a24

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 30, 2025

adierkens commented Oct 30, 2025

View reviewed changes

adierkens deployed to github-pages October 30, 2025 20:47 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7109 October 30, 2025 20:47 Inactive

limit style changes to only non-selectable elements

1f56765

adierkens deployed to github-pages October 30, 2025 22:51 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7109 October 30, 2025 22:51 Inactive

Merge branch 'main' into adierkens/action-list-tab-roles

bfd689e

adierkens deployed to github-pages October 31, 2025 01:29 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7109 October 31, 2025 01:29 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 Oct 31, 2025

adierkens commented Oct 31, 2025

View reviewed changes

Merge branch 'main' into adierkens/action-list-tab-roles

239c3c0

adierkens deployed to github-pages October 31, 2025 14:13 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7109 October 31, 2025 14:13 Inactive

adierkens added 2 commits November 3, 2025 15:51

make PR minimal

3297ba6

Minimal changes

0314874

adierkens added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Nov 3, 2025

github-actions bot temporarily deployed to storybook-preview-7109 November 3, 2025 16:01 Inactive

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Nov 3, 2025

adierkens deployed to github-pages November 3, 2025 16:09 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7109 November 3, 2025 16:10 Inactive

Merge branch 'main' into adierkens/action-list-tab-roles

9dd81ff

adierkens deployed to github-pages November 3, 2025 16:34 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7109 November 3, 2025 16:35 Inactive

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 Nov 3, 2025

adierkens marked this pull request as ready for review November 3, 2025 17:09

adierkens requested a review from a team as a code owner November 3, 2025 17:09

adierkens requested review from Copilot and joshblack November 3, 2025 17:09

Copilot AI reviewed Nov 3, 2025

View reviewed changes

joshblack approved these changes Nov 3, 2025

View reviewed changes

.changeset/early-ghosts-enter.md Outdated Show resolved Hide resolved

Update .changeset/early-ghosts-enter.md

011da96

Co-authored-by: Josh Black <joshblack@github.com>

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Nov 3, 2025

adierkens deployed to github-pages November 3, 2025 20:06 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-7109 November 3, 2025 20:06 View deployment

adierkens added this pull request to the merge queue Nov 3, 2025

Merged via the queue into main with commit 34e7108 Nov 3, 2025
44 of 47 checks passed

adierkens deleted the adierkens/action-list-tab-roles branch November 3, 2025 21:01

primer bot mentioned this pull request Nov 3, 2025

Release tracking (38.1.0) #7096

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add support to `ActionList` and `ActionList.Item` for `tablist` and `tab` roles #7109

Add support to `ActionList` and `ActionList.Item` for `tablist` and `tab` roles #7109

adierkens commented Oct 30, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Oct 30, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 30, 2025

Uh oh!

adierkens Oct 30, 2025

Uh oh!

Uh oh!

adierkens Oct 31, 2025

Uh oh!

adierkens Oct 31, 2025

Uh oh!

primer-integration bot commented Nov 3, 2025

Uh oh!

primer-integration bot commented Nov 3, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

joshblack left a comment

Uh oh!

Uh oh!

github-actions bot commented Nov 3, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Add support to ActionList and ActionList.Item for tablist and tab roles #7109

Add support to ActionList and ActionList.Item for tablist and tab roles #7109

Conversation

adierkens commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Oct 30, 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 Oct 30, 2025

Uh oh!

adierkens Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

adierkens Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

adierkens Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

primer-integration bot commented Nov 3, 2025

Uh oh!

primer-integration bot commented Nov 3, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

joshblack left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Nov 3, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Add support to `ActionList` and `ActionList.Item` for `tablist` and `tab` roles #7109

Add support to `ActionList` and `ActionList.Item` for `tablist` and `tab` roles #7109

adierkens commented Oct 30, 2025 •

edited

Loading

changeset-bot bot commented Oct 30, 2025 •

edited

Loading