@markuplint/ml-spec 3.0.0-alpha.82 → 3.0.0-dev.24

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

@@ -7,7 +7,7 @@ test('Get accessible name', () => {
 	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="alterative-text" />'))).toBe('alterative-text');
+	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');
 });
@@ -23,7 +23,7 @@ test('Invisible element', () => {
 /**
  * @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 Expample 1', () => {
+test('accname-1.1 Example 1', () => {
 	const complex = c(`<div>
 <input id="el1" aria-labelledby="el3" />
 <input id="el2" aria-labelledby="el1" />
@@ -35,9 +35,9 @@ test('accname-1.1 Expample 1', () => {
 });
 
 /**
- * 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
+ * @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 Expample 2', () => {
+test('accname-1.1 Example 2', () => {
 	const complex = c(`<ul>
 	<li>
 		<a id="file_row1" href="./files/Documentation.pdf">Documentation.pdf</a>
@@ -54,9 +54,9 @@ test('accname-1.1 Expample 2', () => {
 });
 
 /**
- * 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
+ * @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 Expample 3', () => {
+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>',
 	);

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

@@ -0,0 +1,368 @@
+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

@@ -0,0 +1,130 @@
+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

@@ -93,7 +93,7 @@ describe('getComputedRole', () => {
 		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 Owend Elements', () => {
+	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(

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

@@ -1,7 +1,6 @@
 import type { ARIAVersion, ComputedRole, MLMLSpec } from '../types';
 
 import { ariaSpecs } from '../specs/aria-specs';
-import { getSelectorsByContentModelCategory } from '../specs/get-selectors-by-content-model-category';
 import { isPresentational } from '../specs/is-presentational';
 
 import { getAttrSpecs } from './get-attr-specs';
@@ -9,6 +8,7 @@ import { getExplicitRole } from './get-explicit-role';
 import { getImplicitRole } from './get-implicit-role';
 import { getNonPresentationalAncestor } from './get-non-presentational-ancestor';
 import { isRequiredOwnedElement } from './has-required-owned-elements';
+import { mayBeFocusable } from './may-be-focusable';
 
 export function getComputedRole(specs: Readonly<MLMLSpec>, el: Element, version: ARIAVersion): ComputedRole {
 	const implicitRole = getImplicitRole(specs, el, version);
@@ -76,38 +76,26 @@ export function getComputedRole(specs: Readonly<MLMLSpec>, el: Element, version:
 	 */
 	if (
 		/**
-		 * Interactive element
+		 * If interactive element
+		 *
+		 * 1. It may be focusable
+		 *
+		 * THIS CONDITION IS ALMOST MEANINGLESS.
+		 * Because it has already been determined that
+		 * the interactive elements can not specify the presentational role
+		 * in the previous processing that computes the permitted role (`getExplicitRole`).
 		 */
-		[
-			/**
-			 * Interactive content
-			 *
-			 * THIS CONDITION(SELECTORS) IS ALMOST MEANINGLESS.
-			 * Because it has already been determined that
-			 * the interactive elements can not specify the presentational role
-			 * in the previous processing that computes the permitted role (`getExplicitRole`).
-			 *
-			 * @see  https://html.spec.whatwg.org/multipage/dom.html#interactive-content
-			 */
-			...getSelectorsByContentModelCategory(specs, '#interactive'),
-			/**
-			 * Interaction
-			 *
-			 * @see  https://html.spec.whatwg.org/multipage/interaction.html
-			 */
-			'[tabindex]',
-			'[contenteditable]:not([contenteditable="false" i])',
-		].some(selector => el.matches(selector)) &&
+		mayBeFocusable(el, specs) &&
 		/**
-		 * No disabled
+		 * 2. No disabled
 		 */
 		!someAncestors(el, p => isEnabledAttr(p, specs, 'disabled')) &&
 		/**
-		 * No inert
+		 * 3. No inert
 		 */
 		!someAncestors(el, p => isEnabledAttr(p, specs, 'inert')) &&
 		/**
-		 * No hidden
+		 * 4. No hidden
 		 */
 		!someAncestors(el, p => isEnabledAttr(p, specs, 'hidden'))
 	) {

package/src/dom-traverse/get-content-model.ts

@@ -0,0 +1,32 @@
+import type { ElementSpec } from '../types';
+import type { PermittedContentPattern } from '../types/permitted-structures';
+
+import { getSpec } from './get-spec';
+
+type Specs = Pick<ElementSpec, 'name' | 'contentModel'>[];
+
+const cachesBySpecs = new Map<Specs, Map<Element, PermittedContentPattern[] | boolean | null>>();
+export function getContentModel(el: Element, specs: Pick<ElementSpec, 'name' | 'contentModel'>[]) {
+	const cacheByEl = cachesBySpecs.get(specs) ?? new Map<Element, PermittedContentPattern[] | boolean>();
+	const cached = cacheByEl.get(el);
+	if (cached) {
+		return cached;
+	}
+
+	const spec = getSpec<'contentModel'>(el, specs);
+	if (!spec) {
+		cacheByEl.set(el, null);
+		return null;
+	}
+
+	const conditions = spec.contentModel.conditional ?? [];
+	for (const cond of conditions) {
+		if (el.matches(cond.condition)) {
+			cacheByEl.set(el, cond.contents);
+			return cond.contents;
+		}
+	}
+
+	cacheByEl.set(el, spec.contentModel.contents);
+	return spec.contentModel.contents;
+}

package/src/dom-traverse/get-explicit-role.ts

@@ -16,7 +16,7 @@ export function getExplicitRole(specs: MLMLSpec, el: Element, version: ARIAVersi
 	/**
 	 * Resolve from values and **Handling Author Errors**
 	 *
-	 * @see https://w3c.github.io/aria/#document-handling_author-errors_roles
+	 * @see https://w3c.github.io/aria/#document-handling_author-errors
 	 */
 	for (const roleName of roleNames) {
 		const spec = getRoleSpec(specs, roleName, namespaceURI, version);

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

@@ -1,7 +1,7 @@
-import type { MLMLSpec } from '../types';
+import type { ElementSpec } from '../types';
 
 import { getSpecByTagName } from '../specs/get-spec-by-tag-name';
 
-export function getSpec(el: Element, schema: MLMLSpec) {
-	return getSpecByTagName(schema, el.localName, el.namespaceURI);
+export function getSpec<K extends keyof ElementSpec>(el: Element, specs: Pick<ElementSpec, 'name' | K>[]) {
+	return getSpecByTagName(specs, el.localName, el.namespaceURI);
 }

package/src/dom-traverse/has-required-owned-elements.ts

@@ -7,6 +7,19 @@ import { getExplicitRole } from './get-explicit-role';
 import { getImplicitRole } from './get-implicit-role';
 
 export function hasRequiredOwnedElement(el: Element, specs: Readonly<MLMLSpec>, version: ARIAVersion): boolean {
+	/**
+	 * The element has aria-owns which means it may have owned elements.
+	 *
+	 * THIS CONDITION IS PARTIAL SUPPORT.
+	 */
+	if (el.hasAttribute('aria-owns')) {
+		// FIXME
+		return true;
+	}
+
+	/**
+	 * Otherwise, traverses descendants to find owned elements.
+	 */
 	const computed = getComputedRole(specs, el, version);
 	if (!computed.role || computed.role.requiredOwnedElements.length === 0) {
 		return true;