-
Notifications
You must be signed in to change notification settings - Fork 22.8k
Remove Summary a11y warning #40165
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Remove Summary a11y warning #40165
Conversation
Preview URLs (comment last updated: 2025-07-23 15:31:49) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@leekeh Thanks a lot for following up on that earlier PR.
Indeed, it got merged without an update to the warning message.
You mention you've tested the current behavior, but I think we should retain the warning for good measure.
> [!WARNING] | ||
> Because the `<summary>` element has a default role of [button](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/button_role) (which strips all roles from child elements), this example will not work for users of assistive technologies such as screen readers. The `<h4>` will have its role removed and thus will not be treated as a heading for these users. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would suggest updating it as proposed in #28602 (comment) (slightly edited):
> [!WARNING]
> The role assigned to the `<summary>` element varies across browsers. Some still assign it a default [`button`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/button_role) role, which removes all roles from its children. This inconsistency can cause issues for users of assistive technologies such as screen readers (`<h4>` in the previous example will have its role removed and will not be treated as a heading for these users). You should test your `<summary>` implementation on multiple platforms to ensure there's consistent accessibility support.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm curious for which user agents this is still the case, is this still a concern?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We don't have an exhaustive list of how all the different combinations of browsers and assistive technologies are handling this. So I'd say it's worth keeping this cautionary note around, at least until the spec is updated as well.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@leekeh would you be able to come back to this PR soonish? Would be great to have this published.
Hi @leekeh, I've gone ahead and applied the edited warning text to keep things moving. Thanks again for your contribution!! |
Description
Remove outdated warning on accessibility roles in the
<summary>
element.Motivation
The implicit role of the element was changed from
button
tono corresponding role
in the aria specifications at the end of 2022:Seems like the
implicit role
was corrected on mdn in 2023 (#28602), but this specific warning was forgotten.Although the specifications still contain a warning that browsers will still use a button role, I tested this and found it to not be the case at least in Chromium, Firefox and Safari. So perhaps the specs also need to be updated.
Additional details
Related issues and pull requests
Relates to #28602