fix: improve a11y-click-events-have-key-events message

.changeset/light-hounds-complain.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve a11y-click-events-have-key-events message

packages/svelte/src/compiler/compile/compiler_warnings.js

@@ -271,7 +271,7 @@ export default {
 	a11y_click_events_have_key_events: {
 		code: 'a11y-click-events-have-key-events',
 		message:
-			'A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.'
+			'A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether another element might be more appropriate such as a <button type="button"> element for actions or <a> element for navigations. Otherwise, add an on:keydown, on:keyup, or on:keypress event handler.'
 	},
 	a11y_missing_content: /** @param {string} name */ (name) => ({
 		code: 'a11y-missing-content',

packages/svelte/test/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 an on:keydown, on:keyup, or on:keypress event.",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether another element might be more appropriate such as a <button type=\"button\"> element for actions or <a> element for navigations. Otherwise, add an on:keydown, on:keyup, or on:keypress event handler.",
 		"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 an on:keydown, on:keyup, or on:keypress event.",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether another element might be more appropriate such as a <button type=\"button\"> element for actions or <a> element for navigations. Otherwise, add an on:keydown, on:keyup, or on:keypress event handler.",
 		"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 an on:keydown, on:keyup, or on:keypress event.",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether another element might be more appropriate such as a <button type=\"button\"> element for actions or <a> element for navigations. Otherwise, add an on:keydown, on:keyup, or on:keypress event handler.",
 		"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 an on:keydown, on:keyup, or on:keypress event.",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether another element might be more appropriate such as a <button type=\"button\"> element for actions or <a> element for navigations. Otherwise, add an on:keydown, on:keyup, or on:keypress event handler.",
 		"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 an on:keydown, on:keyup, or on:keypress event.",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether another element might be more appropriate such as a <button type=\"button\"> element for actions or <a> element for navigations. Otherwise, add an on:keydown, on:keyup, or on:keypress event handler.",
 		"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 an on:keydown, on:keyup, or on:keypress event.",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether another element might be more appropriate such as a <button type=\"button\"> element for actions or <a> element for navigations. Otherwise, add an on:keydown, on:keyup, or on:keypress event handler.",
 		"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 an on:keydown, on:keyup, or on:keypress event.",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether another element might be more appropriate such as a <button type=\"button\"> element for actions or <a> element for navigations. Otherwise, add an on:keydown, on:keyup, or on:keypress event handler.",
 		"start": {
 			"line": 26,
 			"column": 0

packages/svelte/test/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 an on:keydown, on:keyup, or on:keypress event.",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether another element might be more appropriate such as a <button type=\"button\"> element for actions or <a> element for navigations. Otherwise, add an on:keydown, on:keyup, or on:keypress event handler.",
 		"start": {
 			"column": 1,
 			"line": 7

packages/svelte/test/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 an on:keydown, on:keyup, or on:keypress event.",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether another element might be more appropriate such as a <button type=\"button\"> element for actions or <a> element for navigations. Otherwise, add an on:keydown, on:keyup, or on:keypress event handler.",
 		"start": {
 			"column": 1,
 			"line": 8