Add support for aria-label on ActionList.Group #6054
Conversation
🦋 Changeset detectedLatest commit: 0376fcf The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
|
👋 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! |
size-limit report 📦
|
There was a problem hiding this comment.
Pull Request Overview
Adds a new aria-label prop to ActionList.Group and ensures it’s forwarded to the underlying <ul> element, with a fallback to the existing title-based label when no explicit aria-label is provided.
- Introduces
aria-labelin the component’s type and destructuring. - Updates the
<ul>rendering to preferaria-labelover the default title fallback. - Adds a unit test, Storybook argType, and Changeset entry.
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/react/src/ActionList/Group.tsx | Added aria-label prop type, destructuring, and updated <ul> |
| packages/react/src/ActionList/Group.test.tsx | New test verifying aria-label on the <ul> |
| packages/react/src/ActionList/ActionList.stories.tsx | Added aria-label argType for the Group Playground |
| .changeset/funny-pans-sneeze.md | Changeset entry for the patch release |
Comments suppressed due to low confidence (1)
packages/react/src/ActionList/Group.tsx:139
- Consider adding a unit test to cover the scenario where both
aria-labelandtitleare provided, ensuring thataria-labeltakes precedence over the default title-based label.
aria-label={ariaLabel ?? (listRole ? (title ?? (slots.groupHeading?.props.children as string)) : undefined)}
| @@ -289,6 +289,9 @@ GroupPlayground.argTypes = { | |||
| title: { | |||
| type: 'string', | |||
| }, | |||
| 'aria-label': { | |||
There was a problem hiding this comment.
[nitpick] The new aria-label prop should be documented in the component's API docs and Storybook examples; consider adding a usage example or PropTable entry to showcase its effect on ActionList.Group.
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
Up to you on adding this to the docs or not. Since this was possible before (though incorrectly placed on the li), I think there isn't a hard requirement to have it in the docs. If we do want to suggest usage of aria-label on groups, then we could.
|
👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/378508 |
|
🔴 golden-jobs completed with status |
Doesn't look related to this PR. Should be good to go! |
Relates to: https://github.com/github/github/pull/378062/files
Fixes: https://github.com/github/primer/issues/5202
Changelog
New
aria-labelattribute is now forwarded to the<ul>element when it's set, rather than the<li>element.Rollout strategy
Testing & Reviewing
Merge checklist