add a11y configuration for checking through control and input component

Author: tanhauhau

site/content/docs/04-compile-time.md

@@ -84,6 +84,7 @@ The following options can be passed to the compiler. None are required:
 | `cssOutputFilename` | `null` | A `string` used for your CSS sourcemap.
 | `sveltePath` | `"svelte"` | The location of the `svelte` package. Any imports from `svelte` or `svelte/[module]` will be modified accordingly.
 | `namespace` | `"html"` | The namespace of the element; e.g., `"mathml"`, `"svg"`, `"foreign"`.
+| `a11y` | `null` | Rule configurations for accessibility checks. Check [individual rules](#accessibility-warnings) for more details.
 
 ---
 

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

@@ -128,6 +128,55 @@ There are two supported ways to associate a label with a control:
 <label>A</label>
 ```
 
+If your label and input are Svelte components, you can configure the rule to be aware of your custom components.
+
+```svelte
+<CustomInputLabel label="Surname">
+  <CustomInput type="text" bind:value />
+</CustomInputLabel>
+```
+
+And the configuration:
+
+```js
+// svelte.config.js
+export default {
+  compilerOptions: {
+		a11y: {
+			rules: {
+				'label-has-associated-control': {
+					labelComponents: ['CustomInputLabel'],
+      		controlComponents: ['CustomInput'],
+				}
+			}
+		}
+	},
+}
+```
+
+**Configuration**
+
+```js
+// svelte.config.js
+export default {
+  compilerOptions: {
+		a11y: {
+			rules: {
+				'label-has-associated-control': {
+					labelComponents: ['CustomInputLabel'],
+      		controlComponents: ['CustomInput'],
+      		depth: 3,
+				}
+			}
+		}
+	},
+}
+```
+
+- `labelComponents` is a list of Svelte component names that should be checked for an associated control.
+- `controlComponents` is a list of Svelte component names that will output an input element.
+- `depth` (default 3, max 25) is an integer that determines how deep within the label element the rule should look for an element to determine if the label element has associated control.
+
 ---
 
 ### `a11y-media-has-caption`

src/compiler/compile/index.ts

@@ -32,7 +32,8 @@ const valid_options = [
 	'loopGuardTimeout',
 	'preserveComments',
 	'preserveWhitespace',
-	'cssHash'
+	'cssHash',
+	'a11y'
 ];
 
 function validate_options(options: CompileOptions, warnings: Warning[]) {

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, may_contain_input_child } 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)$/;
 
@@ -66,17 +66,6 @@ const a11y_required_content = new Set([
 	'h6'
 ]);
 
-const a11y_labelable = new Set([
-	'button',
-	'input',
-	'keygen',
-	'meter',
-	'output',
-	'progress',
-	'select',
-	'textarea'
-]);
-
 const a11y_nested_implicit_semantics = new Map([
 	['header', 'banner'],
 	['footer', 'contentinfo']
@@ -346,12 +335,12 @@ export default class Element extends Node {
 				}
 
 				case 'Transition':
-				{
-					const transition = new Transition(component, this, scope, node);
-					if (node.intro) this.intro = transition;
-					if (node.outro) this.outro = transition;
-					break;
-				}
+					{
+						const transition = new Transition(component, this, scope, node);
+						if (node.intro) this.intro = transition;
+						if (node.outro) this.outro = transition;
+						break;
+					}
 
 				case 'Animation':
 					this.animation = new Animation(component, this, scope, node);
@@ -486,7 +475,7 @@ export default class Element extends Node {
 				}
 
 				const value = attribute.get_static_value() as ARIARoleDefintionKey;
-				
+
 				if (value && aria_role_abstract_set.has(value)) {
 					component.warn(attribute, compiler_warnings.a11y_no_abstract_role(value));
 				} else if (value && !aria_role_set.has(value)) {
@@ -626,24 +615,11 @@ export default class Element extends Node {
 		}
 
 		if (this.name === 'label') {
-			const has_input_child = (children: INode[]) => {
-				if (children.some(child => (child instanceof Element && (a11y_labelable.has(child.name) || child.name === 'slot')))) {
-					return true;
-				}
-
-				for (const child of children) {
-					if (!('children' in child) || child.children.length === 0) {
-						continue;
-					}
-					if (has_input_child(child.children)) {
-						return true;
-					}
-				}
-
-				return false;
-			};
+			const rule_options = component.compile_options.a11y?.rules?.['label-has-associated-control'];
+			// magic number inspired from https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/src/rules/label-has-associated-control.js
+			const recursion_depth = Math.min(rule_options?.depth ?? 3, 25);
 
-			if (!attribute_map.has('for') && !has_input_child(this.children)) {
+			if (!attribute_map.has('for') && !may_contain_input_child(this, recursion_depth, rule_options?.controlComponents)) {
 				component.warn(this, compiler_warnings.a11y_label_has_associated_control);
 			}
 		}

src/compiler/compile/nodes/InlineComponent.ts

@@ -10,6 +10,8 @@ import TemplateScope from './shared/TemplateScope';
 import { INode } from './interfaces';
 import { TemplateNode } from '../../interfaces';
 import compiler_errors from '../compiler_errors';
+import compiler_warnings from '../compiler_warnings';
+import { may_contain_input_child } from '../utils/a11y';
 
 export default class InlineComponent extends Node {
 	type: 'InlineComponent';
@@ -155,11 +157,24 @@ export default class InlineComponent extends Node {
 		}
 
 		this.children = map_children(component, this, this.scope, children);
+
+		this.validate();
 	}
 
 	get slot_template_name() {
 		return this.attributes.find(attribute => attribute.name === 'slot').get_static_value() as string;
 	}
+
+	validate() {
+		const label_has_associated_control_rule_options = this.component.compile_options.a11y?.rules?.['label-has-associated-control'];
+		if (label_has_associated_control_rule_options?.labelComponents?.includes(this.name)) {
+			// magic number inspired from https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/src/rules/label-has-associated-control.js
+			const recursion_depth = Math.min(label_has_associated_control_rule_options?.depth ?? 3, 25);
+			if (!may_contain_input_child(this, recursion_depth, label_has_associated_control_rule_options?.controlComponents)) {
+				this.component.warn(this, compiler_warnings.a11y_label_has_associated_control);
+			}
+		}
+	}
 }
 
 function not_whitespace_text(node) {

src/compiler/compile/utils/a11y.ts

@@ -6,6 +6,7 @@ import {
 } from 'aria-query';
 import { AXObjects, elementAXObjects } from 'axobject-query';
 import Attribute from '../nodes/Attribute';
+import { INode } from '../nodes/interfaces';
 
 const roles = [...roles_map.keys()];
 
@@ -99,8 +100,8 @@ function match_schema(
 			schema_attribute.value &&
 			schema_attribute.value !== attribute.get_static_value()
 		) {
-return false;
-}
+			return false;
+		}
 		return true;
 	});
 }
@@ -135,3 +136,42 @@ export function is_interactive_element(
 
 	return false;
 }
+
+const a11y_labelable = new Set([
+	'button',
+	'input',
+	'keygen',
+	'meter',
+	'output',
+	'progress',
+	'select',
+	'textarea'
+]);
+
+export function may_contain_input_child(
+	root: INode,
+	max_depth: number = 1,
+	additional_component_names: string[] | undefined
+): boolean {
+	function traverse_children(
+		node: INode,
+		depth: number
+	): boolean {
+		// Bail when max_depth is exceeded.
+		if (depth > max_depth) {
+			return false;
+		}
+		if ('children' in node) {
+			for (const child of node.children) {
+				if ('name' in child && (a11y_labelable.has(child.name) || child.name === 'slot' || additional_component_names?.includes(child.name))) {
+					return true;
+				}
+				if (traverse_children(child, depth + 1)) {
+					return true;
+				}
+			}
+		}
+		return false;
+	}
+	return traverse_children(root, 1);
+}

src/compiler/interfaces.ts

@@ -41,14 +41,14 @@ interface DebugTag extends BaseNode {
 }
 
 export type DirectiveType = 'Action'
-| 'Animation'
-| 'Binding'
-| 'Class'
-| 'StyleDirective'
-| 'EventHandler'
-| 'Let'
-| 'Ref'
-| 'Transition';
+	| 'Animation'
+	| 'Binding'
+	| 'Class'
+	| 'StyleDirective'
+	| 'EventHandler'
+	| 'Let'
+	| 'Ref'
+	| 'Transition';
 
 interface BaseDirective extends BaseNode {
 	type: DirectiveType;
@@ -88,16 +88,16 @@ export interface Transition extends BaseExpressionDirective {
 export type Directive = BaseDirective | BaseExpressionDirective | Transition;
 
 export type TemplateNode = Text
-| ConstTag
-| DebugTag
-| MustacheTag
-| BaseNode
-| Element
-| Attribute
-| SpreadAttribute
-| Directive
-| Transition
-| Comment;
+	| ConstTag
+	| DebugTag
+	| MustacheTag
+	| BaseNode
+	| Element
+	| Attribute
+	| SpreadAttribute
+	| Directive
+	| Transition
+	| Comment;
 
 export interface Parser {
 	readonly template: string;
@@ -186,6 +186,16 @@ export interface CompileOptions {
 
 	preserveComments?: boolean;
 	preserveWhitespace?: boolean;
+
+	a11y?: {
+		rules?: {
+			'label-has-associated-control'?: {
+				labelComponents?: string[];
+				controlComponents?: string[];
+				depth?: number;
+			};
+		};
+	};
 }
 
 export interface ParserOptions {

test/validator/samples/a11y-label-has-associated-control-3/input.svelte

@@ -0,0 +1,13 @@
+<script>
+	import MyLabel from "./MyLabel.svelte";
+	import MyInput from "./MyInput.svelte";
+	import CustomLabel from "./CustomLabel.svelte";
+</script>
+
+<MyLabel>xxx</MyLabel>
+<CustomLabel>xxx</CustomLabel>
+<MyLabel><input /></MyLabel>
+<MyLabel><slot /></MyLabel>
+<MyLabel><MyInput /></MyLabel>
+<MyLabel><div><MyInput /></div></MyLabel>
+<label><div><MyInput /></div></label>

test/validator/samples/a11y-label-has-associated-control-3/options.json

@@ -0,0 +1,10 @@
+{
+  "a11y": {
+    "rules": {
+      "label-has-associated-control": {
+        "labelComponents": ["MyLabel"],
+        "controlComponents": ["MyInput"]
+      }
+    }
+  }
+}

test/validator/samples/a11y-label-has-associated-control-3/warnings.json

@@ -0,0 +1,17 @@
+[
+	{
+		"code": "a11y-label-has-associated-control",
+		"message": "A11y: A form label must be associated with a control.",
+		"pos": 151,
+		"start": {
+			"character": 151,
+			"column": 0,
+			"line": 7
+		},
+		"end": {
+			"character": 173,
+			"column": 22,
+			"line": 7
+		}
+	}
+]