fix: don't warn about redundant `link` role on `<area>` without `href` (#18872)

Since #11737, `<a role="link">` without an `href` no longer triggers
`a11y_no_redundant_roles`, but `<area role="link">` without an `href`
still does. Per [ARIA in
HTML](https://www.w3.org/TR/html-aria/#el-area-no-href), an `<area>`
without `href` has the implicit role `generic` and `link` is one of its
allowed roles, so the role isn't redundant. This applies the existing
`<a>` exception to `<area>` and adds test cases for `<area>` with and
without `href`.

Closes #9261. The `<a>` example in that issue was already fixed by
#11737, but the issue was left open.

### Before submitting the PR, please make sure you do the following

- [x] It's really useful if your PR references an issue where it is
discussed ahead of time. In many cases, features are absent for a
reason. For large changes, please create an RFC:
https://github.com/sveltejs/rfcs
- [x] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.
- [x] This message body should clearly illustrate what problems it
solves.
- [x] Ideally, include a test that fails without this PR but passes with
it.
- [x] If this PR changes code within `packages/svelte/src`, add a
changeset (`npx changeset`).

### Tests and linting

- [x] Run the tests with `pnpm test` and lint the project with `pnpm
lint`
pull/18871/merge
G 6 days ago committed by GitHub
parent f7ca0a44a5
commit 75aa6ba38d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: don't warn about a redundant `link` role on `<area>` elements without an `href`

@ -173,8 +173,8 @@ export function check_element(node, context) {
current_role === get_implicit_role(node.name, attribute_map) && current_role === get_implicit_role(node.name, attribute_map) &&
// <ul role="list"> is ok because CSS list-style:none removes the semantics and this is a way to bring them back // <ul role="list"> is ok because CSS list-style:none removes the semantics and this is a way to bring them back
!['ul', 'ol', 'li', 'menu'].includes(node.name) && !['ul', 'ol', 'li', 'menu'].includes(node.name) &&
// <a role="link" /> is ok because without href the a tag doesn't have a role of link // <a role="link" /> and <area role="link" /> are ok because without href they don't have a role of link
!(node.name === 'a' && !attribute_map.has('href')) !((node.name === 'a' || node.name === 'area') && !attribute_map.has('href'))
) { ) {
w.a11y_no_redundant_roles(attribute, current_role); w.a11y_no_redundant_roles(attribute, current_role);
} }

@ -43,6 +43,11 @@
<header role="banner"></header> <header role="banner"></header>
<footer role="contentinfo"></footer> <footer role="contentinfo"></footer>
<!-- area with href has an implicit role of link -->
<area href="/" role="link" alt="foo" />
<!-- Allowed --> <!-- Allowed -->
<!-- menu has same interactive role exceptions as ul/ol --> <!-- menu has same interactive role exceptions as ul/ol -->
<menu role="menu"></menu> <menu role="menu"></menu>
<!-- area without href doesn't have a role of link, same as a without href -->
<area role="link" aria-label="foo" />

@ -454,5 +454,17 @@
"column": 8, "column": 8,
"line": 44 "line": 44
} }
},
{
"code": "a11y_no_redundant_roles",
"end": {
"column": 26,
"line": 47
},
"message": "Redundant role 'link'",
"start": {
"column": 15,
"line": 47
}
} }
] ]

Loading…
Cancel
Save