fix: relax a11y-no-noninteractive-element-to-interactive-role warning

sveltejs#8167 introduced the strict version of it - until this is configurable, we should use the relaxed version instead, since many a11y docs actually advise using ul/ol etc

Author: dummdidumm

src/compiler/compile/nodes/Element.ts

@@ -172,6 +172,35 @@ const input_type_to_implicit_role = new Map([
   ['url', 'textbox']
 ]);
 
+/** 
+ * Exceptions to the rule which follows common A11y conventions
+ * TODO make this configurable by the user
+ */
+const a11y_non_interactive_element_to_interactive_role_exceptions = {
+	ul: [
+		'listbox',
+		'menu',
+		'menubar',
+		'radiogroup',
+		'tablist',
+		'tree',
+		'treegrid',
+	],
+	ol: [
+		'listbox',
+		'menu',
+		'menubar',
+		'radiogroup',
+		'tablist',
+		'tree',
+		'treegrid',
+	],
+	li: ['menuitem', 'option', 'row', 'tab', 'treeitem'],
+	table: ['grid'],
+	td: ['gridcell'],
+	fieldset: ['radiogroup', 'presentation'],
+};
+
 const combobox_if_list = new Set(['email', 'search', 'tel', 'text', 'url']);
 
 function input_implicit_role(attribute_map: Map<string, Attribute>) {
@@ -651,7 +680,7 @@ export default class Element extends Node {
 						}
 
 						// no-noninteractive-element-to-interactive-role
-						if (is_non_interactive_element(this.name, attribute_map) && is_interactive_roles(current_role)) {
+						if (is_non_interactive_element(this.name, attribute_map) && is_interactive_roles(current_role) && !a11y_non_interactive_element_to_interactive_role_exceptions[this.name]?.includes(current_role)) {
 							component.warn(this, compiler_warnings.a11y_no_noninteractive_element_to_interactive_role(current_role, this.name));
 						}
 					});

test/validator/samples/a11y-no-noninteractive-element-to-interactive-role/warnings.json

@@ -622,197 +622,5 @@
       "column": 0,
       "line": 53
     }
-  },
-  {
-    "code": "a11y-no-noninteractive-element-to-interactive-role",
-    "end": {
-      "column": 18,
-      "line": 57
-    },
-    "message": "A11y: Non-interactive element <ul> cannot have interactive role 'menu'",
-    "start": {
-      "column": 0,
-      "line": 57
-    }
-  },
-  {
-    "code": "a11y-no-noninteractive-element-to-interactive-role",
-    "end": {
-      "column": 21,
-      "line": 58
-    },
-    "message": "A11y: Non-interactive element <ul> cannot have interactive role 'menubar'",
-    "start": {
-      "column": 0,
-      "line": 58
-    }
-  },
-  {
-    "code": "a11y-no-noninteractive-element-to-interactive-role",
-    "end": {
-      "column": 24,
-      "line": 59
-    },
-    "message": "A11y: Non-interactive element <ul> cannot have interactive role 'radiogroup'",
-    "start": {
-      "column": 0,
-      "line": 59
-    }
-  },
-  {
-    "code": "a11y-no-noninteractive-element-to-interactive-role",
-    "end": {
-      "column": 21,
-      "line": 60
-    },
-    "message": "A11y: Non-interactive element <ul> cannot have interactive role 'tablist'",
-    "start": {
-      "column": 0,
-      "line": 60
-    }
-  },
-  {
-    "code": "a11y-no-noninteractive-element-to-interactive-role",
-    "end": {
-      "column": 18,
-      "line": 61
-    },
-    "message": "A11y: Non-interactive element <ul> cannot have interactive role 'tree'",
-    "start": {
-      "column": 0,
-      "line": 61
-    }
-  },
-  {
-    "code": "a11y-no-noninteractive-element-to-interactive-role",
-    "end": {
-      "column": 22,
-      "line": 62
-    },
-    "message": "A11y: Non-interactive element <ul> cannot have interactive role 'treegrid'",
-    "start": {
-      "column": 0,
-      "line": 62
-    }
-  },
-  {
-    "code": "a11y-no-noninteractive-element-to-interactive-role",
-    "end": {
-      "column": 18,
-      "line": 64
-    },
-    "message": "A11y: Non-interactive element <ol> cannot have interactive role 'menu'",
-    "start": {
-      "column": 0,
-      "line": 64
-    }
-  },
-  {
-    "code": "a11y-no-noninteractive-element-to-interactive-role",
-    "end": {
-      "column": 21,
-      "line": 65
-    },
-    "message": "A11y: Non-interactive element <ol> cannot have interactive role 'menubar'",
-    "start": {
-      "column": 0,
-      "line": 65
-    }
-  },
-  {
-    "code": "a11y-no-noninteractive-element-to-interactive-role",
-    "end": {
-      "column": 24,
-      "line": 66
-    },
-    "message": "A11y: Non-interactive element <ol> cannot have interactive role 'radiogroup'",
-    "start": {
-      "column": 0,
-      "line": 66
-    }
-  },
-  {
-    "code": "a11y-no-noninteractive-element-to-interactive-role",
-    "end": {
-      "column": 21,
-      "line": 67
-    },
-    "message": "A11y: Non-interactive element <ol> cannot have interactive role 'tablist'",
-    "start": {
-      "column": 0,
-      "line": 67
-    }
-  },
-  {
-    "code": "a11y-no-noninteractive-element-to-interactive-role",
-    "end": {
-      "column": 18,
-      "line": 68
-    },
-    "message": "A11y: Non-interactive element <ol> cannot have interactive role 'tree'",
-    "start": {
-      "column": 0,
-      "line": 68
-    }
-  },
-  {
-    "code": "a11y-no-noninteractive-element-to-interactive-role",
-    "end": {
-      "column": 22,
-      "line": 69
-    },
-    "message": "A11y: Non-interactive element <ol> cannot have interactive role 'treegrid'",
-    "start": {
-      "column": 0,
-      "line": 69
-    }
-  },
-  {
-    "code": "a11y-no-noninteractive-element-to-interactive-role",
-    "end": {
-      "column": 17,
-      "line": 71
-    },
-    "message": "A11y: Non-interactive element <li> cannot have interactive role 'tab'",
-    "start": {
-      "column": 0,
-      "line": 71
-    }
-  },
-  {
-    "code": "a11y-no-noninteractive-element-to-interactive-role",
-    "end": {
-      "column": 22,
-      "line": 72
-    },
-    "message": "A11y: Non-interactive element <li> cannot have interactive role 'menuitem'",
-    "start": {
-      "column": 0,
-      "line": 72
-    }
-  },
-  {
-    "code": "a11y-no-noninteractive-element-to-interactive-role",
-    "end": {
-      "column": 17,
-      "line": 73
-    },
-    "message": "A11y: Non-interactive element <li> cannot have interactive role 'row'",
-    "start": {
-      "column": 0,
-      "line": 73
-    }
-  },
-  {
-    "code": "a11y-no-noninteractive-element-to-interactive-role",
-    "end": {
-      "column": 44,
-      "line": 74
-    },
-    "message": "A11y: Non-interactive element <li> cannot have interactive role 'treeitem'",
-    "start": {
-      "column": 0,
-      "line": 74
-    }
   }
 ]