@markuplint/ml-spec 3.0.0-canary.5 → 3.0.0-dev.177

package/src/dom-traverse/accname-computation.ts

@@ -1,5 +0,0 @@
-import { computeAccessibleName } from 'dom-accessibility-api';
-
-export function getAccname(el: Element) {
-	return computeAccessibleName(el);
-}

package/src/dom-traverse/get-attr-specs.ts

@@ -1,8 +0,0 @@
-import type { MLMLSpec } from '../types';
-import type { NamespaceURI } from '@markuplint/ml-ast';
-
-import { getAttrSpecs as _getAttrSpecs } from '../specs/get-attr-specs';
-
-export function getAttrSpecs(el: Element, schema: MLMLSpec) {
-	return _getAttrSpecs(el.localName, el.namespaceURI as NamespaceURI, schema);
-}

package/src/dom-traverse/get-computed-aria-props.spec.ts

@@ -1,368 +0,0 @@
-import type { ARIAVersion } from '../types';
-
-import specs from '@markuplint/html-spec';
-import { createSelector } from '@markuplint/selector';
-import { createJSDOMElement } from '@markuplint/test-tools';
-
-import { getComputedAriaProps } from './get-computed-aria-props';
-
-function _(html: string, selector?: string) {
-	return createJSDOMElement(html, selector, function (selector) {
-		// JSDOM supports no level 4 selectors yet.
-		return !!createSelector(selector, specs).match(this);
-	});
-}
-
-function c(html: string, version: ARIAVersion, selector?: string) {
-	return getComputedAriaProps(specs, _(html, selector), version);
-}
-
-describe('getComputedAriaProps', () => {
-	test('the link role', () => {
-		expect(c('<a href></a>', '1.2')).toStrictEqual({
-			'aria-atomic': {
-				name: 'aria-atomic',
-				value: 'false',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-busy': {
-				name: 'aria-busy',
-				value: 'false',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-controls': {
-				name: 'aria-controls',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-current': {
-				name: 'aria-current',
-				value: 'false',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-describedby': {
-				name: 'aria-describedby',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-details': {
-				name: 'aria-details',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-disabled': {
-				name: 'aria-disabled',
-				value: 'false',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-dropeffect': {
-				name: 'aria-dropeffect',
-				value: 'none',
-				deprecated: true,
-				required: false,
-				from: 'default',
-			},
-			'aria-errormessage': {
-				name: 'aria-errormessage',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-expanded': {
-				name: 'aria-expanded',
-				value: 'undefined',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-flowto': {
-				name: 'aria-flowto',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-grabbed': {
-				name: 'aria-grabbed',
-				value: 'undefined',
-				deprecated: true,
-				required: false,
-				from: 'default',
-			},
-			'aria-haspopup': {
-				name: 'aria-haspopup',
-				value: 'false',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-hidden': {
-				name: 'aria-hidden',
-				value: 'undefined',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-invalid': {
-				name: 'aria-invalid',
-				value: 'false',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-keyshortcuts': {
-				name: 'aria-keyshortcuts',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-label': {
-				name: 'aria-label',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-labelledby': {
-				name: 'aria-labelledby',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-live': {
-				name: 'aria-live',
-				value: 'off',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-owns': {
-				name: 'aria-owns',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-relevant': {
-				name: 'aria-relevant',
-				value: 'additions text',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-roledescription': {
-				name: 'aria-roledescription',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-		});
-	});
-
-	test('the heading role', () => {
-		expect(c('<h1></h1>', '1.2')).toStrictEqual({
-			'aria-atomic': {
-				name: 'aria-atomic',
-				value: 'false',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-busy': {
-				name: 'aria-busy',
-				value: 'false',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-controls': {
-				name: 'aria-controls',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-current': {
-				name: 'aria-current',
-				value: 'false',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-describedby': {
-				name: 'aria-describedby',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-details': {
-				name: 'aria-details',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-disabled': {
-				name: 'aria-disabled',
-				value: 'false',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-dropeffect': {
-				name: 'aria-dropeffect',
-				value: 'none',
-				deprecated: true,
-				required: false,
-				from: 'default',
-			},
-			'aria-errormessage': {
-				name: 'aria-errormessage',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-flowto': {
-				name: 'aria-flowto',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-grabbed': {
-				name: 'aria-grabbed',
-				value: 'undefined',
-				deprecated: true,
-				required: false,
-				from: 'default',
-			},
-			'aria-haspopup': {
-				name: 'aria-haspopup',
-				value: 'false',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-hidden': {
-				name: 'aria-hidden',
-				value: 'undefined',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-invalid': {
-				name: 'aria-invalid',
-				value: 'false',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-keyshortcuts': {
-				name: 'aria-keyshortcuts',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-label': {
-				name: 'aria-label',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-labelledby': {
-				name: 'aria-labelledby',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-level': {
-				name: 'aria-level',
-				value: '1',
-				deprecated: false,
-				required: true,
-				from: 'default',
-			},
-			'aria-live': {
-				name: 'aria-live',
-				value: 'off',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-owns': {
-				name: 'aria-owns',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-relevant': {
-				name: 'aria-relevant',
-				value: 'additions text',
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-			'aria-roledescription': {
-				name: 'aria-roledescription',
-				value: undefined,
-				deprecated: false,
-				required: false,
-				from: 'default',
-			},
-		});
-	});
-
-	test('from html-attr', () => {
-		expect(c('<input type="checkbox" checked>', '1.2')['aria-checked']).toStrictEqual({
-			name: 'aria-checked',
-			value: 'true',
-			deprecated: false,
-			required: true,
-			from: 'html-attr',
-		});
-	});
-
-	test('overwrite aria-attr', () => {
-		expect(c('<input type="checkbox" checked aria-checked="false">', '1.2')['aria-checked']).toStrictEqual({
-			name: 'aria-checked',
-			value: 'false',
-			deprecated: false,
-			required: true,
-			from: 'aria-attr',
-		});
-	});
-
-	test('overwrite aria-attr', () => {
-		expect(c('<input type="checkbox" checked aria-checked="mixed">', '1.2')['aria-checked']).toStrictEqual({
-			name: 'aria-checked',
-			value: 'mixed',
-			deprecated: false,
-			required: true,
-			from: 'aria-attr',
-		});
-	});
-});

package/src/dom-traverse/get-computed-aria-props.ts

@@ -1,130 +0,0 @@
-import type { ARIAAttributeValue, ARIAProperty, ARIAVersion, MLMLSpec } from '../types';
-
-import { ariaSpecs as _ariaSpecs } from '../specs/aria-specs';
-
-import { getComputedRole } from './get-computed-role';
-
-type ARIAProps = Record<string, ARIAProp>;
-
-type ARIAProp = {
-	name: string;
-	value: string | undefined;
-	required: boolean;
-	deprecated: boolean;
-	from: ARIAPropReferenceType;
-};
-
-type ARIAPropReferenceType = 'default' | 'html-attr' | 'aria-attr';
-
-export function getComputedAriaProps(specs: Readonly<MLMLSpec>, el: Element, version: ARIAVersion): ARIAProps {
-	const ariaSpecs = _ariaSpecs(specs, version);
-
-	const { role } = getComputedRole(specs, el, version);
-
-	if (!role) {
-		return {};
-	}
-
-	const props: ARIAProps = {};
-
-	role.ownedProperties.forEach(ownedProp => {
-		const spec = ariaSpecs.props.find(propSpec => propSpec.name === ownedProp.name);
-		if (!spec) {
-			return;
-		}
-
-		if (el.hasAttribute(spec.name)) {
-			const attrValue = el.getAttribute(spec.name);
-			if (attrValue && isValidAriaValue(spec, role.name, attrValue, spec.enum)) {
-				props[ownedProp.name] = {
-					name: ownedProp.name,
-					value: attrValue,
-					deprecated: !!spec.deprecated,
-					required: !!ownedProp.required,
-					from: 'aria-attr',
-				};
-				return;
-			}
-		}
-
-		const equivalentHtmlAttr = spec.equivalentHtmlAttrs?.[0];
-		if (equivalentHtmlAttr && el.hasAttribute(equivalentHtmlAttr.htmlAttrName)) {
-			const value =
-				equivalentHtmlAttr.value === null
-					? el.getAttribute(equivalentHtmlAttr.htmlAttrName)
-					: equivalentHtmlAttr.value;
-			if (value != null) {
-				props[ownedProp.name] = {
-					name: ownedProp.name,
-					value,
-					deprecated: !!spec.deprecated,
-					required: !!ownedProp.required,
-					from: 'html-attr',
-				};
-				return;
-			}
-		}
-
-		let defaultValue = spec.defaultValue;
-
-		/**
-		 * @see https://www.w3.org/TR/html-aria/#el-h1-h6
-		 */
-		if (ownedProp.name === 'aria-level' && /^H[1-6]$/.test(el.nodeName)) {
-			defaultValue = el.nodeName.replace('H', '');
-		}
-
-		props[ownedProp.name] = {
-			name: ownedProp.name,
-			value: defaultValue,
-			deprecated: !!spec.deprecated,
-			required: !!ownedProp.required,
-			from: 'default',
-		};
-	});
-
-	return props;
-}
-
-function isValidAriaValue(spec: ARIAProperty, role: string, value: string | undefined, enumList: string[]) {
-	let type: ARIAAttributeValue = spec.value;
-	if (spec.conditionalValue) {
-		for (const cond of spec.conditionalValue) {
-			if (cond.role.includes(role)) {
-				type = cond.value;
-			}
-		}
-	}
-
-	value = (value ?? '').trim();
-	switch (type) {
-		case 'string': {
-			return true;
-		}
-		case 'ID reference':
-		case 'ID reference list':
-		case 'URI': {
-			return !!value;
-		}
-		case 'integer':
-		case 'number': {
-			return !isNaN(parseFloat(value));
-		}
-		case 'token':
-		case 'token list': {
-			if (!enumList.length) {
-				throw new Error('Need an enum list in token and token list types');
-			}
-			return enumList.includes(value.toLowerCase());
-		}
-		case 'tristate': {
-			return ['true', 'false', 'mixed'].includes(value.toLowerCase());
-		}
-		case 'true/false': {
-			return ['true', 'false'].includes(value.toLowerCase());
-		}
-		case 'true/false/undefined': {
-			return ['true', 'false', 'undefined'].includes(value.toLowerCase());
-		}
-	}
-}

package/src/dom-traverse/get-computed-role.spec.ts

@@ -1,134 +0,0 @@
-import type { ARIAVersion } from '../types';
-
-import specs from '@markuplint/html-spec';
-import { createSelector } from '@markuplint/selector';
-import { createJSDOMElement } from '@markuplint/test-tools';
-
-import { getComputedRole } from './get-computed-role';
-
-function _(html: string, selector?: string) {
-	return createJSDOMElement(html, selector, function (selector) {
-		// JSDOM supports no level 4 selectors yet.
-		return !!createSelector(selector, specs).match(this);
-	});
-}
-
-function c(html: string, version: ARIAVersion, selector?: string) {
-	return getComputedRole(specs, _(html, selector), version);
-}
-
-function tree(html: string, version: ARIAVersion) {
-	const el = _(html);
-	const tree: [string, string | null][] = [];
-	let current: Element | null = el;
-	while (current) {
-		tree.push([current.localName, getComputedRole(specs, current, version).role?.name || null]);
-		current = current.children.item(0);
-	}
-	return tree;
-}
-
-describe('getComputedRole', () => {
-	test('the a element', () => {
-		expect(c('<a></a>', '1.2').role?.name).toBe(undefined);
-		expect(c('<a href></a>', '1.2').role?.name).toBe('link');
-		expect(c('<a role="button"></a>', '1.2').role?.name).toBe('button');
-		expect(c('<a role="button" href></a>', '1.2').role?.name).toBe('button');
-		expect(c('<a role="foo" href></a>', '1.2').role?.name).toBe('link');
-	});
-
-	test('the heading role', () => {
-		expect(c('<h1></h1>', '1.2').role?.name).toBe('heading');
-		expect(c('<h1></h1>', '1.2').role?.isImplicit).toBe(true);
-		expect(c('<div role="heading"></div>', '1.2').role?.name).toBe('heading');
-		expect(c('<div role="heading"></div>', '1.2').role?.isImplicit).toBe(false);
-	});
-
-	test('multiple', () => {
-		expect(c('<div role="presentation heading"></div>', '1.2').role?.name).toBe('presentation');
-		expect(c('<div role="roletype heading"></div>', '1.2').role?.name).toBe('heading');
-		expect(c('<img alt="alt" role="banner button"/>', '1.2').role?.name).toBe('button');
-		expect(c('<img alt="alt" role="foo button"/>', '1.2').role?.name).toBe('button');
-		expect(c('<img alt="alt" role="graphics-symbol button"/>', '1.2').role?.name).toBe('button');
-	});
-
-	test('svg', () => {
-		expect(c('<svg><rect role="graphics-symbol img"></rect></svg>', '1.2', 'rect').role?.name).toBe(
-			'graphics-symbol',
-		);
-		expect(c('<svg><rect role="roletype img"></rect></svg>', '1.2', 'rect').role?.name).toBe('img');
-		expect(c('<svg><rect role="roletype"></rect></svg>', '1.2', 'rect').role?.name).toBe('graphics-symbol');
-	});
-
-	test('landmark', () => {
-		expect(c('<div role="region"></div>', '1.2').role?.name).toBe('generic');
-		expect(c('<div role="region" aria-label="foo"></div>', '1.2').role?.name).toBe('region');
-		expect(c('<div role="form"></div>', '1.2').role?.name).toBe('generic');
-		expect(c('<div role="form" aria-label="foo"></div>', '1.2').role?.name).toBe('form');
-		expect(c('<div role="navigation"></div>', '1.2').role?.name).toBe('navigation');
-		expect(c('<div role="navigation" aria-label="foo"></div>', '1.2').role?.name).toBe('navigation');
-	});
-
-	test('Presentational Roles Conflict Resolution (1) Interactive Elements', () => {
-		expect(c('<a href="path/to"></a>', '1.2').role?.name).toBe('link');
-		expect(c('<a role="none" href="path/to"></a>', '1.2').role?.name).toBe('link'); // No permitted role
-		expect(c('<a></a>', '1.2').role?.name).toBe(undefined);
-		expect(c('<a role="none"></a>', '1.2').role?.name).toBe('none');
-		expect(c('<a role="none" href="path/to" disabled></a>', '1.2').role?.name).toBe('link'); // No permitted role
-		expect(c('<button></button>', '1.2').role?.name).toBe('button');
-		expect(c('<button disabled></button>', '1.2').role?.name).toBe('button');
-		expect(c('<button role="none"></button>', '1.2').role?.name).toBe('button'); // No permitted role
-		expect(c('<button role="none" disabled></button>', '1.2').role?.name).toBe('button'); // No permitted role
-		expect(c('<div></div>', '1.2').role?.name).toBe('generic');
-		expect(c('<div role="none"></div>', '1.2').role?.name).toBe('none');
-		expect(c('<div tabindex="0"></div>', '1.2').role?.name).toBe('generic');
-		expect(c('<div tabindex="0" role="none"></div>', '1.2').role?.name).toBe('generic');
-		expect(c('<div><span></span></div>', '1.2', 'span').role?.name).toBe(undefined);
-		expect(c('<div><span role="none"></span></div>', '1.2', 'span').role?.name).toBe('none');
-		expect(c('<div><span tabindex="0"></span></div>', '1.2', 'span').role?.name).toBe(undefined);
-		expect(c('<div><span tabindex="0" role="none"></span></div>', '1.2', 'span').role?.name).toBe(undefined);
-		expect(c('<div hidden><span></span></div>', '1.2', 'span').role?.name).toBe(undefined);
-		expect(c('<div hidden><span role="none"></span></div>', '1.2', 'span').role?.name).toBe('none');
-		expect(c('<div hidden><span tabindex="0"></span></div>', '1.2', 'span').role?.name).toBe(undefined);
-		expect(c('<div hidden><span tabindex="0" role="none"></span></div>', '1.2', 'span').role?.name).toBe('none');
-	});
-
-	test('Presentational Roles Conflict Resolution (2-1) Required Owned Elements', () => {
-		expect(c('<table><tr><td>foo</td></tr></table>', '1.2', 'td').role?.name).toBe('cell');
-		expect(c('<table><tr><td role="none">foo</td></tr></table>', '1.2', 'td').role?.name).toBe('cell');
-		expect(c('<table><tbody role="none"><tr><td>foo</td></tr></tbody></table>', '1.2', 'tbody').role?.name).toBe(
-			'rowgroup',
-		);
-		expect(c('<ul><li></li></ul>', '1.2', 'li').role?.name).toBe('listitem');
-		expect(c('<ul><li role="presentation"></li></ul>', '1.2', 'li').role?.name).toBe('listitem');
-	});
-
-	test('Presentational Roles Conflict Resolution (2-2) the accessibility tree to be malformed', () => {
-		expect(c('<table><tr><td>foo</td></tr></table>', '1.2', 'td').role?.name).toBe('cell');
-		expect(c('<table role="none"><tr><td>foo</td></tr></table>', '1.2', 'td').role?.name).toBe(undefined);
-		expect(tree('<table><tr><td>foo</td></tr></table>', '1.2')).toStrictEqual([
-			['table', 'table'],
-			['tbody', 'rowgroup'],
-			['tr', 'row'],
-			['td', 'cell'],
-		]);
-		expect(tree('<table role="none"><tr><td>foo</td></tr></table>', '1.2')).toStrictEqual([
-			['table', 'none'],
-			['tbody', null],
-			['tr', null],
-			['td', null],
-		]);
-	});
-
-	test('Presentational Roles Conflict Resolution (3) Global Props', () => {
-		/**
-		 * @see https://w3c.github.io/aria/#example-41
-		 */
-		expect(c('<h1 role="presentation" aria-describedby="comment-1"> Sample Content </h1>', '1.2').role?.name).toBe(
-			'heading',
-		);
-		expect(c('<h1 role="presentation" aria-level="2"> Sample Content </h1>', '1.2').role?.name).toBe(
-			'presentation',
-		);
-	});
-});