@markuplint/ml-spec 3.0.0-alpha.3 → 3.0.0-alpha.5

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/is-exposed.spec.ts

@@ -0,0 +1,50 @@
+import type { ARIAVersion } from '../types';
+
+import specs from '@markuplint/html-spec';
+import { createSelector } from '@markuplint/selector';
+import { createJSDOMElement } from '@markuplint/test-tools';
+
+import { isExposed } from './is-exposed';
+
+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 x(html: string, selector?: string, version: ARIAVersion = '1.2') {
+	const el = _(html, selector);
+	return isExposed(el, specs, version);
+}
+
+describe('isExposed', () => {
+	test('Basic', () => {
+		expect(x('<div></div>')).toBe(true);
+		expect(x('<div aria-hidden="true"></div>')).toBe(false);
+		expect(x('<div role="presentation"></div>')).toBe(false);
+		expect(x('<div role="presentation" aria-hidden="true"></div>')).toBe(false);
+		expect(x('<div role="presentation"><span></span></div>', 'span')).toBe(true);
+		expect(x('<div role="presentation" aria-hidden="true"><span></span></div>', 'span')).toBe(false);
+		expect(x('<div style="display: none;"><span></span></div>', 'span')).toBe(false);
+		expect(x('<div hidden><span></span></div>', 'span')).toBe(false);
+		expect(x('<div hidden="until-found"><span></span></div>', 'span')).toBe(false);
+		expect(x('<html><body>content</body></html>', 'body')).toBe(true);
+		expect(x('<ul><li></li></ul>', 'li')).toBe(true);
+	});
+
+	test('Children Presentational: True', () => {
+		expect(x('<button></button>')).toBe(true);
+		expect(x('<button hidden></button>')).toBe(false);
+		expect(x('<button><span></span></button>', 'span')).toBe(false);
+		expect(x('<button hidden><span></span></button>', 'span')).toBe(false);
+	});
+
+	test('Hidden elements', () => {
+		expect(x('<input type="text">')).toBe(true);
+		expect(x('<input type="hidden">')).toBe(false);
+		expect(x('<meta>')).toBe(false);
+		expect(x('<style>a{}</style>')).toBe(false);
+		expect(x('<script>"";</script>')).toBe(false);
+	});
+});