[feat] Add a11y rule to check no tabindex in nointeractive element

src/compiler/compile/compiler_warnings.ts

@@ -179,6 +179,10 @@ export default {
 		code: 'a11y-missing-content',
 		message: `A11y: <${name}> element should have child content`
 	}),
+	a11y_no_nointeractive_tabindex: {
+		code: 'a11y-no-nointeractive-tabindex',
+		message: 'A11y: not interactive element cannot have positive tabIndex value'
+	},
 	redundant_event_modifier_for_touch: {
 		code: 'redundant-event-modifier',
 		message: 'Touch event handlers that don\'t use the \'event\' object are passive by default'

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_interactive_element, is_non_interactive_roles, is_presentation_role } from '../utils/a11y';
+import { is_interactive_element, is_non_interactive_roles, is_presentation_role, is_interactive_roles } from '../utils/a11y';
 
 const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|svg|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
 
@@ -551,8 +551,15 @@ export default class Element extends Node {
 				}
 			}
 		});
-	}
 
+		// no-nointeractive-tabindex
+		if (!is_interactive_element(this.name, attribute_map) && !is_interactive_roles(attribute_map.get('role')?.get_static_value() as ARIARoleDefintionKey)) {
+			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_nointeractive_tabindex);
+			}
+		}
+	}
 
 	validate_special_cases() {
 		const { component, attributes, handlers } = this;

src/compiler/compile/utils/a11y.ts

@@ -51,6 +51,10 @@ export function is_non_interactive_roles(role: ARIARoleDefintionKey) {
 	return non_interactive_roles.has(role);
 }
 
+export function is_interactive_roles(role: ARIARoleDefintionKey) {
+	return interactive_roles.has(role);
+}
+
 const presentation_roles = new Set(['presentation', 'none']);
 
 export function is_presentation_role(role: ARIARoleDefintionKey) {

test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte

@@ -0,0 +1,14 @@
+<!-- valid -->
+<button />
+<button tabindex='0' />
+<button tabindex='{0}' />
+<div />
+<div tabindex='-1' />
+<div role='button' tabindex='0' />
+<div role='article' tabindex='-1' />
+<article tabindex='-1' />
+<!-- invalid -->
+<div tabindex='0' />
+<div role='article' tabindex='0' />
+<article tabindex='0' />
+<article tabindex='{0}' />

test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json

@@ -0,0 +1,62 @@
+[
+	{
+		"code": "a11y-no-nointeractive-tabindex",
+		"end": {
+			"character": 241,
+			"column": 20,
+			"line": 11
+		},
+		"message": "A11y: not interactive element cannot have positive tabIndex value",
+		"pos": 221,
+		"start": {
+			"character": 221,
+			"column": 0,
+			"line": 11
+		}
+	},
+	{
+		"code": "a11y-no-nointeractive-tabindex",
+		"end": {
+			"character": 277,
+			"column": 35,
+			"line": 12
+		},
+		"message": "A11y: not interactive element cannot have positive tabIndex value",
+		"pos": 242,
+		"start": {
+			"character": 242,
+			"column": 0,
+			"line": 12
+		}
+	},
+	{
+		"code": "a11y-no-nointeractive-tabindex",
+		"end": {
+			"character": 302,
+			"column": 24,
+			"line": 13
+		},
+		"message": "A11y: not interactive element cannot have positive tabIndex value",
+		"pos": 278,
+		"start": {
+			"character": 278,
+			"column": 0,
+			"line": 13
+		}
+	},
+	{
+		"code": "a11y-no-nointeractive-tabindex",
+		"end": {
+			"character": 329,
+			"column": 26,
+			"line": 14
+		},
+		"message": "A11y: not interactive element cannot have positive tabIndex value",
+		"pos": 303,
+		"start": {
+			"character": 303,
+			"column": 0,
+			"line": 14
+		}
+	}
+]

test/validator/samples/a11y-tabindex-no-positive/input.svelte

@@ -2,7 +2,7 @@
 	let foo;
 </script>
 
-<div tabindex='-1'/>
-<div tabindex='0'/>
-<div tabindex='1'/>
-<div tabindex='{foo}'/>
+<button tabindex='-1'/>
+<button tabindex='0'/>
+<button tabindex='1'/>
+<button tabindex='{foo}'/>

test/validator/samples/a11y-tabindex-no-positive/warnings.json

@@ -4,14 +4,14 @@
 		"message": "A11y: avoid tabindex values above zero",
 		"start": {
 			"line": 7,
-			"column": 5,
-			"character": 76
+			"column": 8,
+			"character": 85
 		},
 		"end": {
 			"line": 7,
-			"column": 17,
-			"character": 88
+			"column": 20,
+			"character": 97
 		},
-		"pos": 76
+		"pos": 85
 	}
 ]