Merge branch 'version-4' into a11y-no-noninteractive-element-interactions

.github/workflows/ci.yml

@@ -11,8 +11,17 @@ jobs:
     timeout-minutes: 15
     strategy:
       matrix:
-        node-version: [14, 16, 18]
+        include:
-        os: [ubuntu-latest, windows-latest, macOS-latest]
+          - node-version: 14
+            os: ubuntu-latest
+          - node-version: 14
+            os: windows-latest
+          - node-version: 14
+            os: macOS-latest
+          - node-version: 16
+            os: ubuntu-latest
+          - node-version: 18
+            os: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -37,7 +46,17 @@ jobs:
     timeout-minutes: 10
     strategy:
       matrix:
-        os: [ubuntu-latest, windows-latest, macOS-latest]
+        include:
+          - node-version: 14
+            os: ubuntu-latest
+          - node-version: 14
+            os: windows-latest
+          - node-version: 14
+            os: macOS-latest
+          - node-version: 16
+            os: ubuntu-latest
+          - node-version: 18
+            os: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3

CHANGELOG.md

@@ -2,7 +2,10 @@
 
 ## Unreleased (4.0)
 
-* Minimum supported Node version is now Node 14
+* **breaking** Minimum supported Node version is now Node 14
+* **breaking** Minimum supported TypeScript version is now 5 (it will likely work with lower versions, but we make no guarantess about that)
+* **breaking** Stricter types for `createEventDispatcher` (see PR for migration instructions) ([#7224](https://github.com/sveltejs/svelte/pull/7224))
+* **breaking** Stricter types for `Action` and `ActionReturn` (see PR for migration instructions) ([#7224](https://github.com/sveltejs/svelte/pull/7224))
 
 ## Unreleased (3.0)
 

package.json

@@ -90,7 +90,7 @@
   },
   "types": "types/runtime/index.d.ts",
   "scripts": {
-    "test": "npm run test:unit && npm run test:integration",
+    "test": "npm run test:unit && npm run test:integration && echo \"manually check that there are no type errors in test/types by opening the files in there\"",
     "test:integration": "mocha --exit",
     "test:unit": "mocha --config .mocharc.unit.js --exit",
     "quicktest": "mocha --exit",

src/compiler/compile/compiler_warnings.ts

@@ -115,6 +115,10 @@ export default {
 		code: 'a11y-no-redundant-roles',
 		message: `A11y: Redundant role '${role}'`
 	}),
+	a11y_no_static_element_interactions: (element: string, handlers: string[]) => ({
+		code: 'a11y-no-static-element-interactions',
+		message: `A11y: <${element}> with ${handlers.join(', ')} ${handlers.length === 1 ? 'handler' : 'handlers'} must have an ARIA role`
+	}),
 	a11y_no_interactive_element_to_noninteractive_role: (role: string | boolean, element: string) => ({
 		code: 'a11y-no-interactive-element-to-noninteractive-role',
 		message: `A11y: <${element}> cannot have role '${role}'`

src/compiler/compile/nodes/Element.ts

@@ -747,8 +747,12 @@ export default class Element extends Node {
 			}
 		}
 
+		const role = attribute_map.get('role');
+		const role_static_value = role?.get_static_value() as ARIARoleDefinitionKey;
+		const role_value = (role ? role_static_value : get_implicit_role(this.name, attribute_map)) as ARIARoleDefinitionKey;
+
 		// no-noninteractive-tabindex
-		if (!this.is_dynamic_element && !is_interactive_element(this.name, attribute_map) && !is_interactive_roles(attribute_map.get('role')?.get_static_value() as ARIARoleDefinitionKey)) {
+		if (!this.is_dynamic_element && !is_interactive_element(this.name, attribute_map) && !is_interactive_roles(role_static_value)) {
 			const tab_index = attribute_map.get('tabindex');
 			if (tab_index && (!tab_index.is_static || Number(tab_index.get_static_value()) >= 0)) {
 				component.warn(this, compiler_warnings.a11y_no_noninteractive_tabindex);
@@ -756,9 +760,6 @@ export default class Element extends Node {
 		}
 
 		// role-supports-aria-props
-		const role = attribute_map.get('role');
-		const role_static_value = role?.get_static_value() as ARIARoleDefinitionKey;
-		const role_value = (role ? role_static_value : get_implicit_role(this.name, attribute_map)) as ARIARoleDefinitionKey;
 		if (typeof role_value === 'string' && roles.has(role_value)) {
 			const { props } = roles.get(role_value);
 			const invalid_aria_props = new Set(aria.keys().filter(attribute => !(attribute in props)));
@@ -787,6 +788,30 @@ export default class Element extends Node {
 				component.warn(this, compiler_warnings.a11y_no_noninteractive_element_interactions(this.name));
 			}
 		}
+
+		const has_dynamic_role = attribute_map.get('role') && !attribute_map.get('role').is_static;
+
+		// no-static-element-interactions
+		if (
+			!has_dynamic_role &&
+			!is_hidden_from_screen_reader(this.name, attribute_map) &&
+			!is_presentation_role(role_static_value) &&
+			!is_interactive_element(this.name, attribute_map) &&
+			!is_interactive_roles(role_static_value) &&
+			!is_non_interactive_element(this.name, attribute_map) &&
+			!is_non_interactive_roles(role_static_value) &&
+			!is_abstract_role(role_static_value)
+		) {
+			const interactive_handlers = handlers
+				.map((handler) => handler.name)
+				.filter((handlerName) => a11y_interactive_handlers.has(handlerName));
+			if (interactive_handlers.length > 0) {
+				component.warn(
+					this,
+					compiler_warnings.a11y_no_static_element_interactions(this.name, interactive_handlers)
+				);
+			}
+		}
 	}
 
 	validate_special_cases() {

src/compiler/compile/utils/a11y.ts

@@ -19,7 +19,8 @@ const non_interactive_roles = new Set(
 				// 'toolbar' does not descend from widget, but it does support
 				// aria-activedescendant, thus in practice we treat it as a widget.
 				// focusable tabpanel elements are recommended if any panels in a set contain content where the first element in the panel is not focusable.
-				!['toolbar', 'tabpanel'].includes(name) &&
+				// 'generic' is meant to have no semantic meaning.
+				!['toolbar', 'tabpanel', 'generic'].includes(name) &&
 				!role.superClass.some((classes) => classes.includes('widget'))
 			);
 		})
@@ -31,7 +32,11 @@ const non_interactive_roles = new Set(
 );
 
 const interactive_roles = new Set(
-	non_abstract_roles.filter((name) => !non_interactive_roles.has(name))
+	non_abstract_roles.filter((name) => 
+		!non_interactive_roles.has(name) &&
+		// 'generic' is meant to have no semantic meaning.
+		name !== 'generic'
+	)
 );
 
 export function is_non_interactive_roles(role: ARIARoleDefinitionKey) {

src/runtime/action/index.ts

@@ -1,7 +1,8 @@
 /**
  * Actions can return an object containing the two properties defined in this interface. Both are optional.
  * - update: An action can have a parameter. This method will be called whenever that parameter changes,
- *   immediately after Svelte has applied updates to the markup.
+ *   immediately after Svelte has applied updates to the markup. `ActionReturn` and `ActionReturn<never>` both
+ *   mean that the action accepts no parameters, which makes it illegal to set the `update` method.
  * - destroy: Method that is called after the element is unmounted
  *
  * Additionally, you can specify which additional attributes and events the action enables on the applied element.
@@ -25,8 +26,8 @@
  *
  * Docs: https://svelte.dev/docs#template-syntax-element-directives-use-action
  */
-export interface ActionReturn<Parameter = any, Attributes extends Record<string, any> = Record<never, any>> {
+export interface ActionReturn<Parameter = never, Attributes extends Record<string, any> = Record<never, any>> {
-	update?: (parameter: Parameter) => void;
+	update?: [Parameter] extends [never] ? never : (parameter: Parameter) => void;
 	destroy?: () => void;
 	/**
 	 * ### DO NOT USE THIS
@@ -42,15 +43,21 @@ export interface ActionReturn<Parameter = any, Attributes extends Record<string,
  * The following example defines an action that only works on `<div>` elements
  * and optionally accepts a parameter which it has a default value for:
  * ```ts
- * export const myAction: Action<HTMLDivElement, { someProperty: boolean }> = (node, param = { someProperty: true }) => {
+ * export const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefined> = (node, param = { someProperty: true }) => {
  *   // ...
  * }
  * ```
+ * `Action<HTMLDivElement>` and `Action<HTMLDiveElement, never>` both signal that the action accepts no parameters.
+ *
  * You can return an object with methods `update` and `destroy` from the function and type which additional attributes and events it has.
  * See interface `ActionReturn` for more details.
  *
  * Docs: https://svelte.dev/docs#template-syntax-element-directives-use-action
  */
-export interface Action<Element = HTMLElement, Parameter = any, Attributes extends Record<string, any> = Record<never, any>> {
+export interface Action<Element = HTMLElement, Parameter = never, Attributes extends Record<string, any> = Record<never, any>> {
-	<Node extends Element>(node: Node, parameter?: Parameter): void | ActionReturn<Parameter, Attributes>;
+	<Node extends Element>(...args: [Parameter] extends [never] ? [node: Node] : undefined extends Parameter ? [node: Node, parameter?: Parameter] : [node: Node, parameter: Parameter]): void | ActionReturn<Parameter, Attributes>;
 }
+
+// Implementation notes:
+// - undefined extends X instead of X extends undefined makes this work better with both strict and nonstrict mode
+// - [X] extends [never] is needed, X extends never would reduce the whole resulting type to never and not to one of the condition outcomes

src/runtime/internal/lifecycle.ts

@@ -56,6 +56,17 @@ export function onDestroy(fn: () => any) {
 	get_current_component().$$.on_destroy.push(fn);
 }
 
+export interface EventDispatcher<EventMap extends Record<string, any>> {
+	// Implementation notes:
+	// - undefined extends X instead of X extends undefined makes this work better with both strict and nonstrict mode
+	// - [X] extends [never] is needed, X extends never would reduce the whole resulting type to never and not to one of the condition outcomes
+	<Type extends keyof EventMap>(
+		...args: [EventMap[Type]] extends [never] ? [type: Type, parameter?: null | undefined, options?: DispatchOptions] :
+		null extends EventMap[Type] ? [type: Type, parameter?: EventMap[Type], options?: DispatchOptions] :
+		undefined extends EventMap[Type] ? [type: Type, parameter?: EventMap[Type], options?: DispatchOptions] :
+		[type: Type, parameter: EventMap[Type], options?: DispatchOptions]): boolean;
+}
+
 export interface DispatchOptions {
 	cancelable?: boolean;
 }
@@ -70,18 +81,21 @@ export interface DispatchOptions {
  * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) 
  * property and can contain any type of data.
  * 
+ * The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:
+ * ```ts
+ * const dispatch = createEventDispatcher<{
+ *  loaded: never; // does not take a detail argument
+ *  change: string; // takes a detail argument of type string, which is required
+ *  optional: number | null; // takes an optional detail argument of type number
+ * }>();
+ * ```
+ * 
  * https://svelte.dev/docs#run-time-svelte-createeventdispatcher
  */
-export function createEventDispatcher<EventMap extends {} = any>(): <
+export function createEventDispatcher<EventMap extends Record<string, any> = any>(): EventDispatcher<EventMap> {
-	EventKey extends Extract<keyof EventMap, string>
->(
-	type: EventKey,
-	detail?: EventMap[EventKey],
-	options?: DispatchOptions
-) => boolean {
 	const component = get_current_component();
 
-	return (type: string, detail?: any, { cancelable = false } = {}): boolean => {
+	return ((type: string, detail?: any, { cancelable = false } = {}): boolean => {
 		const callbacks = component.$$.callbacks[type];
 
 		if (callbacks) {
@@ -95,7 +109,7 @@ export function createEventDispatcher<EventMap extends {} = any>(): <
 		}
 
 		return true;
-	};
+	}) as EventDispatcher<EventMap>;
 }
 
 /**

test/types/actions.ts

@@ -0,0 +1,153 @@
+import type { Action, ActionReturn } from '$runtime/action';
+
+// ---------------- Action
+
+const href: Action<HTMLAnchorElement> = (node) => {
+    node.href = '';
+    // @ts-expect-error
+    node.href = 1;
+};
+href;
+
+const required: Action<HTMLElement, boolean> = (node, param) => {
+    node;
+    param;
+};
+required(null as any, true);
+// @ts-expect-error (only in strict mode) boolean missing
+required(null as any);
+// @ts-expect-error no boolean
+required(null as any, 'string');
+
+const required1: Action<HTMLElement, boolean> = (node, param) => {
+    node;
+    param;
+    return {
+        update: (p) => p === true,
+        destroy: () => {}
+    };
+};
+required1;
+
+const required2: Action<HTMLElement, boolean> = (node) => {
+    node;
+};
+required2;
+
+const required3: Action<HTMLElement, boolean> = (node, param) => {
+    node;
+    param;
+    return {
+        // @ts-expect-error comparison always resolves to false
+        update: (p) => p === 'd',
+        destroy: () => {}
+    };
+};
+required3;
+
+const optional: Action<HTMLElement, boolean | undefined> = (node, param?) => {
+    node;
+    param;
+};
+optional(null as any, true);
+optional(null as any);
+// @ts-expect-error no boolean
+optional(null as any, 'string');
+
+const optional1: Action<HTMLElement, boolean | undefined> = (node, param?) => {
+    node;
+    param;
+    return {
+        update: (p) => p === true,
+        destroy: () => {}
+    };
+};
+optional1;
+
+const optional2: Action<HTMLElement, boolean | undefined> = (node) => {
+    node;
+};
+optional2;
+
+const optional3: Action<HTMLElement, boolean | undefined> = (node, param) => {
+    node;
+    param;
+};
+optional3;
+
+const optional4: Action<HTMLElement, boolean | undefined> = (node, param?) => {
+    node;
+    param;
+    return {
+        // @ts-expect-error comparison always resolves to false
+        update: (p) => p === 'd',
+        destroy: () => {}
+    };
+};
+optional4;
+
+const no: Action<HTMLElement, never> = (node) => {
+    node;
+};
+// @ts-expect-error second param
+no(null as any, true);
+no(null as any);
+// @ts-expect-error second param
+no(null as any, 'string');
+
+const no1: Action<HTMLElement, never> = (node) => {
+    node;
+    return {
+        destroy: () => {}
+    };
+};
+no1;
+
+// @ts-expect-error param given
+const no2: Action<HTMLElement, never> = (node, param?) => {};
+no2;
+
+// @ts-expect-error param given
+const no3: Action<HTMLElement, never> = (node, param) => {};
+no3;
+
+// @ts-expect-error update method given
+const no4: Action<HTMLElement, never> = (node) => {
+    return {
+        update: () => {},
+        destroy: () => {}
+    };
+};
+no4;
+
+// ---------------- ActionReturn
+
+const requiredReturn: ActionReturn<string> = {
+    update: (p) => p.toString()
+};
+requiredReturn;
+
+const optionalReturn: ActionReturn<boolean | undefined> = {
+    update: (p) => {
+        p === true;
+        // @ts-expect-error could be undefined
+        p.toString();
+    }
+};
+optionalReturn;
+
+const invalidProperty: ActionReturn = {
+    // @ts-expect-error invalid property
+    invalid: () => {}
+};
+invalidProperty;
+
+type Attributes = ActionReturn<never, { a: string; }>['$$_attributes'];
+const attributes: Attributes = { a: 'a' };
+attributes;
+// @ts-expect-error wrong type
+const invalidAttributes1: Attributes = { a: 1 };
+invalidAttributes1;
+// @ts-expect-error missing prop
+const invalidAttributes2: Attributes = {};
+invalidAttributes2;

test/types/create-event-dispatcher.ts

@@ -0,0 +1,43 @@
+import { createEventDispatcher } from '$runtime/internal/lifecycle';
+
+const dispatch = createEventDispatcher<{
+   loaded: never
+   change: string
+   valid: boolean
+   optional: number | null
+}>();
+
+// @ts-expect-error: dispatch invalid event
+dispatch('some-event');
+
+dispatch('loaded');
+dispatch('loaded', null);
+dispatch('loaded', undefined);
+dispatch('loaded', undefined, { cancelable: true });
+// @ts-expect-error: no detail accepted
+dispatch('loaded', 123);
+
+// @ts-expect-error: detail not provided
+dispatch('change');
+dispatch('change', 'string');
+dispatch('change', 'string', { cancelable: true });
+// @ts-expect-error: wrong type of detail
+dispatch('change', 123);
+// @ts-expect-error: wrong type of detail
+dispatch('change', undefined);
+
+dispatch('valid', true);
+dispatch('valid', true, { cancelable: true });
+// @ts-expect-error: wrong type of detail
+dispatch('valid', 'string');
+
+dispatch('optional');
+dispatch('optional', 123);
+dispatch('optional', 123, { cancelable: true });
+dispatch('optional', null);
+dispatch('optional', undefined);
+dispatch('optional', undefined, { cancelable: true });
+// @ts-expect-error: wrong type of optional detail
+dispatch('optional', 'string');
+// @ts-expect-error: wrong type of option
+dispatch('optional', undefined, { cancelabled: true });

test/types/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+        "rootDir": "../..",
+		"baseUrl": "../../",
+		"paths": {
+			"$runtime/*": ["src/runtime/*"]
+		},
+		// enable strictest options
+		"allowUnreachableCode": false,
+		"noFallthroughCasesInSwitch": true,
+		"noImplicitReturns": true,
+		"strict": true,
+	},
+	"include": ["."]
+}

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

@@ -9,14 +9,18 @@
 </script>
 
 <!-- should warn -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:click={noop} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:click={noop} aria-hidden="false" />
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <section on:click={noop} />
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <main on:click={noop} />
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <article on:click={noop} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <header on:click={noop} />
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <footer on:click={noop} />
@@ -31,24 +35,37 @@
 <input type="button" on:click={noop} />
 <input type={dynamicTypeValue} on:click={noop} />
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:click={noop} {...props} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:click={noop} on:keydown={noop} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:click={noop} on:keyup={noop} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:click={noop} on:keypress={noop} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:click={noop} on:keydown={noop} on:keyup={noop} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:click={noop} on:keyup={noop} on:keypress={noop} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:click={noop} on:keypress={noop} on:keydown={noop} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:click={noop} on:keydown={noop} on:keyup={noop} on:keypress={noop} />
 
 <input on:click={noop} type="hidden" />
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:click={noop} aria-hidden />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:click={noop} aria-hidden="true" />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:click={noop} aria-hidden="false" on:keydown={noop} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:click={noop} aria-hidden={dynamicAriaHiddenValue} />
 
 <div on:click={noop} role="presentation" />
 <div on:click={noop} role="none" />
 <div on:click={noop} role={dynamicRole} />
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <svelte:element this={Math.random() ? 'button' : 'div'} on:click={noop} />

test/validator/samples/a11y-click-events-have-key-events/warnings.json

@@ -3,11 +3,11 @@
 		"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.",
 		"start": {
-			"line": 12,
+			"line": 13,
 			"column": 0
 		},
 		"end": {
-			"line": 12,
+			"line": 13,
 			"column": 23
 		}
 	},
@@ -15,11 +15,11 @@
 		"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.",
 		"start": {
-			"line": 13,
+			"line": 15,
 			"column": 0
 		},
 		"end": {
-			"line": 13,
+			"line": 15,
 			"column": 43
 		}
 	},
@@ -27,11 +27,11 @@
 		"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.",
 		"start": {
-			"line": 15,
+			"line": 18,
 			"column": 0
 		},
 		"end": {
-			"line": 15,
+			"line": 18,
 			"column": 27
 		}
 	},
@@ -39,11 +39,11 @@
 		"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.",
 		"start": {
-			"line": 17,
+			"line": 20,
 			"column": 0
 		},
 		"end": {
-			"line": 17,
+			"line": 20,
 			"column": 24
 		}
 	},
@@ -51,11 +51,11 @@
 		"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.",
 		"start": {
-			"line": 19,
+			"line": 21,
 			"column": 0
 		},
 		"end": {
-			"line": 19,
+			"line": 21,
 			"column": 27
 		}
 	},
@@ -63,11 +63,11 @@
 		"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.",
 		"start": {
-			"line": 20,
+			"line": 23,
 			"column": 0
 		},
 		"end": {
-			"line": 20,
+			"line": 23,
 			"column": 26
 		}
 	},
@@ -75,11 +75,11 @@
 		"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.",
 		"start": {
-			"line": 22,
+			"line": 24,
 			"column": 0
 		},
 		"end": {
-			"line": 22,
+			"line": 24,
 			"column": 26
 		}
 	}

test/validator/samples/a11y-mouse-events-have-key-events/input.svelte

@@ -7,9 +7,15 @@
 	};
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:mouseover={() => void 0} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:mouseover={() => void 0} on:focus={() => void 0} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:mouseover={() => void 0} {...otherProps} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:mouseout={() => void 0} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:mouseout={() => void 0} on:blur={() => void 0} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:mouseout={() => void 0} {...otherProps} />

test/validator/samples/a11y-mouse-events-have-key-events/warnings.json

@@ -3,48 +3,48 @@
         "code": "a11y-mouse-events-have-key-events",
         "end": {
             "column": 35,
-            "line": 10
+            "line": 11
         },
         "message": "A11y: on:mouseover must be accompanied by on:focus",
         "start": {
             "column": 0,
-            "line": 10
+            "line": 11
         }
     },
     {
         "code": "a11y-mouse-events-have-key-events",
         "end": {
             "column": 51,
-            "line": 12
+            "line": 15
         },
         "message": "A11y: on:mouseover must be accompanied by on:focus",
         "start": {
             "column": 0,
-            "line": 12
+            "line": 15
         }
     },
     {
         "code": "a11y-mouse-events-have-key-events",
         "end": {
             "column": 34,
-            "line": 13
+            "line": 17
         },
         "message": "A11y: on:mouseout must be accompanied by on:blur",
         "start": {
             "column": 0,
-            "line": 13
+            "line": 17
         }
     },
     {
         "code": "a11y-mouse-events-have-key-events",
         "end": {
             "column": 50,
-            "line": 15
+            "line": 21
         },
         "message": "A11y: on:mouseout must be accompanied by on:blur",
         "start": {
             "column": 0,
-            "line": 15
+            "line": 21
         }
     }
 ]

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

@@ -0,0 +1,18 @@
+<script>
+	const dynamicRole = "button";
+</script>
+
+<!-- valid -->
+<button on:click={() => {}} />
+<!-- svelte-ignore a11y-interactive-supports-focus -->
+<div on:keydown={() => {}} role="button" />
+<input type="text" on:click={() => {}} />
+<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 -->
+<a on:mousedown={() => {}} on:mouseup={() => {}} on:copy={() => {}}>link</a>

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

@@ -0,0 +1,26 @@
+[
+	{
+		"code": "a11y-no-static-element-interactions",
+		"end": {
+			"column": 29,
+			"line": 16
+		},
+		"message": "A11y: <div> with keydown handler must have an ARIA role",
+		"start": {
+			"column": 0,
+			"line": 16
+		}
+	},
+	{
+		"code": "a11y-no-static-element-interactions",
+		"end": {
+			"column": 76,
+			"line": 18
+		},
+		"message": "A11y: <a> with mousedown, mouseup handlers must have an ARIA role",
+		"start": {
+			"column": 0,
+			"line": 18
+		}
+	}
+]

test/validator/samples/slot-warning-ignore/input.svelte

@@ -4,5 +4,6 @@
 
 <Component>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div slot='foo' on:click>hi!</div>
 </Component>

test/validator/samples/slot-warning/input.svelte

@@ -3,5 +3,6 @@
 </script>
 
 <Component>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div slot='foo' on:click>hi!</div>
 </Component>

test/validator/samples/slot-warning/warnings.json

@@ -4,11 +4,11 @@
 		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.",
 		"start": {
 			"column": 1,
-			"line": 6
+			"line": 7
 		},
 		"end": {
 			"column": 35,
-			"line": 6
+			"line": 7
 		}
 	}
 ]

test/validator/samples/slot-warning2/input.svelte

@@ -4,5 +4,6 @@
 
 <Component>
 	<!-- svelte-ignore unrelated-warning -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div slot='foo' on:click>hi!</div>
 </Component>

test/validator/samples/slot-warning2/warnings.json

@@ -4,11 +4,11 @@
 		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.",
 		"start": {
 			"column": 1,
-			"line": 7
+			"line": 8
 		},
 		"end": {
 			"column": 35,
-			"line": 7
+			"line": 8
 		}
 	}
 ]