fix: take event attributes into account when checking a11y (#9664)

also adjusted the warning messages slightly so they make sense for both variants of event handlers
fixes #9654

.changeset/polite-pumpkins-guess.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: take event attributes into account when checking a11y

packages/svelte/src/compiler/phases/2-analyze/a11y.js

@@ -9,7 +9,7 @@ import {
 } from '../patterns.js';
 import { warn } from '../../warnings.js';
 import fuzzymatch from '../1-parse/utils/fuzzymatch.js';
-import { is_text_attribute } from '../../utils/ast.js';
+import { is_event_attribute, is_text_attribute } from '../../utils/ast.js';
 import { ContentEditableBindings } from '../constants.js';
 import { walk } from 'zimmerframe';
 
@@ -704,10 +704,14 @@ function check_element(node, state, path) {
 		} else if (attribute.type === 'OnDirective') {
 			handlers.add(attribute.name);
 		} else if (attribute.type === 'Attribute') {
-			attributes.push(attribute);
-			attribute_map.set(attribute.name, attribute);
-			if (attribute.name === 'contenteditable') {
-				has_contenteditable_attr = true;
+			if (is_event_attribute(attribute)) {
+				handlers.add(attribute.name.slice(2));
+			} else {
+				attributes.push(attribute);
+				attribute_map.set(attribute.name, attribute);
+				if (attribute.name === 'contenteditable') {
+					has_contenteditable_attr = true;
+				}
 			}
 		} else if (
 			attribute.type === 'BindDirective' &&

packages/svelte/src/compiler/warnings.js

@@ -115,7 +115,7 @@ const a11y = {
 	'a11y-misplaced-scope': () => 'A11y: The scope attribute should only be used with <th> elements',
 	'a11y-positive-tabindex': () => 'A11y: avoid tabindex values above zero',
 	'a11y-click-events-have-key-events': () =>
-		'A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type="button"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.',
+		'A11y: visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type="button"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.',
 	'a11y-no-noninteractive-tabindex': () =>
 		'A11y: noninteractive element cannot have nonnegative tabIndex value',
 	/**
@@ -180,7 +180,7 @@ const a11y = {
 	 * @param {string} accompanied_by
 	 */
 	'a11y-mouse-events-have-key-events': (event, accompanied_by) =>
-		`A11y: on:${event} must be accompanied by on:${accompanied_by}`,
+		`A11y: '${event}' event must be accompanied by '${accompanied_by}' event`,
 	/** @param {string} name */
 	'a11y-missing-content': (name) => `A11y: <${name}> element should have child content`
 };

packages/svelte/tests/validator/samples/a11y-click-events-have-key-events/input.svelte

@@ -24,6 +24,8 @@
 <header on:click={noop} />
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <footer on:click={noop} />
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<footer onclick={noop} />
 
 <!-- should not warn -->
 <div class="foo" />
@@ -66,6 +68,7 @@
 <div on:click={noop} role="presentation" />
 <div on:click={noop} role="none" />
 <div on:click={noop} role={dynamicRole} />
+<div onclick={noop} role={dynamicRole} />
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <svelte:element this={Math.random() ? 'button' : 'div'} on:click={noop} />

packages/svelte/tests/validator/samples/a11y-click-events-have-key-events/warnings.json

@@ -1,7 +1,7 @@
 [
 	{
 		"code": "a11y-click-events-have-key-events",
-		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
+		"message": "A11y: visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
 		"start": {
 			"line": 13,
 			"column": 0
@@ -13,7 +13,7 @@
 	},
 	{
 		"code": "a11y-click-events-have-key-events",
-		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
+		"message": "A11y: visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
 		"start": {
 			"line": 15,
 			"column": 0
@@ -25,7 +25,7 @@
 	},
 	{
 		"code": "a11y-click-events-have-key-events",
-		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
+		"message": "A11y: visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
 		"start": {
 			"line": 18,
 			"column": 0
@@ -37,7 +37,7 @@
 	},
 	{
 		"code": "a11y-click-events-have-key-events",
-		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
+		"message": "A11y: visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
 		"start": {
 			"line": 20,
 			"column": 0
@@ -49,7 +49,7 @@
 	},
 	{
 		"code": "a11y-click-events-have-key-events",
-		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
+		"message": "A11y: visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
 		"start": {
 			"line": 22,
 			"column": 0
@@ -61,7 +61,7 @@
 	},
 	{
 		"code": "a11y-click-events-have-key-events",
-		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
+		"message": "A11y: visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
 		"start": {
 			"line": 24,
 			"column": 0
@@ -73,7 +73,7 @@
 	},
 	{
 		"code": "a11y-click-events-have-key-events",
-		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
+		"message": "A11y: visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
 		"start": {
 			"line": 26,
 			"column": 0
@@ -82,5 +82,17 @@
 			"line": 26,
 			"column": 26
 		}
+	},
+	{
+		"code": "a11y-click-events-have-key-events",
+		"message": "A11y: visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
+		"start": {
+			"line": 28,
+			"column": 0
+		},
+		"end": {
+			"line": 28,
+			"column": 25
+		}
 	}
 ]

packages/svelte/tests/validator/samples/a11y-interactive-supports-focus/warnings.json

@@ -233,7 +233,7 @@
 			"column": 44,
 			"line": 29
 		},
-		"message": "A11y: on:mouseout must be accompanied by on:blur",
+		"message": "A11y: 'mouseout' event must be accompanied by 'blur' event",
 		"start": {
 			"column": 0,
 			"line": 29
@@ -257,7 +257,7 @@
 			"column": 48,
 			"line": 30
 		},
-		"message": "A11y: on:mouseover must be accompanied by on:focus",
+		"message": "A11y: 'mouseover' event must be accompanied by 'focus' event",
 		"start": {
 			"column": 0,
 			"line": 30

packages/svelte/tests/validator/samples/a11y-mouse-events-have-key-events/warnings.json

@@ -5,7 +5,7 @@
 			"column": 35,
 			"line": 11
 		},
-		"message": "A11y: on:mouseover must be accompanied by on:focus",
+		"message": "A11y: 'mouseover' event must be accompanied by 'focus' event",
 		"start": {
 			"column": 0,
 			"line": 11
@@ -17,7 +17,7 @@
 			"column": 51,
 			"line": 15
 		},
-		"message": "A11y: on:mouseover must be accompanied by on:focus",
+		"message": "A11y: 'mouseover' event must be accompanied by 'focus' event",
 		"start": {
 			"column": 0,
 			"line": 15
@@ -29,7 +29,7 @@
 			"column": 34,
 			"line": 17
 		},
-		"message": "A11y: on:mouseout must be accompanied by on:blur",
+		"message": "A11y: 'mouseout' event must be accompanied by 'blur' event",
 		"start": {
 			"column": 0,
 			"line": 17
@@ -41,7 +41,7 @@
 			"column": 50,
 			"line": 21
 		},
-		"message": "A11y: on:mouseout must be accompanied by on:blur",
+		"message": "A11y: 'mouseout' event must be accompanied by 'blur' event",
 		"start": {
 			"column": 0,
 			"line": 21

packages/svelte/tests/validator/samples/slot-warning/warnings.json

@@ -1,7 +1,7 @@
 [
 	{
 		"code": "a11y-click-events-have-key-events",
-		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
+		"message": "A11y: visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
 		"start": {
 			"column": 1,
 			"line": 7

packages/svelte/tests/validator/samples/slot-warning2/warnings.json

@@ -1,7 +1,7 @@
 [
 	{
 		"code": "a11y-click-events-have-key-events",
-		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
+		"message": "A11y: visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type=\"button\"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
 		"start": {
 			"column": 1,
 			"line": 8