@markuplint/ml-spec 3.0.0-dev.24 → 3.0.0-dev.38

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

@@ -1,69 +0,0 @@
-import { createJSDOMElement as c } from '@markuplint/test-tools';
-
-import { getAccname } from './accname-computation';
-
-test('Get accessible name', () => {
-	expect(getAccname(c('<button>label</button>'))).toBe('label');
-	expect(getAccname(c('<div>text</div>'))).toBe('');
-	expect(getAccname(c('<div aria-label="label">text</div>'))).toBe('label');
-	expect(getAccname(c('<span aria-label="label">text</span>'))).toBe('label');
-	expect(getAccname(c('<img alt="alternative-text" />'))).toBe('alternative-text');
-	expect(getAccname(c('<img title="title" />'))).toBe('title');
-	expect(getAccname(c('<div><label for="a">label</label><input id="a" /></div>').children[1])).toBe('label');
-});
-
-test('Invisible element', () => {
-	expect(getAccname(c('<button>label</button>'))).toBe('label');
-	expect(getAccname(c('<button aria-disabled="true">label</button>'))).toBe('label');
-	expect(getAccname(c('<button aria-hidden="true">label</button>'))).toBe('');
-	expect(getAccname(c('<button hidden>label</button>'))).toBe('');
-	expect(getAccname(c('<button style="display: none">label</button>'))).toBe('');
-});
-
-/**
- * @see https://www.w3.org/TR/accname-1.1/#ex-1-example-1-element1-id-el1-aria-labelledby-el3-element2-id-el2-aria-labelledby-el1-element3-id-el3-hello-element3
- */
-test('accname-1.1 Example 1', () => {
-	const complex = c(`<div>
-<input id="el1" aria-labelledby="el3" />
-<input id="el2" aria-labelledby="el1" />
-<h1 id="el3"> hello </h1>
-</div>`);
-	expect(getAccname(complex.children[0])).toBe('hello');
-	expect(getAccname(complex.children[1])).toBe('');
-	expect(getAccname(complex.children[2])).toBe('hello');
-});
-
-/**
- * @see https://www.w3.org/TR/accname-1.1/#ex-2-example-2-h1-files-h1-ul-li-a-id-file_row1-href-files-documentation-pdf-documentation-pdf-a-span-role-button-tabindex-0-id-del_row1-aria-label-delete-aria-labelledby-del_row1-file_row1-span-li-li-a-id-file_row2-href-files-holidayletter-pdf-holidayletter-pdf-a-span-role-button-tabindex-0-id-del_row2-aria-label-delete-aria-labelledby-del_row2-file_row2-span-li-ul
- */
-test('accname-1.1 Example 2', () => {
-	const complex = c(`<ul>
-	<li>
-		<a id="file_row1" href="./files/Documentation.pdf">Documentation.pdf</a>
-		<span role="button" tabindex="0" id="del_row1" aria-label="Delete" aria-labelledby="del_row1 file_row1"></span>
-	</li>
-	<li>
-		<a id="file_row2" href="./files/HolidayLetter.pdf">HolidayLetter.pdf</a>
-		<span role="button" tabindex="0" id="del_row2" aria-label="Delete" aria-labelledby="del_row2 file_row2"></span>
-	</li>
-</ul>`);
-	const spans = complex.querySelectorAll('span');
-	expect(getAccname(spans[0])).toBe('Delete Documentation.pdf');
-	expect(getAccname(spans[1])).toBe('Delete HolidayLetter.pdf');
-});
-
-/**
- * @see https://www.w3.org/TR/accname-1.1/#ex-3-example-3-div-role-checkbox-aria-checked-false-flash-the-screen-span-role-textbox-aria-multiline-false-5-span-times-div
- */
-test('accname-1.1 Example 3', () => {
-	const complex = c(
-		'<div role="checkbox" aria-checked="false">Flash the screen <span role="textbox" aria-multiline="false"> 5 </span> times</div>',
-	);
-	expect(getAccname(complex)).toBe('Flash the screen 5 times');
-});
-
-test('with comment', () => {
-	expect(getAccname(c('<button>label</button>'))).toBe('label');
-	expect(getAccname(c('<button>label<!-- comment --></button>'))).toBe('label');
-});

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());
-		}
-	}
-}