feat(a11y): use list-style-type instead of list-style none to avoid losing semantic role in Safari#41778
Closed
MaxLardenois wants to merge 2 commits into
Closed
feat(a11y): use list-style-type instead of list-style none to avoid losing semantic role in Safari#41778MaxLardenois wants to merge 2 commits into
MaxLardenois wants to merge 2 commits into
Conversation
2 tasks
ffoodd
approved these changes
Oct 14, 2025
ffoodd
left a comment
ffoodd
left a comment
Contributor
There was a problem hiding this comment.
LGTM! I'm also wondering if it should be enforced through declaration-property-value-disallowed-list in our Stylelint config? @julien-deramond @XhmikosR any thought?
Member
|
as much as working around Safari's "Apple knows best" approach to semantics ... this PR looks good to me |
patrickhlauke
approved these changes
Dec 27, 2025
patrickhlauke
left a comment
patrickhlauke
left a comment
Member
There was a problem hiding this comment.
not sure if we maybe want to add a comment on the various uses of list-style-type to make it clear why we use it rather than list-style: none or if that's a bit heavy-handed? either way...
1 task
Member
mdo
added a commit
that referenced
this pull request
Jun 21, 2026
In Safari, "list-style: none" removes the list semantic role, so lists are no longer announced by screen readers. Using "list-style-type: \"\"" keeps the same visual result while preserving the list role. Ports #41778 to v6, plus the new v6 list containers (stepper, menu, docs search results). Summary marker removals (accordion header, details summary) are intentionally left as "list-style: none".
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Replace
list-style: nonebylist-style-type: ""This is a new PR after I mistakenly closed the previous one (#41651) sorry about that
Motivation & Context
In Safari, using
list-style: nonewill remove its semantic role of list, therefore it will not be announced by screen readers as such. One solution is to addrole: liston each affected lists but that means relying on a good usage and adds unnecessary code. Another solution as explained here is to uselist-style-type: ""instead, this will have the same visual effect but won't remove semantic role.Type of changes
Checklist
npm run lint)Live previews
Related issues