vigla 0.0.0 → 0.2.0

package/src/compiler/analysis/validate/a11y/fuzzy.ts

@@ -0,0 +1,123 @@
+const nonWord = /[^\w, ]+/;
+
+function grams(value: string, size: number): Map<string, number> {
+	const padded = `-${value.replace(nonWord, '')}-`;
+	const counts = new Map<string, number>();
+	for (let start = 0; start + size <= padded.length; start++) {
+		const gram = padded.slice(start, start + size);
+		counts.set(gram, (counts.get(gram) ?? 0) + 1);
+	}
+	return counts;
+}
+
+function norm(counts: ReadonlyMap<string, number>): number {
+	let squares = 0;
+	for (const count of counts.values()) squares += count * count;
+	return Math.sqrt(squares);
+}
+
+function distance(a: string, b: string): number {
+	let row = Array.from({ length: a.length + 1 }, (_, index) => index);
+	for (let i = 1; i <= b.length; i++) {
+		const next = [i];
+		for (let j = 1; j <= a.length; j++) {
+			const cost = a.charAt(j - 1) === b.charAt(i - 1) ? 0 : 1;
+			next[j] = Math.min(
+				(row[j] as number) + 1,
+				(next[j - 1] as number) + 1,
+				(row[j - 1] as number) + cost
+			);
+		}
+		row = next;
+	}
+	return row[a.length] as number;
+}
+
+function similarity(a: string, b: string): number {
+	return 1 - distance(a, b) / Math.max(a.length, b.length);
+}
+
+interface Ranked {
+	readonly index: number;
+	readonly score: number;
+}
+
+class Grams {
+	readonly #values: readonly string[];
+	readonly #norms: number[] = [];
+	readonly #postings = new Map<string, [number, number][]>();
+	readonly #size: number;
+
+	constructor(size: number, values: readonly string[]) {
+		this.#size = size;
+		this.#values = values;
+		for (const value of values) {
+			const counts = grams(value, size);
+			for (const [gram, count] of counts) {
+				const posting: [number, number] = [this.#norms.length, count];
+				const list = this.#postings.get(gram);
+				if (list === undefined) this.#postings.set(gram, [posting]);
+				else list.push(posting);
+			}
+			this.#norms.push(norm(counts));
+		}
+	}
+
+	best(value: string): Ranked | null {
+		const counts = grams(value, this.#size);
+		const dots = new Map<number, number>();
+		for (const [gram, count] of counts) {
+			for (const [index, other] of this.#postings.get(gram) ?? []) {
+				dots.set(index, (dots.get(index) ?? 0) + count * other);
+			}
+		}
+		const length = norm(counts);
+		const ranked = [...dots.keys()]
+			.sort((a, b) => a - b)
+			.map((index) => ({
+				index,
+				score: (dots.get(index) as number) / (length * (this.#norms[index] as number))
+			}))
+			.sort((a, b) => b.score - a.score)
+			.slice(0, 50)
+			.map(({ index }) => ({ index, score: similarity(this.#values[index] as string, value) }))
+			.sort((a, b) => b.score - a.score);
+		return ranked[0] ?? null;
+	}
+}
+
+class Candidates {
+	readonly original = new Map<string, string>();
+	readonly sizes: readonly Grams[];
+	readonly values: readonly string[];
+
+	constructor(names: readonly string[]) {
+		for (const name of names) {
+			const lower = name.toLowerCase();
+			if (!this.original.has(lower)) this.original.set(lower, name);
+		}
+		this.values = [...this.original.keys()];
+		this.sizes = [new Grams(3, this.values), new Grams(2, this.values)];
+	}
+}
+
+const cache = new WeakMap<readonly string[], Candidates>();
+
+export function closest(name: string, names: readonly string[]): string | null {
+	if (names.length === 0) return null;
+	let candidates = cache.get(names);
+	if (candidates === undefined) {
+		candidates = new Candidates(names);
+		cache.set(names, candidates);
+	}
+	const value = name.toLowerCase();
+	const exact = candidates.original.get(value);
+	if (exact) return exact;
+	for (const index of candidates.sizes) {
+		const best = index.best(value);
+		if (best === null) continue;
+		if (best.score <= 0.7) return null;
+		return candidates.original.get(candidates.values[best.index] as string) ?? null;
+	}
+	return null;
+}

package/src/compiler/analysis/validate/a11y/index.ts

@@ -0,0 +1,24 @@
+import type { DynamicElement, Element, Namespace, Node } from '../../../ir/nodes.ts';
+import type { Report } from '../report.ts';
+import { checkAttributes, type Pass } from './attributes.ts';
+import { checkElementRules } from './elements.ts';
+import { collect } from './facts.ts';
+import { checkInteractions } from './interactions.ts';
+import { interactivity } from './roles.ts';
+
+export interface ElementContext {
+	readonly path: readonly Node[];
+	readonly namespace: Namespace;
+}
+
+export function checkElement(
+	element: Element | DynamicElement,
+	context: ElementContext,
+	report: Report
+): void {
+	const facts = collect(element);
+	const pass: Pass = { facts, interactivity: interactivity(facts), path: context.path, report };
+	checkAttributes(pass);
+	checkInteractions(pass);
+	checkElementRules(pass);
+}

package/src/compiler/analysis/validate/a11y/interactions.ts

@@ -0,0 +1,125 @@
+import { aria } from 'aria-query';
+import type { Pass } from './attributes.ts';
+import { isHidden, list, staticText } from './facts.ts';
+import {
+	effectiveRole,
+	implicitRole,
+	isAbstract,
+	isInteractive,
+	isKnown,
+	isNonInteractive,
+	isPresentation,
+	supportedProps
+} from './roles.ts';
+import { interactiveHandlers, recommendedInteractiveHandlers } from './tables.ts';
+
+const ariaProperties: ReadonlySet<string> = new Set(aria.keys());
+
+export function checkInteractions(pass: Pass): void {
+	const { facts, report } = pass;
+	const { element, handlers, map, name } = facts;
+	const interactive = pass.interactivity === 'interactive';
+	const nonInteractive = pass.interactivity === 'non-interactive';
+	const role = map.get('role');
+	const roleValue = effectiveRole(staticText(role));
+
+	if (handlers.has('click')) {
+		const nonPresentation = roleValue !== null && !isPresentation(roleValue);
+		if (
+			!facts.dynamic &&
+			!isHidden(facts) &&
+			(role === undefined || nonPresentation) &&
+			!interactive &&
+			!facts.spread &&
+			!handlers.has('keydown') &&
+			!handlers.has('keyup') &&
+			!handlers.has('keypress')
+		) {
+			report.warn('a11y_click_events_have_key_events', element, { element: name });
+		}
+	}
+
+	const effective = role === undefined ? implicitRole(facts) : roleValue;
+
+	if (!facts.dynamic && !interactive && !isInteractive(roleValue)) {
+		const tabindex = map.get('tabindex');
+		const value = staticText(tabindex);
+		if (tabindex !== undefined && (value === null || Number(value) >= 0)) {
+			report.warn('a11y_no_noninteractive_tabindex', element);
+		}
+	}
+
+	if (typeof effective === 'string' && isKnown(effective)) {
+		const props = supportedProps(effective) ?? {};
+		for (const attribute of facts.attributes) {
+			if (!ariaProperties.has(attribute.name) || attribute.name in props) continue;
+			if (role === undefined) {
+				report.warn('a11y_role_supports_aria_props_implicit', attribute, {
+					attribute: attribute.name,
+					role: effective,
+					name
+				});
+			} else {
+				report.warn('a11y_role_supports_aria_props', attribute, {
+					attribute: attribute.name,
+					role: effective
+				});
+			}
+		}
+	}
+
+	const hidden = isHidden(facts);
+	if (
+		!facts.spread &&
+		!facts.contenteditable &&
+		!hidden &&
+		!isPresentation(roleValue) &&
+		((!interactive && isNonInteractive(roleValue)) || (nonInteractive && role === undefined)) &&
+		[...handlers].some((handler) => recommendedInteractiveHandlers.has(handler))
+	) {
+		report.warn('a11y_no_noninteractive_element_interactions', element, { element: name });
+	}
+
+	if (
+		!facts.spread &&
+		(role === undefined || roleValue !== null) &&
+		!hidden &&
+		!isPresentation(roleValue) &&
+		!interactive &&
+		!isInteractive(roleValue) &&
+		!nonInteractive &&
+		!isNonInteractive(roleValue) &&
+		!isAbstract(roleValue)
+	) {
+		const used = [...handlers].filter((handler) => interactiveHandlers.has(handler));
+		if (used.length > 0) {
+			report.warn('a11y_no_static_element_interactions', element, {
+				element: name,
+				handler: list(used)
+			});
+		}
+	}
+
+	if (
+		!facts.spread &&
+		handlers.has('mouseover') &&
+		!handlers.has('focus') &&
+		!handlers.has('focusin')
+	) {
+		report.warn('a11y_mouse_events_have_key_events', element, {
+			event: 'mouseover',
+			accompanied_by: 'focus'
+		});
+	}
+	if (
+		!facts.spread &&
+		handlers.has('mouseout') &&
+		!handlers.has('blur') &&
+		!handlers.has('focusout')
+	) {
+		report.warn('a11y_mouse_events_have_key_events', element, {
+			event: 'mouseout',
+			accompanied_by: 'blur'
+		});
+	}
+}

package/src/compiler/analysis/validate/a11y/roles.ts

@@ -0,0 +1,182 @@
+/// <reference path="./axobject-query.d.ts" />
+import { elementRoles, roles, type ARIARoleDefinitionKey } from 'aria-query';
+import { AXObjectRoles, AXObjects, elementAXObjects } from 'axobject-query';
+import { staticText, staticValue, type Facts } from './facts.ts';
+import {
+	comboboxIfList,
+	implicitSemantics,
+	inputRoles,
+	menuitemRoles,
+	presentationRoles
+} from './tables.ts';
+
+export const ariaRoles: readonly string[] = roles.keys();
+
+const knownRoles: ReadonlySet<string> = new Set(ariaRoles);
+
+const abstractRoles: ReadonlySet<string> = new Set(
+	ariaRoles.filter((role) => roles.get(role as ARIARoleDefinitionKey)?.abstract)
+);
+
+const concreteRoles = ariaRoles.filter((role) => !abstractRoles.has(role));
+
+const widgetLike = new Set(['toolbar', 'tabpanel', 'generic', 'cell']);
+
+const nonInteractiveRoles: ReadonlySet<string> = new Set([
+	...concreteRoles.filter(
+		(name) =>
+			!widgetLike.has(name) &&
+			!roles
+				.get(name as ARIARoleDefinitionKey)
+				?.superClass.some((chain) => chain.includes('widget') || chain.includes('window'))
+	),
+	'progressbar'
+]);
+
+const interactiveRoles: ReadonlySet<string> = new Set(
+	concreteRoles.filter((name) => !nonInteractiveRoles.has(name) && name !== 'generic')
+);
+
+export function isKnown(role: string): boolean {
+	return knownRoles.has(role);
+}
+
+export function isAbstract(role: string | null): boolean {
+	return role !== null && abstractRoles.has(role);
+}
+
+export function isInteractive(role: string | null): boolean {
+	return role !== null && interactiveRoles.has(role);
+}
+
+export function isNonInteractive(role: string | null): boolean {
+	return role !== null && nonInteractiveRoles.has(role);
+}
+
+export function isPresentation(role: string | null): boolean {
+	return role !== null && presentationRoles.has(role);
+}
+
+interface Schema {
+	readonly name: string;
+	readonly attributes?: readonly { readonly name: string; readonly value?: string | number }[];
+}
+
+class Schemas {
+	readonly #byName = new Map<string, Schema[]>();
+
+	add(schema: Schema): void {
+		const list = this.#byName.get(schema.name);
+		if (list === undefined) this.#byName.set(schema.name, [schema]);
+		else list.push(schema);
+	}
+
+	match(facts: Facts): boolean {
+		return (this.#byName.get(facts.name) ?? []).some((schema) =>
+			(schema.attributes ?? []).every((wanted) => {
+				const attribute = facts.map.get(wanted.name);
+				if (attribute === undefined) return false;
+				return !wanted.value || wanted.value === staticText(attribute);
+			})
+		);
+	}
+}
+
+const interactiveElementRoles = new Schemas();
+const nonInteractiveElementRoles = new Schemas();
+for (const [schema, set] of elementRoles.entries()) {
+	const list = [...set];
+	if (list.every((role) => role !== 'generic' && nonInteractiveRoles.has(role))) {
+		nonInteractiveElementRoles.add(schema);
+	}
+	if (list.every((role) => interactiveRoles.has(role))) interactiveElementRoles.add(schema);
+}
+
+const interactiveElementObjects = new Schemas();
+const nonInteractiveElementObjects = new Schemas();
+for (const [schema, set] of elementAXObjects.entries()) {
+	const types = [...set].map((name) => AXObjects.get(name)?.type);
+	if (types.every((type) => type === 'widget')) interactiveElementObjects.add(schema);
+	if (types.every((type) => type === 'windows' || type === 'structure')) {
+		nonInteractiveElementObjects.add(schema);
+	}
+}
+
+export type Interactivity = 'interactive' | 'non-interactive' | 'static';
+
+export function interactivity(facts: Facts): Interactivity {
+	if (interactiveElementRoles.match(facts)) return 'interactive';
+	if (facts.name !== 'header' && nonInteractiveElementRoles.match(facts)) return 'non-interactive';
+	if (interactiveElementObjects.match(facts)) return 'interactive';
+	if (nonInteractiveElementObjects.match(facts)) return 'non-interactive';
+	return 'static';
+}
+
+interface Semantic {
+	readonly attributes: readonly { readonly name: string; readonly value?: string }[] | undefined;
+	readonly roles: ReadonlySet<string>;
+}
+
+const semanticByName = new Map<string, Semantic[]>();
+for (const [schema, objects] of elementAXObjects.entries()) {
+	const names = new Set<string>();
+	for (const object of objects) {
+		for (const role of AXObjectRoles.get(object) ?? []) names.add(role.name);
+	}
+	const entry = { attributes: schema.attributes, roles: names };
+	const list = semanticByName.get(schema.name);
+	if (list === undefined) semanticByName.set(schema.name, [entry]);
+	else list.push(entry);
+}
+
+export function isSemanticRoleElement(role: string, facts: Facts): boolean {
+	return (semanticByName.get(facts.name) ?? []).some(
+		(entry) =>
+			entry.roles.has(role) &&
+			(entry.attributes ?? []).every(
+				(wanted) =>
+					facts.map.has(wanted.name) && staticValue(facts.map.get(wanted.name)) === wanted.value
+			)
+	);
+}
+
+function typedRole(
+	facts: Facts,
+	table: ReadonlyMap<string, string>,
+	list: boolean
+): string | undefined {
+	const type = facts.map.get('type');
+	if (type === undefined) return undefined;
+	const value = staticText(type);
+	if (!value) return undefined;
+	if (list && facts.map.has('list') && comboboxIfList.has(value)) return 'combobox';
+	return table.get(value);
+}
+
+export function implicitRole(facts: Facts): string | undefined {
+	if (facts.name === 'menuitem') return typedRole(facts, menuitemRoles, false);
+	if (facts.name === 'input') return typedRole(facts, inputRoles, true);
+	return implicitSemantics.get(facts.name);
+}
+
+const roleSeparator = /[ \t\n\r\f]+/g;
+
+export function roleTokens(value: string): string[] {
+	return value.replace(/[A-Z]/g, (char) => char.toLowerCase()).split(roleSeparator);
+}
+
+export function effectiveRole(value: string | null): string | null {
+	if (value === null) return null;
+	return (
+		roleTokens(value).find((role) => knownRoles.has(role) && !abstractRoles.has(role)) ?? value
+	);
+}
+
+export function requiredProps(role: string): readonly string[] | undefined {
+	const definition = roles.get(role as ARIARoleDefinitionKey);
+	return definition === undefined ? undefined : Object.keys(definition.requiredProps);
+}
+
+export function supportedProps(role: string): object | undefined {
+	return roles.get(role as ARIARoleDefinitionKey)?.props;
+}

package/src/compiler/analysis/validate/a11y/tables.ts

@@ -0,0 +1,250 @@
+export const ariaAttributes: readonly string[] =
+	'activedescendant atomic autocomplete braillelabel brailleroledescription busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(
+		' '
+	);
+
+export const ariaAttributeSet: ReadonlySet<string> = new Set(ariaAttributes);
+
+export const requiredAttributes: ReadonlyMap<string, readonly string[]> = new Map([
+	['area', ['alt', 'aria-label', 'aria-labelledby']],
+	['html', ['lang']],
+	['iframe', ['title']],
+	['img', ['alt']],
+	['object', ['title', 'aria-label', 'aria-labelledby']]
+]);
+
+export const distractingElements: ReadonlySet<string> = new Set(['blink', 'marquee']);
+
+export const headings: ReadonlySet<string> = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
+
+export const labelable: ReadonlySet<string> = new Set([
+	'button',
+	'input',
+	'keygen',
+	'meter',
+	'output',
+	'progress',
+	'select',
+	'textarea'
+]);
+
+export const interactiveHandlers: ReadonlySet<string> = new Set([
+	'keypress',
+	'keydown',
+	'keyup',
+	'click',
+	'contextmenu',
+	'dblclick',
+	'drag',
+	'dragend',
+	'dragenter',
+	'dragexit',
+	'dragleave',
+	'dragover',
+	'dragstart',
+	'drop',
+	'mousedown',
+	'mouseenter',
+	'mouseleave',
+	'mousemove',
+	'mouseout',
+	'mouseover',
+	'mouseup',
+	'pointerdown',
+	'pointerup',
+	'pointermove',
+	'pointerenter',
+	'pointerleave',
+	'pointerover',
+	'pointerout',
+	'pointercancel',
+	'touchstart',
+	'touchend',
+	'touchmove',
+	'touchcancel'
+]);
+
+export const recommendedInteractiveHandlers: ReadonlySet<string> = new Set([
+	'click',
+	'mousedown',
+	'mouseup',
+	'keypress',
+	'keydown',
+	'keyup'
+]);
+
+export const nestedImplicitSemantics: ReadonlyMap<string, string> = new Map([
+	['header', 'banner'],
+	['footer', 'contentinfo']
+]);
+
+export const implicitSemantics: ReadonlyMap<string, string> = new Map([
+	['a', 'link'],
+	['area', 'link'],
+	['article', 'article'],
+	['aside', 'complementary'],
+	['body', 'document'],
+	['button', 'button'],
+	['datalist', 'listbox'],
+	['dd', 'definition'],
+	['dfn', 'term'],
+	['dialog', 'dialog'],
+	['details', 'group'],
+	['dt', 'term'],
+	['fieldset', 'group'],
+	['figure', 'figure'],
+	['form', 'form'],
+	['h1', 'heading'],
+	['h2', 'heading'],
+	['h3', 'heading'],
+	['h4', 'heading'],
+	['h5', 'heading'],
+	['h6', 'heading'],
+	['hr', 'separator'],
+	['img', 'img'],
+	['li', 'listitem'],
+	['link', 'link'],
+	['main', 'main'],
+	['menu', 'list'],
+	['meter', 'progressbar'],
+	['nav', 'navigation'],
+	['ol', 'list'],
+	['option', 'option'],
+	['optgroup', 'group'],
+	['output', 'status'],
+	['progress', 'progressbar'],
+	['section', 'region'],
+	['summary', 'button'],
+	['table', 'table'],
+	['tbody', 'rowgroup'],
+	['textarea', 'textbox'],
+	['tfoot', 'rowgroup'],
+	['thead', 'rowgroup'],
+	['tr', 'row'],
+	['ul', 'list']
+]);
+
+export const menuitemRoles: ReadonlyMap<string, string> = new Map([
+	['command', 'menuitem'],
+	['checkbox', 'menuitemcheckbox'],
+	['radio', 'menuitemradio']
+]);
+
+export const inputRoles: ReadonlyMap<string, string> = new Map([
+	['button', 'button'],
+	['image', 'button'],
+	['reset', 'button'],
+	['submit', 'button'],
+	['checkbox', 'checkbox'],
+	['radio', 'radio'],
+	['range', 'slider'],
+	['number', 'spinbutton'],
+	['email', 'textbox'],
+	['search', 'searchbox'],
+	['tel', 'textbox'],
+	['text', 'textbox'],
+	['url', 'textbox']
+]);
+
+const containerRoles = ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'];
+
+export const interactiveRoleExceptions: ReadonlyMap<string, ReadonlySet<string>> = new Map([
+	['ul', new Set(containerRoles)],
+	['ol', new Set(containerRoles)],
+	['menu', new Set(containerRoles)],
+	['li', new Set(['menuitem', 'option', 'row', 'tab', 'treeitem'])],
+	['table', new Set(['grid'])],
+	['td', new Set(['gridcell'])],
+	['fieldset', new Set(['radiogroup', 'presentation'])]
+]);
+
+export const comboboxIfList: ReadonlySet<string> = new Set([
+	'email',
+	'search',
+	'tel',
+	'text',
+	'url'
+]);
+
+export const addressTypeTokens: ReadonlySet<string> = new Set(['shipping', 'billing']);
+
+export const autofillFieldNameTokens: ReadonlySet<string> = new Set([
+	'',
+	'on',
+	'off',
+	'name',
+	'honorific-prefix',
+	'given-name',
+	'additional-name',
+	'family-name',
+	'honorific-suffix',
+	'nickname',
+	'username',
+	'new-password',
+	'current-password',
+	'one-time-code',
+	'organization-title',
+	'organization',
+	'street-address',
+	'address-line1',
+	'address-line2',
+	'address-line3',
+	'address-level4',
+	'address-level3',
+	'address-level2',
+	'address-level1',
+	'country',
+	'country-name',
+	'postal-code',
+	'cc-name',
+	'cc-given-name',
+	'cc-additional-name',
+	'cc-family-name',
+	'cc-number',
+	'cc-exp',
+	'cc-exp-month',
+	'cc-exp-year',
+	'cc-csc',
+	'cc-type',
+	'transaction-currency',
+	'transaction-amount',
+	'language',
+	'bday',
+	'bday-day',
+	'bday-month',
+	'bday-year',
+	'sex',
+	'url',
+	'photo'
+]);
+
+export const contactTypeTokens: ReadonlySet<string> = new Set([
+	'home',
+	'work',
+	'mobile',
+	'fax',
+	'pager'
+]);
+
+export const autofillContactFieldNameTokens: ReadonlySet<string> = new Set([
+	'tel',
+	'tel-country-code',
+	'tel-national',
+	'tel-area-code',
+	'tel-local',
+	'tel-local-prefix',
+	'tel-local-suffix',
+	'tel-extension',
+	'email',
+	'impp'
+]);
+
+export const invisibleElements: ReadonlySet<string> = new Set(['meta', 'html', 'script', 'style']);
+
+export const presentationRoles: ReadonlySet<string> = new Set(['presentation', 'none']);
+
+export const contentEditableBindings: ReadonlySet<string> = new Set([
+	'textContent',
+	'innerHTML',
+	'innerText'
+]);