search

sveltejs / svelte

web development for the rest of us
https://svelte.dev
MIT License
79.82k stars 4.24k forks source link

a11y-no-redundant-roles warning misidentifies an implicit role #9261

Open uiu490 opened 1 year ago

uiu490 commented 1 year ago

Describe the bug

The a11y-no-redundant-roles warning correctly identifies that < a href="http://somelink.com" role="link"> has a redundant role because an anchor tag with an href has an implicit role (link) in HTML5. However, the redundant role warning should not appear when < a role="link"> html is used, because HTML5 does not implicitly assign the link role to anchor tags without hrefs.

Reproduction

"< a role="link"></ a>"

A11y: Redundant role 'link' svelte(a11y-no-redundant-roles)

Logs

No response

System Info

System:
    OS: macOS 13.5.2
    CPU: (8) arm64 Apple M1
    Memory: 1.55 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - /usr/local/bin/node
    npm: 9.6.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 117.0.5938.92
    Safari: 16.6
  npmPackages:
    svelte: ^3.46.0 => 3.57.0

Severity

annoyance

brunnerh commented 1 year ago

Note that removing the href also removes any default keyboard interactivity, making it easy to mess up keyboard accessibility. Generally I would not recommend removing it and if there is no suitable href in the first place, maybe a <button> would be more appropriate.

uiu490 commented 1 year ago

I’m not building this site, the anchor tag is chosen for styling purposes, you’ll get the missing attribute error for an anchor without an href, but there shouldn’t be a redundant role error because the anchor tag without the href does not have a semantic role in HTML5.