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

fixes #8854
sveltejs · Jun 28, 2023 · 1cfed0b · 1cfed0b
1 parent 876f894
commit 1cfed0b
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 43 deletions.
diff --git a/.changeset/pretty-tools-whisper.md b/.changeset/pretty-tools-whisper.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: relax a11y "no redundant role" rule for li, ul, ol
diff --git a/packages/svelte/src/compiler/compile/nodes/Element.js b/packages/svelte/src/compiler/compile/nodes/Element.js
@@ -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)

diff --git a/packages/svelte/test/validator/samples/a11y-no-redundant-roles/input.svelte b/packages/svelte/test/validator/samples/a11y-no-redundant-roles/input.svelte
@@ -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" />
@@ -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 -->

diff --git a/packages/svelte/test/validator/samples/a11y-no-redundant-roles/warnings.json b/packages/svelte/test/validator/samples/a11y-no-redundant-roles/warnings.json
@@ -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": {
@@ -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": {
@@ -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": {