Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: relax a11y "no redundant role" rule for li, ul, ol #8867

Merged
merged 1 commit into from
Jun 28, 2023
Merged

fix: relax a11y "no redundant role" rule for li, ul, ol #8867

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/pretty-tools-whisper.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': patch
---

fix: relax a11y "no redundant role" rule for li, ul, ol
6 changes: 5 additions & 1 deletion packages/svelte/src/compiler/compile/nodes/Element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -694,7 +694,11 @@ export default class Element extends Node {
);
}
// no-redundant-roles
if (current_role === get_implicit_role(this.name, attribute_map)) {
if (
current_role === get_implicit_role(this.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', 'ol', 'li'].includes(this.name)
) {
component.warn(
attribute,
compiler_warnings.a11y_no_redundant_roles(current_role)
Expand Down
12 changes: 6 additions & 6 deletions packages/svelte/test/validator/samples/a11y-no-redundant-roles/input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@
<h5 role="heading">heading</h5>
<h6 role="heading">heading</h6>
<hr role="separator" />
<li role="listitem" />
<!-- <li role="listitem" /> allowed since CSS list-style none removes semantic meaning and role brings it back -->
<link role="link" />
<main role="main"></main>
<main role="main" />
<menu role="list" />
<nav role="navigation" />
<ol role="list" />
<!-- <ol role="list" /> allowed, see comment above -->
<optgroup role="group" />
<option role="option" />
<output role="status" />
Expand All @@ -37,11 +37,11 @@
<tfoot role="rowgroup" />
<thead role="rowgroup" />
<tr role="row" />
<ul role="list" />
<!--<ul role="list" /> allowed, see comment above -->

<!-- Tested header/footer not nested in section/article -->
<header role="banner"></header>
<footer role="contentinfo"></footer>
<header role="banner" />
<footer role="contentinfo" />

<!-- Allowed -->
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
Expand Down
36 changes: 0 additions & 36 deletions packages/svelte/test/validator/samples/a11y-no-redundant-roles/warnings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,18 +251,6 @@
"line": 21
}
},
{
"code": "a11y-no-redundant-roles",
"end": {
"column": 19,
"line": 22
},
"message": "A11y: Redundant role 'listitem'",
"start": {
"column": 4,
"line": 22
}
},
{
"code": "a11y-no-redundant-roles",
"end": {
Expand Down Expand Up @@ -311,18 +299,6 @@
"line": 26
}
},
{
"code": "a11y-no-redundant-roles",
"end": {
"column": 15,
"line": 27
},
"message": "A11y: Redundant role 'list'",
"start": {
"column": 4,
"line": 27
}
},
{
"code": "a11y-no-redundant-roles",
"end": {
Expand Down Expand Up @@ -467,18 +443,6 @@
"line": 39
}
},
{
"code": "a11y-no-redundant-roles",
"end": {
"column": 15,
"line": 40
},
"message": "A11y: Redundant role 'list'",
"start": {
"column": 4,
"line": 40
}
},
{
"code": "a11y-no-redundant-roles",
"end": {
Expand Down