False Positive for a11y-no-redundant-roles on List Items

[r-thomson]

Describe the bug

Svelte will always report a warning on <li role="listitem">. However, this can be a false positive, as under certain conditions the role may not be redundant. According to MDN:

Note: Styling a list with list-style: none; in CSS removes the list semantics. Adding role="listitem" returns the semantics.

More info here

Reproduction

<ul>
  <li role="listitem">List item</li>
</ul>

<style>
  li {
    list-style: none;
  }
</style>

Warn: A11y: Redundant role 'listitem' (svelte)
<ul>
    <li role="listitem">List item</li>
</ul>

Logs

No response

System Info

System:
    OS: macOS 13.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 630.22 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.3.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - /opt/homebrew/bin/npm
  Browsers:
    Safari: 16.5
  npmPackages:
    svelte: ^4.0.0 => 4.0.0

Severity

annoyance

[dummdidumm]

I'm inclined to mark this as "works as designed" since I imagine this being an edge case and only affecting Safari, and because it's possible to also solve this using CSS (zero width space) - adding <!-- svelte-ignore a11y-no-redundant-roles --> above it would silence it as a last resort.

[geoffrich]

We also show this warning for role="list" on <ul>

<ul role="list">
</ul>

I'd be in favor of adding an exception to this warning for list and listitem, since this is a common workaround to announce unstyled lists for VoiceOver/Safari users. The warning isn't useful is this case since there's a valid reason to add role="list"

[LorisSigrist]

I would love to see an exception for role="list" and role="listitem"
Many CSS resets add list-style: none, including the one used by tailwind, so this workaround is quite often necessary.