Use handlers from recommended rule config

Author: timmcca-be

src/compiler/compile/nodes/Element.ts

@@ -24,7 +24,7 @@ import { Literal } from 'estree';
 import compiler_warnings from '../compiler_warnings';
 import compiler_errors from '../compiler_errors';
 import { ARIARoleDefintionKey, roles, aria, ARIAPropertyDefinition, ARIAProperty } from 'aria-query';
-import { is_non_interactive_element, is_interactive_element, is_non_interactive_roles, is_presentation_role, is_interactive_roles, is_hidden_from_screen_reader, is_semantic_role_element, is_abstract_role, is_interactive_handler } from '../utils/a11y';
+import { is_non_interactive_element, is_interactive_element, is_non_interactive_roles, is_presentation_role, is_interactive_roles, is_hidden_from_screen_reader, is_semantic_role_element, is_abstract_role } from '../utils/a11y';
 
 const aria_attributes = 'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
 const aria_attribute_set = new Set(aria_attributes);
@@ -75,6 +75,16 @@ const a11y_labelable = new Set([
 	'textarea'
 ]);
 
+const a11y_interactive_handlers = new Set([
+	'click',
+	'mousedown',
+	'mouseup',
+	'keypress',
+	'keydown',
+	'keyup'
+]);
+
+
 const a11y_nested_implicit_semantics = new Map([
 	['header', 'banner'],
 	['footer', 'contentinfo']
@@ -615,7 +625,9 @@ export default class Element extends Node {
 			!is_non_interactive_roles(role) &&
 			!is_abstract_role(role)
 		) {
-			const interactive_handlers = handlers.map((handler) => handler.name).filter(is_interactive_handler);
+			const interactive_handlers = handlers
+				.map((handler) => handler.name)
+				.filter((handlerName) => a11y_interactive_handlers.has(handlerName));
 			if (interactive_handlers.length > 0) {
 				component.warn(
 					this,

src/compiler/compile/utils/a11y.ts

@@ -240,41 +240,3 @@ export function is_semantic_role_element(
 	}
 	return false;
 }
-
-const interactive_handlers = new Set([
-	// Focus
-	'focus',
-	'focusin',
-	'focusout',
-	'blur',
-
-	// Keyboard
-	'keydown',
-	'keypress',
-	'keyup',
-
-	// Mouse
-	'auxclick',
-	'click',
-	'contextmenu',
-	'dblclick',
-	'drag',
-	'dragend',
-	'dragenter',
-	'dragexit',
-	'dragleave',
-	'dragover',
-	'dragstart',
-	'drop',
-	'mousedown',
-	'mouseenter',
-	'mouseleave',
-	'mousemove',
-	'mouseout',
-	'mouseover',
-	'mouseup'
-]);
-
-export function is_interactive_handler(handler: string) {
-	return interactive_handlers.has(handler);
-}

test/validator/samples/a11y-no-static-element-interactions/input.svelte

@@ -9,6 +9,8 @@
 <div on:copy={() => {}} />
 <a href="/foo" on:click={() => {}}>link</a>
 <div role={dynamicRole} on:click={() => {}} />
+<footer on:keydown={() => {}} />
+
 <!-- invalid -->
 <div on:keydown={() => {}} />
 <!-- svelte-ignore a11y-missing-attribute -->

test/validator/samples/a11y-no-static-element-interactions/warnings.json

@@ -2,31 +2,31 @@
 	{
 		"code": "a11y-no-static-element-interactions",
 		"end": {
-			"character": 347,
+			"character": 381,
 			"column": 29,
-			"line": 13
+			"line": 15
 		},
 		"message": "A11y: <div> with keydown handler must have an ARIA role",
-		"pos": 318,
+		"pos": 352,
 		"start": {
-			"character": 318,
+			"character": 352,
 			"column": 0,
-			"line": 13
+			"line": 15
 		}
 	},
 	{
 		"code": "a11y-no-static-element-interactions",
 		"end": {
-			"character": 470,
+			"character": 504,
 			"column": 76,
-			"line": 15
+			"line": 17
 		},
 		"message": "A11y: <a> with mousedown, mouseup handlers must have an ARIA role",
-		"pos": 394,
+		"pos": 428,
 		"start": {
-			"character": 394,
+			"character": 428,
 			"column": 0,
-			"line": 15
+			"line": 17
 		}
 	}
 ]