feat: implement a11y `aria-activedescendant-has-tabindex` (#8172)

#820

site/content/docs/06-accessibility-warnings.md

@@ -19,6 +19,18 @@ Enforce no `accesskey` on element. Access keys are HTML attributes that allow we
 
 ---
 
+### `a11y-aria-activedescendant-has-tabindex`
+
+An element with `aria-activedescendant` must be tabbable, so it must either have an inherent `tabindex` or declare `tabindex` as an attribute.
+
+```sv
+<!-- A11y: Elements with attribute aria-activedescendant should have tabindex value -->
+<div aria-activedescendant="some-id" />
+
+```
+
+---
+
 ### `a11y-aria-attributes`
 
 Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `aria-*` props.

src/compiler/compile/compiler_warnings.ts

@@ -187,6 +187,10 @@ export default {
 		code: 'a11y-no-noninteractive-tabindex',
 		message: 'A11y: noninteractive element cannot have nonnegative tabIndex value'
 	},
+	a11y_aria_activedescendant_has_tabindex: {
+		code: 'a11y-aria-activedescendant-has-tabindex',
+		message: 'A11y: Elements with attribute aria-activedescendant should have 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

@@ -484,6 +484,11 @@ export default class Element extends Node {
 						component.warn(attribute, compiler_warnings.a11y_incorrect_attribute_type(schema, name));
 					}
 				}
+
+				// aria-activedescendant-has-tabindex
+				if (name === 'aria-activedescendant' && !is_interactive_element(this.name, attribute_map) && !attribute_map.has('tabindex')) {
+			    component.warn(attribute, compiler_warnings.a11y_aria_activedescendant_has_tabindex);
+				}
 			}
 
 			// aria-role

test/validator/samples/a11y-aria-activedescendant/input.svelte

@@ -0,0 +1,17 @@
+<!-- VALID -->
+<input />
+<input tabindex="0" />
+<input aria-activedescendant="some-id" />
+<input aria-activedescendant="some-id" tabindex={0} />
+<input aria-activedescendant="some-id" tabindex={1} />
+<input aria-activedescendant="some-id" tabindex="0" />
+<input aria-activedescendant="some-id" tabindex={-1} />
+<input aria-activedescendant="some-id" tabindex="-1" />
+
+<div />
+<div aria-activedescendant="some-id" role="tablist" tabindex={-1} />
+<div aria-activedescendant="some-id" role="tablist" tabindex="-1" />
+
+<!-- INVALID -->
+<div aria-activedescendant="some-id" />
+

test/validator/samples/a11y-aria-activedescendant/warnings.json

@@ -0,0 +1,17 @@
+[
+  {
+    "code": "a11y-aria-activedescendant-has-tabindex",
+    "end": {
+      "character": 568,
+      "column": 36,
+      "line": 16
+    },
+    "message": "A11y: Elements with attribute aria-activedescendant should have tabindex value",
+    "pos": 537,
+    "start": {
+      "character": 537,
+      "column": 5,
+      "line": 16
+    }
+  }
+]