@markuplint/ml-spec 2.0.1 → 3.0.0-alpha.82

package/src/specs/get-aria.ts

@@ -0,0 +1,85 @@
+import type { ARIAVersion, Matches, MLMLSpec } from '../types';
+import type { ARIA, PermittedRoles } from '../types/aria';
+
+import { getSpecByTagName } from './get-spec-by-tag-name';
+import { resolveVersion } from './resolve-version';
+
+const cache = new Map<string, Omit<ARIA, ARIAVersion> | null>();
+
+export function getARIA(
+	specs: Readonly<MLMLSpec>,
+	localName: string,
+	namespace: string | null,
+	version: ARIAVersion,
+	matches: Matches,
+): Omit<ARIA, ARIAVersion | 'conditions'> | null {
+	const aria = getVersionResolvedARIA(specs, localName, namespace, version);
+	if (!aria) {
+		return null;
+	}
+	const conditions = aria.conditions;
+	if (!conditions) {
+		return aria;
+	}
+	const conds = Object.keys(conditions);
+	let { implicitRole, permittedRoles, implicitProperties, properties, namingProhibited } = aria;
+	for (const cond of conds) {
+		if (!matches(cond)) {
+			continue;
+		}
+		const condARIA = conditions[cond];
+		implicitRole = condARIA.implicitRole ?? implicitRole;
+		permittedRoles = condARIA.permittedRoles ?? permittedRoles;
+		implicitProperties = condARIA.implicitProperties ?? implicitProperties;
+		properties = condARIA.properties ?? properties;
+		namingProhibited = condARIA.namingProhibited ?? namingProhibited;
+	}
+	return {
+		implicitRole,
+		permittedRoles,
+		implicitProperties,
+		properties,
+		namingProhibited,
+	};
+}
+
+function getVersionResolvedARIA(
+	specs: Readonly<MLMLSpec>,
+	localName: string,
+	namespace: string | null,
+	version: ARIAVersion,
+) {
+	const key = localName + namespace + version;
+	let aria = cache.get(key);
+	if (aria !== undefined) {
+		return aria;
+	}
+	const spec = getSpecByTagName(specs, localName, namespace)?.aria;
+	if (!spec) {
+		cache.set(key, null);
+		return null;
+	}
+	aria = resolveVersion(spec, version);
+	if (aria.permittedRoles) {
+		aria.permittedRoles = optimizePermittedRoles(aria.permittedRoles);
+	}
+	cache.set(key, aria);
+	return aria;
+}
+
+function optimizePermittedRoles(permittedRoles: PermittedRoles) {
+	if (!Array.isArray(permittedRoles)) {
+		return permittedRoles;
+	}
+	const unique = new Set(permittedRoles);
+
+	// https://www.w3.org/TR/wai-aria-1.2/#note-regarding-the-aria-1-1-none-role
+	if (unique.has('presentation')) {
+		unique.add('none');
+	}
+	if (unique.has('none')) {
+		unique.add('presentation');
+	}
+
+	return Array.from(unique).sort();
+}

package/src/{get-attr-specs.spec.ts → specs/get-attr-specs.spec.ts}

@@ -4,10 +4,9 @@ import { getAttrSpecs } from './get-attr-specs';
 
 describe('getSpec', () => {
 	test('svg:image[x]', () => {
-		const specs = getAttrSpecs('svg:image', htmlSpec);
+		const specs = getAttrSpecs('image', 'http://www.w3.org/2000/svg', htmlSpec);
 		const x = specs?.find(spec => spec.name === 'x');
 		expect(x).toStrictEqual({
-			ref: 'https://svgwg.org/svg2-draft/geometry.html#XProperty',
 			defaultValue: '0',
 			name: 'x',
 			type: ['<svg-length>', '<percentage>'],
@@ -16,10 +15,9 @@ describe('getSpec', () => {
 	});
 
 	test('svg:foreignObject[x]', () => {
-		const specs = getAttrSpecs('svg:foreignObject', htmlSpec);
+		const specs = getAttrSpecs('foreignObject', 'http://www.w3.org/2000/svg', htmlSpec);
 		const x = specs?.find(spec => spec.name === 'x');
 		expect(x).toStrictEqual({
-			ref: 'https://svgwg.org/svg2-draft/geometry.html#XProperty',
 			defaultValue: '0',
 			description:
 				'The x coordinate of the foreignObject. Value type: <length>|<percentage> ; Default value: 0; Animatable: yes',
@@ -30,10 +28,9 @@ describe('getSpec', () => {
 	});
 
 	test('svg:linearGradient[xlink:href]', () => {
-		const specs = getAttrSpecs('svg:linearGradient', htmlSpec);
+		const specs = getAttrSpecs('linearGradient', 'http://www.w3.org/2000/svg', htmlSpec);
 		const x = specs?.find(spec => spec.name === 'xlink:href');
 		expect(x).toStrictEqual({
-			ref: 'https://www.w3.org/TR/xlink11/#link-locators',
 			description:
 				'Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.An <IRI> reference to another <linearGradient> element that will be used as a template. Value type: <IRI> ; Default value: none; Animatable: yes',
 			name: 'xlink:href',
@@ -41,4 +38,10 @@ describe('getSpec', () => {
 			deprecated: true,
 		});
 	});
+
+	test('img[fetchpriority] (experimental spec)', () => {
+		const attrs = getAttrSpecs('img', null, htmlSpec);
+		const fetchpriority = attrs?.find(attr => attr.name === 'fetchpriority');
+		expect(fetchpriority?.experimental).toBe(true);
+	});
 });

package/src/{get-attr-specs.ts → specs/get-attr-specs.ts}

@@ -1,14 +1,19 @@
-import type { MLMLSpec, Attribute } from './types';
+import type { MLMLSpec, Attribute } from '../types';
+import type { NamespaceURI } from '@markuplint/ml-ast';
+
+import { resolveNamespace } from '../utils/resolve-namespace';
 
 const cacheMap = new Map<string, Attribute[] | null>();
 const schemaCache = new WeakSet<MLMLSpec>();
 
-export function getAttrSpecs(nameWithNS: string, schema: MLMLSpec) {
+export function getAttrSpecs(localName: string, namespace: NamespaceURI | null, schema: MLMLSpec) {
 	if (!schemaCache.has(schema)) {
 		cacheMap.clear();
 	}
 
-	const cache = cacheMap.get(nameWithNS);
+	const { localNameWithNS } = resolveNamespace(localName, namespace || undefined);
+
+	const cache = cacheMap.get(localNameWithNS);
 
 	if (cache !== undefined) {
 		return cache;
@@ -16,9 +21,9 @@ export function getAttrSpecs(nameWithNS: string, schema: MLMLSpec) {
 
 	schemaCache.add(schema);
 
-	const elSpec = schema.specs.find(spec => spec.name === nameWithNS);
+	const elSpec = schema.specs.find(spec => spec.name === localNameWithNS);
 	if (!elSpec) {
-		cacheMap.set(nameWithNS, null);
+		cacheMap.set(localNameWithNS, null);
 		return null;
 	}
 
@@ -78,7 +83,7 @@ export function getAttrSpecs(nameWithNS: string, schema: MLMLSpec) {
 	for (const attr of attrList) {
 		if (!attr.type) {
 			throw new Error(
-				`The type is empty in the ${attr.name} attribute of the ${nameWithNS} element,
+				`The type is empty in the ${attr.name} attribute of the ${localName} element,
 					'packages',
 					'@markuplint',
 					'html-spec',
@@ -92,7 +97,7 @@ export function getAttrSpecs(nameWithNS: string, schema: MLMLSpec) {
 
 	attrList.sort(nameCompare);
 
-	cacheMap.set(nameWithNS, attrList);
+	cacheMap.set(localNameWithNS, attrList);
 	return attrList;
 }
 

package/src/specs/get-implicit-role.spec.ts

@@ -0,0 +1,81 @@
+import type { ARIAVersion } from '../types';
+
+import specs from '@markuplint/html-spec';
+import { createSelector } from '@markuplint/selector';
+import { createJSDOMElement } from '@markuplint/test-tools';
+
+import { getImplicitRole } from './get-implicit-role';
+
+function c(html: string, version: ARIAVersion) {
+	const el = createJSDOMElement(html);
+	return getImplicitRole(
+		specs,
+		el.localName,
+		el.namespaceURI,
+		version,
+		selector => !!createSelector(selector, specs).match(el),
+	);
+}
+
+describe('getImplicitRole', () => {
+	test('the a element', () => {
+		expect(c('<a></a>', '1.2')).toBe(false);
+		expect(c('<a name="foo"></a>', '1.2')).toBe(false);
+		expect(c('<a href></a>', '1.2')).toBe('link');
+		expect(c('<a href=""></a>', '1.2')).toBe('link');
+		expect(c('<a href="path/to"></a>', '1.2')).toBe('link');
+	});
+
+	test('the area element', () => {
+		expect(c('<area />', '1.2')).toBe(false);
+		expect(c('<area shape="rect" />', '1.2')).toBe(false);
+		expect(c('<area href />', '1.2')).toBe('link');
+		expect(c('<area href="" />', '1.2')).toBe('link');
+		expect(c('<area href="path/to" />', '1.2')).toBe('link');
+	});
+
+	test('the article element', () => {
+		expect(c('<article></article>', '1.2')).toBe('article');
+	});
+
+	test('the aside element', () => {
+		expect(c('<aside></aside>', '1.2')).toBe('complementary');
+	});
+
+	test('the audio element', () => {
+		expect(c('<audio></audio>', '1.2')).toBe(false);
+	});
+
+	test('the h1 element', () => {
+		expect(c('<h1></h1>', '1.2')).toBe('heading');
+	});
+
+	test('the header element', () => {
+		expect(c('<header></header>', '1.2')).toBe('banner');
+		expect(c('<header><article></article></header>', '1.2')).toBe('generic');
+		expect(c('<header><article></article></header>', '1.1')).toBe(false);
+		expect(c('<header><div></div></header>', '1.2')).toBe('banner');
+		expect(c('<header><div role="article"></div></header>', '1.2')).toBe('generic');
+		expect(c('<header><div role="article"></div></header>', '1.1')).toBe(false);
+	});
+
+	test('the img element', () => {
+		expect(c('<img />', '1.2')).toBe('img');
+		expect(c('<img alt />', '1.2')).toBe('presentation');
+		expect(c('<img alt="" />', '1.2')).toBe('presentation');
+		expect(c('<img alt="foo" />', '1.2')).toBe('img');
+		expect(c('<img aria-label="foo" />', '1.2')).toBe('img');
+	});
+
+	test('the form element', () => {
+		expect(c('<form></form>', '1.2')).toBe('form');
+		expect(c('<form></form>', '1.1')).toBe(false);
+		expect(c('<form aria-label="foo"></form>', '1.2')).toBe('form');
+		expect(c('<form aria-label="foo"></form>', '1.1')).toBe('form');
+	});
+
+	test('the section element', () => {
+		expect(c('<section></section>', '1.2')).toBe(false);
+		expect(c('<section aria-label="foo"></section>', '1.2')).toBe('region');
+	});
+});

package/src/specs/get-implicit-role.ts

@@ -0,0 +1,17 @@
+import type { ARIAVersion, Matches, MLMLSpec } from '../types';
+
+import { getARIA } from './get-aria';
+
+export function getImplicitRole(
+	specs: Readonly<MLMLSpec>,
+	localName: string,
+	namespace: string | null,
+	version: ARIAVersion,
+	matches: Matches,
+) {
+	const aria = getARIA(specs, localName, namespace, version, matches);
+	if (!aria) {
+		return false;
+	}
+	return aria.implicitRole;
+}

package/src/specs/get-permitted-roles.spec.ts

@@ -0,0 +1,420 @@
+import type { ARIAVersion } from '../types';
+
+import specs from '@markuplint/html-spec';
+import { createSelector } from '@markuplint/selector';
+import { createJSDOMElement } from '@markuplint/test-tools';
+
+import { getPermittedRoles } from './get-permitted-roles';
+
+function c(html: string, version: ARIAVersion, selector?: string) {
+	const el = createJSDOMElement(html, selector);
+	const roles = getPermittedRoles(
+		specs,
+		el.localName,
+		el.namespaceURI,
+		version,
+		selector => !!createSelector(selector, specs).match(el),
+	);
+	if (Array.isArray(roles)) {
+		return roles.map(r => r.name);
+	}
+	return roles;
+}
+
+const coreRoles = [
+	'alert',
+	'alertdialog',
+	'application',
+	'article',
+	'banner',
+	'blockquote',
+	'button',
+	'caption',
+	'cell',
+	'checkbox',
+	'code',
+	'columnheader',
+	'combobox',
+	'complementary',
+	'contentinfo',
+	'definition',
+	'deletion',
+	'dialog',
+	'directory',
+	'document',
+	'emphasis',
+	'feed',
+	'figure',
+	'form',
+	'generic',
+	'grid',
+	'gridcell',
+	'group',
+	'heading',
+	'img',
+	'insertion',
+	'link',
+	'list',
+	'listbox',
+	'listitem',
+	'log',
+	'main',
+	'marquee',
+	'math',
+	'menu',
+	'menubar',
+	'menuitem',
+	'menuitemcheckbox',
+	'menuitemradio',
+	'meter',
+	'navigation',
+	'none',
+	'note',
+	'option',
+	'paragraph',
+	'presentation',
+	'progressbar',
+	'radio',
+	'radiogroup',
+	'region',
+	'row',
+	'rowgroup',
+	'rowheader',
+	'scrollbar',
+	'search',
+	'searchbox',
+	'separator',
+	'slider',
+	'spinbutton',
+	'status',
+	'strong',
+	'subscript',
+	'superscript',
+	'switch',
+	'tab',
+	'table',
+	'tablist',
+	'tabpanel',
+	'term',
+	'textbox',
+	'time',
+	'timer',
+	'toolbar',
+	'tooltip',
+	'tree',
+	'treegrid',
+	'treeitem',
+];
+
+describe('getPermittedRoles', () => {
+	test('the a element', () => {
+		expect(c('<a></a>', '1.2')).toStrictEqual(coreRoles);
+		expect(c('<a href="path/to"></a>', '1.2')).toStrictEqual([
+			'link',
+			'button',
+			'checkbox',
+			'menuitem',
+			'menuitemcheckbox',
+			'menuitemradio',
+			'option',
+			'radio',
+			'switch',
+			'tab',
+			'treeitem',
+		]);
+	});
+
+	test('the area element', () => {
+		expect(c('<area></area>', '1.2')).toStrictEqual(['button', 'link']);
+		expect(c('<area></area>', '1.1')).toStrictEqual([]);
+		expect(c('<area href="path/to"></area>', '1.2')).toStrictEqual(['link']);
+	});
+
+	test('the figure element', () => {
+		expect(c('<figure></figure>', '1.2')).toStrictEqual(coreRoles);
+		expect(c('<figure><figcaption></figcaption></figure>', '1.2')).toStrictEqual(['figure']);
+	});
+
+	test('the img element', () => {
+		expect(c('<img>', '1.2')).toStrictEqual(['img']);
+		expect(c('<img alt="">', '1.2')).toStrictEqual(['none', 'presentation']);
+		expect(c('<img alt="photo: something">', '1.2')).toStrictEqual([
+			'img',
+			'button',
+			'checkbox',
+			'link',
+			'menuitem',
+			'menuitemcheckbox',
+			'menuitemradio',
+			'option',
+			'progressbar',
+			'radio',
+			'scrollbar',
+			'separator',
+			'slider',
+			'switch',
+			'tab',
+			'treeitem',
+		]);
+		expect(c('<img alt="photo: something">', '1.1')).toStrictEqual([
+			'img',
+			'button',
+			'checkbox',
+			'link',
+			'menuitem',
+			'menuitemcheckbox',
+			'menuitemradio',
+			'option',
+			'progressbar',
+			'scrollbar',
+			'separator',
+			'slider',
+			'switch',
+			'tab',
+			'treeitem',
+		]);
+	});
+
+	test('the input element', () => {
+		expect(c('<input>', '1.2')).toStrictEqual(['textbox', 'combobox', 'searchbox', 'spinbutton']);
+		expect(c('<input>', '1.1')).toStrictEqual(['textbox', 'combobox', 'searchbox', 'spinbutton']);
+		expect(c('<input type="button">', '1.2')).toStrictEqual([
+			'button',
+			'checkbox',
+			'combobox',
+			'link',
+			'menuitem',
+			'menuitemcheckbox',
+			'menuitemradio',
+			'option',
+			'radio',
+			'switch',
+			'tab',
+		]);
+		expect(c('<input type="button">', '1.1')).toStrictEqual([
+			'button',
+			'link',
+			'menuitem',
+			'menuitemcheckbox',
+			'menuitemradio',
+			'option',
+			'radio',
+			'switch',
+			'tab',
+		]);
+		expect(c('<input type="checkbox" aria-pressed="true">', '1.2')).toStrictEqual(['checkbox', 'button']);
+	});
+
+	test('the img element', () => {
+		const imgPermitted = [
+			'img',
+			'button',
+			'checkbox',
+			'link',
+			'menuitem',
+			'menuitemcheckbox',
+			'menuitemradio',
+			'option',
+			'progressbar',
+			'radio',
+			'scrollbar',
+			'separator',
+			'slider',
+			'switch',
+			'tab',
+			'treeitem',
+		];
+		expect(c('<img />', '1.2')).toStrictEqual(['img']);
+		expect(c('<img alt />', '1.2')).toStrictEqual(['none', 'presentation']);
+		expect(c('<img alt="" />', '1.2')).toStrictEqual(['none', 'presentation']);
+		expect(c('<img alt="foo" />', '1.2')).toStrictEqual(imgPermitted);
+		expect(c('<img aria-label="foo" />', '1.2')).toStrictEqual(imgPermitted);
+	});
+
+	test('the form element', () => {
+		expect(c('<form></form>', '1.2')).toStrictEqual(['form', 'none', 'presentation', 'search']);
+		expect(c('<form></form>', '1.1')).toStrictEqual(['none', 'presentation', 'search']);
+		expect(c('<form aria-label="foo"></form>', '1.2')).toStrictEqual(['form', 'none', 'presentation', 'search']);
+		expect(c('<form aria-label="foo"></form>', '1.1')).toStrictEqual(['form', 'none', 'presentation', 'search']);
+	});
+
+	test('the svg element', () => {
+		expect(c('<svg></svg>', '1.2')).toStrictEqual([
+			'alert',
+			'alertdialog',
+			'application',
+			'article',
+			'banner',
+			'blockquote',
+			'button',
+			'caption',
+			'cell',
+			'checkbox',
+			'code',
+			'columnheader',
+			'combobox',
+			'complementary',
+			'contentinfo',
+			'definition',
+			'deletion',
+			'dialog',
+			'directory',
+			'document',
+			'emphasis',
+			'feed',
+			'figure',
+			'form',
+			'generic',
+			'grid',
+			'gridcell',
+			'group',
+			'heading',
+			'img',
+			'insertion',
+			'link',
+			'list',
+			'listbox',
+			'listitem',
+			'log',
+			'main',
+			'marquee',
+			'math',
+			'menu',
+			'menubar',
+			'menuitem',
+			'menuitemcheckbox',
+			'menuitemradio',
+			'meter',
+			'navigation',
+			'none',
+			'note',
+			'option',
+			'paragraph',
+			'presentation',
+			'progressbar',
+			'radio',
+			'radiogroup',
+			'region',
+			'row',
+			'rowgroup',
+			'rowheader',
+			'scrollbar',
+			'search',
+			'searchbox',
+			'separator',
+			'slider',
+			'spinbutton',
+			'status',
+			'strong',
+			'subscript',
+			'superscript',
+			'switch',
+			'tab',
+			'table',
+			'tablist',
+			'tabpanel',
+			'term',
+			'textbox',
+			'time',
+			'timer',
+			'toolbar',
+			'tooltip',
+			'tree',
+			'treegrid',
+			'treeitem',
+			'graphics-document',
+			'graphics-object',
+			'graphics-symbol',
+		]);
+	});
+
+	test('the rect element', () => {
+		expect(c('<svg><rect></rect></svg>', '1.2')).toStrictEqual([
+			'alert',
+			'alertdialog',
+			'application',
+			'article',
+			'banner',
+			'blockquote',
+			'button',
+			'caption',
+			'cell',
+			'checkbox',
+			'code',
+			'columnheader',
+			'combobox',
+			'complementary',
+			'contentinfo',
+			'definition',
+			'deletion',
+			'dialog',
+			'directory',
+			'document',
+			'emphasis',
+			'feed',
+			'figure',
+			'form',
+			'generic',
+			'grid',
+			'gridcell',
+			'group',
+			'heading',
+			'img',
+			'insertion',
+			'link',
+			'list',
+			'listbox',
+			'listitem',
+			'log',
+			'main',
+			'marquee',
+			'math',
+			'menu',
+			'menubar',
+			'menuitem',
+			'menuitemcheckbox',
+			'menuitemradio',
+			'meter',
+			'navigation',
+			'none',
+			'note',
+			'option',
+			'paragraph',
+			'presentation',
+			'progressbar',
+			'radio',
+			'radiogroup',
+			'region',
+			'row',
+			'rowgroup',
+			'rowheader',
+			'scrollbar',
+			'search',
+			'searchbox',
+			'separator',
+			'slider',
+			'spinbutton',
+			'status',
+			'strong',
+			'subscript',
+			'superscript',
+			'switch',
+			'tab',
+			'table',
+			'tablist',
+			'tabpanel',
+			'term',
+			'textbox',
+			'time',
+			'timer',
+			'toolbar',
+			'tooltip',
+			'tree',
+			'treegrid',
+			'treeitem',
+			'graphics-document',
+			'graphics-object',
+			'graphics-symbol',
+		]);
+	});
+});