Skip to content

Conversation

@MaxLardenois
Copy link
Contributor

@MaxLardenois MaxLardenois commented Sep 29, 2025

Description

Replace list-style: none by list-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: none will remove its semantic role of list, therefore it will not be announced by screen readers as such. One solution is to add role: list on each affected lists but that means relying on a good usage and adds unnecessary code. Another solution as explained here is to use list-style-type: "" instead, this will have the same visual effect but won't remove semantic role.

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Related issues

Copy link
Member

@ffoodd ffoodd left a comment

Choose a reason for hiding this comment

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

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?

@patrickhlauke
Copy link
Member

as much as working around Safari's "Apple knows best" approach to semantics ... this PR looks good to me

Copy link
Member

@patrickhlauke patrickhlauke left a comment

Choose a reason for hiding this comment

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

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...

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

Projects

Status: Inbox

Development

Successfully merging this pull request may close these issues.

4 participants