fix: define role="application" as an interactive ARIA role

.changeset/calm-walls-return.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+define `role="application"` as an interactive ARIA role

packages/svelte/src/compiler/compile/utils/a11y.js

@@ -15,7 +15,8 @@ const non_interactive_roles = new Set(
 				// focusable tabpanel elements are recommended if any panels in a set contain content where the first element in the panel is not focusable.
 				// 'generic' is meant to have no semantic meaning.
 				// 'cell' is treated as CellRole by the AXObject which is interactive, so we treat 'cell' it as interactive as well.
-				!['toolbar', 'tabpanel', 'generic', 'cell'].includes(name) &&
+				// 'application' describes interactive elements that do not follow a standard pattern supported by a widget role
+				!['toolbar', 'tabpanel', 'generic', 'cell', 'application'].includes(name) &&
 				!role.superClass.some((classes) => classes.includes('widget'))
 			);
 		})

packages/svelte/test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/input.svelte

@@ -100,11 +100,11 @@
 <div role="textbox" />
 <div role="treeitem" aria-selected={true} />
 <summary role="listitem" />
+<div role="application" />
 
 <!-- HTML elements attributed with a non-interactive role -->
 <div role="alert" />
 <div role="alertdialog" />
-<div role="application" />
 <div role="article" />
 <div role="banner" />
 <div role="cell" />

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

@@ -5,6 +5,7 @@
 <button on:click={() => {}} />
 <h1 contenteditable="true" on:keydown={() => {}}>Heading</h1>
 <h1>Heading</h1>
+<div role="application" on:keydown={() => {}} tabindex="-1"/>
 
 <!-- INVALID -->
 <div role="listitem" on:mousedown={() => {}} />

packages/svelte/test/validator/samples/a11y-no-noninteractive-element-interactions/warnings.json

@@ -3,60 +3,60 @@
 		"code": "a11y-no-noninteractive-element-interactions",
 		"end": {
 			"column": 47,
-			"line": 10
+			"line": 11
 		},
 		"message": "A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.",
 		"start": {
 			"column": 0,
-			"line": 10
+			"line": 11
 		}
 	},
 	{
 		"code": "a11y-no-noninteractive-element-interactions",
 		"end": {
 			"column": 58,
-			"line": 11
+			"line": 12
 		},
 		"message": "A11y: Non-interactive element <h1> should not be assigned mouse or keyboard event listeners.",
 		"start": {
 			"column": 0,
-			"line": 11
+			"line": 12
 		}
 	},
 	{
 		"code": "a11y-no-noninteractive-element-interactions",
 		"end": {
 			"column": 50,
-			"line": 12
+			"line": 13
 		},
 		"message": "A11y: Non-interactive element <h1> should not be assigned mouse or keyboard event listeners.",
 		"start": {
 			"column": 0,
-			"line": 12
+			"line": 13
 		}
 	},
 	{
 		"code": "a11y-no-noninteractive-element-interactions",
 		"end": {
 			"column": 28,
-			"line": 13
+			"line": 14
 		},
 		"message": "A11y: Non-interactive element <p> should not be assigned mouse or keyboard event listeners.",
 		"start": {
 			"column": 0,
-			"line": 13
+			"line": 14
 		}
 	},
 	{
 		"code": "a11y-no-noninteractive-element-interactions",
 		"end": {
 			"column": 46,
-			"line": 14
+			"line": 15
 		},
 		"message": "A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.",
 		"start": {
 			"column": 0,
-			"line": 14
+			"line": 15
 		}
 	}
 ]