@markuplint/ml-spec 2.1.0 → 3.0.0-alpha.0

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',
+		]);
+	});
+});

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

@@ -0,0 +1,87 @@
+import type { ARIAVersion, Matches, MLMLSpec } from '../types';
+
+import { mergeArray } from '../utils/merge-array';
+
+import { ariaSpecs } from './aria-specs';
+import { getARIA } from './get-aria';
+
+/**
+ * Getting permitted ARIA roles.
+ *
+ * - If an array, it is role list.
+ * - If `true`, this mean is "Any".
+ * - If `false`, this mean is "No".
+ */
+export function getPermittedRoles(
+	specs: Readonly<MLMLSpec>,
+	localName: string,
+	namespace: string | null,
+	version: ARIAVersion,
+	matches: Matches,
+): { name: string; deprecated?: boolean }[] {
+	const aria = getARIA(specs, localName, namespace, version, matches);
+	if (!aria) {
+		return [];
+	}
+	const { implicitRole, permittedRoles } = aria;
+	const { roles, graphicsRoles } = ariaSpecs(specs, version);
+
+	let permittedRoleList: { name: string }[] = [];
+
+	if (permittedRoles === true) {
+		permittedRoleList = mergeArray(
+			permittedRoleList,
+			roles
+				.filter(role => !role.isAbstract)
+				.map(role => ({
+					name: role.name,
+				})),
+		);
+	}
+
+	if (Array.isArray(permittedRoles)) {
+		permittedRoleList = mergeArray(
+			permittedRoleList,
+			permittedRoles.map(role => {
+				if (typeof role === 'string') {
+					return {
+						name: role,
+					};
+				}
+				return role;
+			}),
+		);
+	} else if (!(typeof permittedRoles === 'boolean')) {
+		if (permittedRoles['core-aam']) {
+			permittedRoleList = mergeArray(
+				permittedRoleList,
+				roles
+					.filter(role => !role.isAbstract)
+					.map(role => ({
+						name: role.name,
+					})),
+			);
+		}
+		if (permittedRoles['graphics-aam']) {
+			permittedRoleList = mergeArray(
+				permittedRoleList,
+				graphicsRoles
+					.filter(role => !role.isAbstract)
+					.map(role => ({
+						name: role.name,
+					})),
+			);
+		}
+	}
+
+	if (implicitRole) {
+		const implicitRoles =
+			implicitRole === 'presentation' || implicitRole === 'none' ? ['none', 'presentation'] : [implicitRole];
+		return mergeArray(
+			implicitRoles.map(r => ({ name: r })),
+			permittedRoleList,
+		);
+	}
+
+	return permittedRoleList;
+}

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

@@ -0,0 +1,67 @@
+import specs from '@markuplint/html-spec';
+
+import { getRoleSpec } from './get-role-spec';
+
+describe('getRoleSpec', () => {
+	test('the button role', () => {
+		const role = getRoleSpec(specs, 'button', 'http://www.w3.org/1999/xhtml', '1.2')!;
+		const superClassRoles = role.superClassRoles.map(r => r.name);
+		expect(role.ownedProperties.map(p => p.name + (p.deprecated ? ':deprecated' : ''))).toStrictEqual([
+			'aria-atomic',
+			'aria-busy',
+			'aria-controls',
+			'aria-current',
+			'aria-describedby',
+			'aria-details',
+			'aria-disabled',
+			'aria-dropeffect',
+			'aria-errormessage:deprecated',
+			'aria-expanded',
+			'aria-flowto',
+			'aria-grabbed',
+			'aria-haspopup',
+			'aria-hidden',
+			'aria-invalid:deprecated',
+			'aria-keyshortcuts',
+			'aria-label',
+			'aria-labelledby',
+			'aria-live',
+			'aria-owns',
+			'aria-pressed',
+			'aria-relevant',
+			'aria-roledescription',
+		]);
+		expect(role.isAbstract).toBe(false);
+		expect(superClassRoles).toStrictEqual(['command', 'widget', 'roletype']);
+	});
+
+	test('the roletype role', () => {
+		const role = getRoleSpec(specs, 'roletype', 'http://www.w3.org/1999/xhtml', '1.2')!;
+		const superClassRoles = role.superClassRoles.map(r => r.name);
+		expect(role.ownedProperties.map(p => p.name + (p.deprecated ? ':deprecated' : ''))).toStrictEqual([
+			'aria-atomic',
+			'aria-busy',
+			'aria-controls',
+			'aria-current',
+			'aria-describedby',
+			'aria-details',
+			'aria-disabled:deprecated',
+			'aria-dropeffect',
+			'aria-errormessage:deprecated',
+			'aria-flowto',
+			'aria-grabbed',
+			'aria-haspopup:deprecated',
+			'aria-hidden',
+			'aria-invalid:deprecated',
+			'aria-keyshortcuts',
+			'aria-label',
+			'aria-labelledby',
+			'aria-live',
+			'aria-owns',
+			'aria-relevant',
+			'aria-roledescription',
+		]);
+		expect(role.isAbstract).toBe(true);
+		expect(superClassRoles).toStrictEqual([]);
+	});
+});

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

@@ -0,0 +1,72 @@
+import type { ARIAVersion, ARIARoleInSchema, MLMLSpec, ARIARole } from '../types';
+import type { NamespaceURI } from '@markuplint/ml-ast';
+
+import { ariaSpecs } from './aria-specs';
+
+export function getRoleSpec(
+	specs: Readonly<MLMLSpec>,
+	roleName: string,
+	namespace: NamespaceURI,
+	version: ARIAVersion,
+): (ARIARole & { superClassRoles: ARIARoleInSchema[] }) | null {
+	const role = getRoleByName(specs, roleName, namespace, version);
+	if (!role) {
+		return null;
+	}
+	const superClassRoles = recursiveTraverseSuperClassRoles(specs, roleName, namespace, version);
+	return {
+		name: role.name,
+		isAbstract: !!role.isAbstract,
+		requiredContextRole: role.requiredContextRole ?? [],
+		requiredOwnedElements: role.requiredOwnedElements ?? [],
+		accessibleNameRequired: !!role.accessibleNameRequired,
+		accessibleNameFromAuthor: !!role.accessibleNameFromAuthor,
+		accessibleNameFromContent: !!role.accessibleNameFromContent,
+		accessibleNameProhibited: !!role.accessibleNameProhibited,
+		childrenPresentational: !!role.childrenPresentational,
+		ownedProperties: role.ownedProperties ?? [],
+		prohibitedProperties: role.prohibitedProperties ?? [],
+		superClassRoles,
+	};
+}
+
+function recursiveTraverseSuperClassRoles(
+	specs: Readonly<MLMLSpec>,
+	roleName: string,
+	namespace: NamespaceURI,
+	version: ARIAVersion,
+) {
+	const roles: ARIARoleInSchema[] = [];
+	const superClassRoles = getSuperClassRoles(specs, roleName, namespace, version);
+	if (superClassRoles) {
+		roles.push(...superClassRoles);
+		for (const superClassRole of superClassRoles) {
+			const ancestorRoles = recursiveTraverseSuperClassRoles(specs, superClassRole.name, namespace, version);
+			roles.push(...ancestorRoles);
+		}
+	}
+	return roles;
+}
+
+function getSuperClassRoles(
+	specs: Readonly<MLMLSpec>,
+	roleName: string,
+	namespace: NamespaceURI,
+	version: ARIAVersion,
+) {
+	const role = getRoleByName(specs, roleName, namespace, version);
+	return (
+		role?.generalization
+			?.map(roleName => getRoleByName(specs, roleName, namespace, version))
+			.filter((role): role is ARIARoleInSchema => !!role) || null
+	);
+}
+
+function getRoleByName(specs: Readonly<MLMLSpec>, roleName: string, namespace: NamespaceURI, version: ARIAVersion) {
+	const { roles, graphicsRoles } = ariaSpecs(specs, version);
+	let role = roles.find(r => r.name === roleName);
+	if (!role && namespace === 'http://www.w3.org/2000/svg') {
+		role = graphicsRoles.find(r => r.name === roleName);
+	}
+	return role;
+}

package/src/specs/get-selectors-by-content-model-category.ts

@@ -0,0 +1,10 @@
+import type { MLMLSpec } from '../types';
+import type { Category } from '../types/permitted-structres';
+
+export function getSelectorsByContentModelCategory(
+	specs: Readonly<MLMLSpec>,
+	category: Category,
+): ReadonlyArray<string> {
+	const selectors = specs.def['#contentModels'][category];
+	return selectors || [];
+}