[feature] add a11y checker for no-nointeractive-tabindex

src/compiler/compile/nodes/Element.ts

@@ -25,6 +25,7 @@ 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_roles } from '../utils/is_interactive_role';
 
 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,6 +552,23 @@ export default class Element extends Node {
 				}
 			}
 		});
+
+		// no-nointeractive-tabindex
+		if (!is_interactive_element(this)) {
+			const roleValue = this.attributes.find(attr => attr.name === 'role')?.get_static_value()?.toString();
+			if (!roleValue || !is_interactive_roles(roleValue)) {
+				const _tabIndexValue = this.attributes.find(attr => attr.name === 'tabindex');
+				if (_tabIndexValue) {
+					const tabIndexValue = Number(_tabIndexValue.get_static_value());
+					if (!isNaN(tabIndexValue) && tabIndexValue >= 0) {
+						component.warn(this, {
+							code: 'a11y-no-nointeractive-tabindex',
+							message: 'A11y: not interactive element cannot have positive tabIndex value'
+						});
+					}
+				}
+			}
+		}
 	}