From 6c3aea607c8e92f65943db4a009b4b07e6c8ad45 Mon Sep 17 00:00:00 2001
From: Anthony Le Goas <anthony.legoas@gmail.com>
Date: Wed, 3 Feb 2021 13:55:01 +0100
Subject: [PATCH] check noninteractive roles on interactive elements

---
 src/compiler/compile/nodes/Element.ts         |  20 +
 .../input.svelte                              |  54 ++
 .../warnings.json                             | 602 ++++++++++++++++++
 3 files changed, 676 insertions(+)
 create mode 100644 test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/input.svelte
 create mode 100644 test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/warnings.json

diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 07f17390182e..5b474f4fb9dd 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -98,6 +98,14 @@ const react_attributes = new Map([
 	['htmlFor', 'for']
 ]);
 
+const interactive_elements = new Set([
+	'a', 'button', 'input', 'select', 'textarea'
+]);
+
+const noninteractive_roles = new Set([
+	'article', 'banner', 'complementary', 'img', 'listitem', 'main', 'region', 'tooltip'
+]);
+
 function get_namespace(parent: Element, element: Element, explicit_namespace: string) {
 	const parent_element = parent.find_nearest(/^Element/);
 
@@ -596,6 +604,18 @@ export default class Element extends Node {
 				});
 			}
 		}
+
+		if (interactive_elements.has(this.name)) {
+			if (attribute_map.has('role')) {
+				const roleValue = this.attributes.find(a => a.name === 'role').get_static_value().toString();
+				if (noninteractive_roles.has(roleValue)) {
+					component.warn(this, {
+						code: 'a11y-no-interactive-element-to-noninteractive-role',
+						message: `A11y: <${this.name}> cannot have role ${roleValue}`
+					});
+				}
+			}
+		}
 	}
 
 	validate_bindings_foreign() {
diff --git a/test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/input.svelte b/test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/input.svelte
new file mode 100644
index 000000000000..ad12bcfd069d
--- /dev/null
+++ b/test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/input.svelte
@@ -0,0 +1,54 @@
+<!-- a -->
+<a href="test" role="article">link</a>
+<a href="test" role="banner">link</a>
+<a href="test" role="complementary">link</a>
+<a href="test" role="img">link</a>
+<a href="test" role="listitem">link</a>
+<a href="test" role="main">link</a>
+<a href="test" role="region">link</a>
+<a href="test" role="tooltip">link</a>
+<a href="test" role="button">link</a>
+
+<!-- button -->
+<button role="article">button</button>
+<button role="banner">button</button>
+<button role="complementary">button</button>
+<button role="img">button</button>
+<button role="listitem">button</button>
+<button role="main">button</button>
+<button role="region">button</button>
+<button role="tooltip">button</button>
+<button role="button">button</button>
+
+<!-- input -->
+<input role="article"/>
+<input role="banner"/>
+<input role="complementary"/>
+<input role="img"/>
+<input role="listitem"/>
+<input role="main"/>
+<input role="region"/>
+<input role="tooltip"/>
+<input role="button"/>
+
+<!-- select -->
+<select role="article"/>
+<select role="banner"/>
+<select role="complementary"/>
+<select role="img"/>
+<select role="listitem"/>
+<select role="main"/>
+<select role="region"/>
+<select role="tooltip"/>
+<select role="button"/>
+
+<!-- textarea -->
+<textarea role="article"/>
+<textarea role="banner"/>
+<textarea role="complementary"/>
+<textarea role="img"/>
+<textarea role="listitem"/>
+<textarea role="main"/>
+<textarea role="region"/>
+<textarea role="tooltip"/>
+<textarea role="button"/>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/warnings.json b/test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/warnings.json
new file mode 100644
index 000000000000..686a93940392
--- /dev/null
+++ b/test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/warnings.json
@@ -0,0 +1,602 @@
+[
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 49,
+            "column": 38,
+            "line": 2
+        },
+        "message": "A11y: <a> cannot have role article",
+        "pos": 11,
+        "start": {
+            "character": 11,
+            "column": 0,
+            "line": 2
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 87,
+            "column": 37,
+            "line": 3
+        },
+        "message": "A11y: <a> cannot have role banner",
+        "pos": 50,
+        "start": {
+            "character": 50,
+            "column": 0,
+            "line": 3
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 132,
+            "column": 44,
+            "line": 4
+        },
+        "message": "A11y: <a> cannot have role complementary",
+        "pos": 88,
+        "start": {
+            "character": 88,
+            "column": 0,
+            "line": 4
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 167,
+            "column": 34,
+            "line": 5
+        },
+        "message": "A11y: <a> cannot have role img",
+        "pos": 133,
+        "start": {
+            "character": 133,
+            "column": 0,
+            "line": 5
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 207,
+            "column": 39,
+            "line": 6
+        },
+        "message": "A11y: <a> cannot have role listitem",
+        "pos": 168,
+        "start": {
+            "character": 168,
+            "column": 0,
+            "line": 6
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 243,
+            "column": 35,
+        "line": 7
+        },
+        "message": "A11y: <a> cannot have role main",
+        "pos": 208,
+        "start": {
+            "character": 208,
+            "column": 0,
+            "line": 7
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 281,
+            "column": 37,
+            "line": 8
+        },
+        "message": "A11y: <a> cannot have role region",
+        "pos": 244,
+        "start": {
+            "character": 244,
+            "column": 0,
+            "line": 8
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 320,
+            "column": 38,
+            "line": 9
+        },
+        "message": "A11y: <a> cannot have role tooltip",
+        "pos": 282,
+        "start": {
+            "character": 282,
+            "column": 0,
+            "line": 9
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 414,
+            "column": 38,
+            "line": 13
+        },
+        "message": "A11y: <button> cannot have role article",
+        "pos": 376,
+        "start": {
+            "character": 376,
+            "column": 0,
+            "line": 13
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 452,
+            "column": 37,
+            "line": 14
+        },
+        "message": "A11y: <button> cannot have role banner",
+        "pos": 415,
+        "start": {
+            "character": 415,
+            "column": 0,
+            "line": 14
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 497,
+            "column": 44,
+            "line": 15
+        },
+        "message": "A11y: <button> cannot have role complementary",
+        "pos": 453,
+        "start": {
+            "character": 453,
+            "column": 0,
+            "line": 15
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 532,
+            "column": 34,
+            "line": 16
+        },
+        "message": "A11y: <button> cannot have role img",
+        "pos": 498,
+        "start": {
+            "character": 498,
+            "column": 0,
+            "line": 16
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 572,
+            "column": 39,
+            "line": 17
+        },
+        "message": "A11y: <button> cannot have role listitem",
+        "pos": 533,
+        "start": {
+            "character": 533,
+            "column": 0,
+            "line": 17
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 608,
+            "column": 35,
+            "line": 18
+        },
+        "message": "A11y: <button> cannot have role main",
+        "pos": 573,
+        "start": {
+            "character": 573,
+            "column": 0,
+            "line": 18
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 646,
+            "column": 37,
+            "line": 19
+        },
+        "message": "A11y: <button> cannot have role region",
+        "pos": 609,
+        "start": {
+            "character": 609,
+            "column": 0,
+            "line": 19
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 685,
+            "column": 38,
+            "line": 20
+        },
+        "message": "A11y: <button> cannot have role tooltip",
+        "pos": 647,
+        "start": {
+            "character": 647,
+            "column": 0,
+            "line": 20
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 763,
+            "column": 23,
+            "line": 24
+        },
+        "message": "A11y: <input> cannot have role article",
+        "pos": 740,
+        "start": {
+            "character": 740,
+            "column": 0,
+            "line": 24
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 786,
+            "column": 22,
+            "line": 25
+        },
+        "message": "A11y: <input> cannot have role banner",
+        "pos": 764,
+        "start": {
+            "character": 764,
+            "column": 0,
+            "line": 25
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 816,
+            "column": 29,
+            "line": 26
+        },
+        "message": "A11y: <input> cannot have role complementary",
+        "pos": 787,
+        "start": {
+            "character": 787,
+            "column": 0,
+            "line": 26
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 836,
+            "column": 19,
+            "line": 27
+        },
+        "message": "A11y: <input> cannot have role img",
+        "pos": 817,
+        "start": {
+            "character": 817,
+            "column": 0,
+            "line": 27
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 861,
+            "column": 24,
+            "line": 28
+        },
+        "message": "A11y: <input> cannot have role listitem",
+        "pos": 837,
+        "start": {
+            "character": 837,
+            "column": 0,
+            "line": 28
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 882,
+            "column": 20,
+            "line": 29
+        },
+        "message": "A11y: <input> cannot have role main",
+        "pos": 862,
+        "start": {
+            "character": 862,
+            "column": 0,
+            "line": 29
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 905,
+            "column": 22,
+            "line": 30
+        },
+        "message": "A11y: <input> cannot have role region",
+        "pos": 883,
+        "start": {
+            "character": 883,
+            "column": 0,
+            "line": 30
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 929,
+            "column": 23,
+            "line": 31
+        },
+        "message": "A11y: <input> cannot have role tooltip",
+        "pos": 906,
+        "start": {
+            "character": 906,
+            "column": 0,
+            "line": 31
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 994,
+            "column": 24,
+            "line": 35
+        },
+        "message": "A11y: <select> cannot have role article",
+        "pos": 970,
+        "start": {
+            "character": 970,
+            "column": 0,
+            "line": 35
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 1018,
+            "column": 23,
+            "line": 36
+        },
+        "message": "A11y: <select> cannot have role banner",
+        "pos": 995,
+        "start": {
+            "character": 995,
+            "column": 0,
+            "line": 36
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 1049,
+            "column": 30,
+            "line": 37
+        },
+        "message": "A11y: <select> cannot have role complementary",
+        "pos": 1019,
+        "start": {
+            "character": 1019,
+            "column": 0,
+            "line": 37
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 1070,
+            "column": 20,
+            "line": 38
+        },
+        "message": "A11y: <select> cannot have role img",
+        "pos": 1050,
+        "start": {
+        "character": 1050,
+        "column": 0,
+        "line": 38
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 1096,
+            "column": 25,
+            "line": 39
+        },
+        "message": "A11y: <select> cannot have role listitem",
+        "pos": 1071,
+        "start": {
+            "character": 1071,
+            "column": 0,
+            "line": 39
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 1118,
+            "column": 21,
+            "line": 40
+        },
+        "message": "A11y: <select> cannot have role main",
+        "pos": 1097,
+        "start": {
+            "character": 1097,
+            "column": 0,
+            "line": 40
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 1142,
+            "column": 23,
+            "line": 41
+        },
+        "message": "A11y: <select> cannot have role region",
+        "pos": 1119,
+        "start": {
+            "character": 1119,
+            "column": 0,
+            "line": 41
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 1167,
+            "column": 24,
+            "line": 42
+        },
+        "message": "A11y: <select> cannot have role tooltip",
+        "pos": 1143,
+        "start": {
+            "character": 1143,
+            "column": 0,
+            "line": 42
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 1237,
+            "column": 26,
+            "line": 46
+        },
+        "message": "A11y: <textarea> cannot have role article",
+        "pos": 1211,
+        "start": {
+            "character": 1211,
+            "column": 0,
+            "line": 46
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 1263,
+            "column": 25,
+            "line": 47
+        },
+        "message": "A11y: <textarea> cannot have role banner",
+        "pos": 1238,
+        "start": {
+            "character": 1238,
+            "column": 0,
+            "line": 47
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 1296,
+            "column": 32,
+            "line": 48
+        },
+        "message": "A11y: <textarea> cannot have role complementary",
+        "pos": 1264,
+        "start": {
+            "character": 1264,
+            "column": 0,
+            "line": 48
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 1319,
+            "column": 22,
+            "line": 49
+        },
+        "message": "A11y: <textarea> cannot have role img",
+        "pos": 1297,
+        "start": {
+            "character": 1297,
+            "column": 0,
+            "line": 49
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 1347,
+            "column": 27,
+            "line": 50
+        },
+        "message": "A11y: <textarea> cannot have role listitem",
+        "pos": 1320,
+        "start": {
+            "character": 1320,
+            "column": 0,
+            "line": 50
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 1371,
+            "column": 23,
+            "line": 51
+        },
+        "message": "A11y: <textarea> cannot have role main",
+        "pos": 1348,
+        "start": {
+            "character": 1348,
+            "column": 0,
+            "line": 51
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 1397,
+            "column": 25,
+            "line": 52
+        },
+        "message": "A11y: <textarea> cannot have role region",
+        "pos": 1372,
+        "start": {
+            "character": 1372,
+            "column": 0,
+            "line": 52
+        }
+    },
+    {
+        "code": "a11y-no-interactive-element-to-noninteractive-role",
+        "end": {
+            "character": 1424,
+            "column": 26,
+            "line": 53
+        },
+        "message": "A11y: <textarea> cannot have role tooltip",
+        "pos": 1398,
+        "start": {
+            "character": 1398,
+            "column": 0,
+            "line": 53
+        }
+    }
+]
\ No newline at end of file