Skip to content

[toggle-group] Remove invalid aria-orientation from role="group" element#4628

Open
sernstberger wants to merge 1 commit intomui:masterfrom
sernstberger:fix/toggle-group-aria-orientation
Open

[toggle-group] Remove invalid aria-orientation from role="group" element#4628
sernstberger wants to merge 1 commit intomui:masterfrom
sernstberger:fix/toggle-group-aria-orientation

Conversation

@sernstberger
Copy link
Copy Markdown

Summary

ToggleGroup renders role="group" but was also rendering aria-orientation, which is not a valid ARIA attribute for the group role (WAI-ARIA spec). This was flagged by axe's aria-allowed-attr rule.

The aria-orientation attribute was being added by useCompositeRoot (which always includes it in its returned props). This was introduced in #4487 when keyboard navigation was added via CompositeRoot.

Fix

Strip aria-orientation from the DOM output by adding { 'aria-orientation': undefined } to the CompositeRoot props array. This follows the same pattern used by NavigationMenuList and SelectPopup in the codebase.

The orientation prop still reaches CompositeRoot for keyboard navigation — it just won't appear as an ARIA attribute on the rendered element.

Test

Added a test asserting that aria-orientation is not present on the role="group" element.

Closes #4623
Related: #4487

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Apr 16, 2026

commit: 393d10c

@code-infra-dashboard
Copy link
Copy Markdown

code-infra-dashboard Bot commented Apr 16, 2026

Bundle size

Bundle Parsed size Gzip size
@base-ui/react 🔺+28B(+0.01%) 🔺+7B(0.00%)

Details of bundle changes

Performance

Total duration: 1,316.22 ms 🔺+63.31 ms(+5.1%) | Renders: 53 (+0) | Paint: 2,070.44 ms 🔺+116.04 ms(+5.9%)

Test Duration Renders
Menu open (500 items) 79.72 ms 🔺+12.89 ms(+19.3%) 12 (+0)
Mixed surface mount (app-like density) 105.26 ms 🔺+14.00 ms(+15.3%) 5 (+0)
Select mount (200 instances) 157.70 ms 🔺+20.01 ms(+14.5%) 3 (+0)
Select open (500 options) 49.23 ms 🔺+5.56 ms(+12.7%) 14 (+0)
Menu mount (300 instances) 147.11 ms 🔺+16.55 ms(+12.7%) 2 (+0)

...and 7 more. View full report

Details of benchmark changes


Check out the code infra dashboard for more information about this PR.

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 16, 2026

Deploy Preview for base-ui ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 393d10c
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/69e0ea834d521700084e7ddd
😎 Deploy Preview https://deploy-preview-4628--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@zannager zannager added the component: toggle group Changes related to the toggle group component. label Apr 16, 2026
state={state}
refs={[forwardedRef]}
props={[defaultProps, elementProps]}
props={[defaultProps, { 'aria-orientation': undefined }, elementProps]}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SelectPopup and NavigationMenuList are already overwriting aria-orientation like this, perhaps it should be moved out of Composite and its consumers should be required to set aria-orientation themselves accordingly

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: toggle group Changes related to the toggle group component.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[ToggleGroup] aria-orientation not allowed on role=group element

3 participants