@markuplint/ml-spec 2.1.1 → 3.0.0-alpha.1

package/schemas/content-models.schema.json

@@ -0,0 +1,200 @@
+{
+	"definitions": {
+		"ContentModel": {
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["contents"],
+			"properties": {
+				"contents": {
+					"oneOf": [
+						{
+							"type": "array",
+							"items": { "$ref": "#/definitions/PermittedContentPattern" }
+						},
+						{ "type": "boolean" }
+					]
+				},
+				"descendantOf": { "type": "string" },
+				"conditional": {
+					"type": "array",
+					"items": {
+						"type": "object",
+						"additionalProperties": false,
+						"required": ["condition", "contents"],
+						"properties": {
+							"condition": {
+								"type": "string"
+							},
+							"contents": {
+								"oneOf": [
+									{
+										"type": "array",
+										"items": { "$ref": "#/definitions/PermittedContentPattern" }
+									},
+									{ "type": "boolean" }
+								]
+							}
+						}
+					}
+				}
+			}
+		},
+		"ContentType": {
+			"oneOf": [
+				{
+					"description": "Element",
+					"type": "string",
+					"pattern": "^[^#]+$"
+				},
+				{ "$ref": "#/definitions/Category" }
+			]
+		},
+		"Category": {
+			"type": "string",
+			"enum": [
+				"#text",
+				"#phrasing",
+				"#flow",
+				"#interactive",
+				"#heading",
+				"#sectioning",
+				"#metadata",
+				"#embedded",
+				"#palpable",
+				"#script-supporting",
+				"#SVGAnimation",
+				"#SVGBasicShapes",
+				"#SVGContainer",
+				"#SVGDescriptive",
+				"#SVGFilterPrimitive",
+				"#SVGFont",
+				"#SVGGradient",
+				"#SVGGraphics",
+				"#SVGGraphicsReferencing",
+				"#SVGLightSource",
+				"#SVGNeverRendered",
+				"#SVGNone",
+				"#SVGPaintServer",
+				"#SVGRenderable",
+				"#SVGShape",
+				"#SVGStructural",
+				"#SVGStructurallyExternal",
+				"#SVGTextContent",
+				"#SVGTextContentChild",
+				"#SVGOtherXMLNamespace"
+			]
+		},
+		"Model": {
+			"oneOf": [
+				{ "$ref": "#/definitions/ContentType" },
+				{
+					"type": "array",
+					"items": { "$ref": "#/definitions/ContentType" },
+					"uniqueItems": true
+				}
+			]
+		},
+		"PermittedContentPattern": {
+			"type": "object",
+			"oneOf": [
+				{ "$ref": "#/definitions/PermittedContentRequire" },
+				{ "$ref": "#/definitions/PermittedContentOptional" },
+				{ "$ref": "#/definitions/PermittedContentOneOrMore" },
+				{ "$ref": "#/definitions/PermittedContentZeroOrMore" },
+				{ "$ref": "#/definitions/PermittedContentChoice" },
+				{ "$ref": "#/definitions/PermittedContentTransparent" }
+			]
+		},
+		"PermittedContentRequire": {
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["require"],
+			"properties": {
+				"require": { "$ref": "#/definitions/Model" },
+				"max": { "type": "number" },
+				"min": { "type": "number" },
+				"_TODO_": { "type": "string" }
+			}
+		},
+		"PermittedContentOptional": {
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["optional"],
+			"properties": {
+				"optional": { "$ref": "#/definitions/Model" },
+				"max": { "type": "number" },
+				"_TODO_": { "type": "string" }
+			}
+		},
+		"PermittedContentOneOrMore": {
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["oneOrMore"],
+			"properties": {
+				"oneOrMore": {
+					"oneOf": [
+						{ "$ref": "#/definitions/Model" },
+						{
+							"type": "array",
+							"items": { "$ref": "#/definitions/PermittedContentPattern" }
+						}
+					]
+				},
+				"max": { "type": "number" },
+				"_TODO_": { "type": "string" }
+			}
+		},
+		"PermittedContentZeroOrMore": {
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["zeroOrMore"],
+			"properties": {
+				"zeroOrMore": {
+					"oneOf": [
+						{ "$ref": "#/definitions/Model" },
+						{
+							"type": "array",
+							"items": { "$ref": "#/definitions/PermittedContentPattern" }
+						}
+					]
+				},
+				"max": { "type": "number" },
+				"_TODO_": { "type": "string" }
+			}
+		},
+		"PermittedContentChoice": {
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["choice"],
+			"properties": {
+				"choice": {
+					"type": "array",
+					"items": {
+						"type": "array",
+						"items": { "$ref": "#/definitions/PermittedContentPattern" }
+					},
+					"minItems": 2,
+					"maxItems": 5
+				},
+				"_TODO_": { "type": "string" }
+			}
+		},
+		"PermittedContentTransparent": {
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["transparent"],
+			"properties": {
+				"transparent": {
+					"type": "string"
+				}
+			}
+		}
+	},
+	"type": "object",
+	"additionalProperties": false,
+	"properties": {
+		"__contentModel": {
+			"$ref": "#/definitions/ContentModel"
+		}
+	}
+}

package/schemas/element.schema.json

@@ -0,0 +1,11 @@
+{
+	"type": "object",
+	"additionalProperties": false,
+	"required": ["contentModel", "globalAttrs", "attributes", "aria"],
+	"properties": {
+		"contentModel": { "$ref": "./content-models.schema.json#/definitions/ContentModel" },
+		"globalAttrs": { "$ref": "./attributes.schema.json#/definitions/GlobalAttributes" },
+		"attributes": { "$ref": "./attributes.schema.json#/definitions/Attributes" },
+		"aria": { "$ref": "./aria.schema.json#/definitions/ARIA" }
+	}
+}

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

@@ -0,0 +1,69 @@
+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="alterative-text" />'))).toBe('alterative-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');
+});
+
+/**
+ * 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');
+});
+
+/**
+ * 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

@@ -0,0 +1,5 @@
+import { computeAccessibleName } from 'dom-accessibility-api';
+
+export function getAccname(el: Element) {
+	return computeAccessibleName(el);
+}

package/src/dom-traverse/get-attr-specs.ts

@@ -0,0 +1,8 @@
+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-role.spec.ts

@@ -0,0 +1,134 @@
+import type { ARIAVersion } from '../types';
+
+import specs from '@markuplint/html-spec';
+import { createSelector } from '@markuplint/selector';
+import { createJSDOMElement } from '@markuplint/test-tools';
+
+import { getComputedRole } from './get-computed-role';
+
+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 getComputedRole(specs, _(html, selector), version);
+}
+
+function tree(html: string, version: ARIAVersion) {
+	const el = _(html);
+	const tree: [string, string | null][] = [];
+	let current: Element | null = el;
+	while (current) {
+		tree.push([current.localName, getComputedRole(specs, current, version).role?.name || null]);
+		current = current.children.item(0);
+	}
+	return tree;
+}
+
+describe('getComputedRole', () => {
+	test('the a element', () => {
+		expect(c('<a></a>', '1.2').role?.name).toBe(undefined);
+		expect(c('<a href></a>', '1.2').role?.name).toBe('link');
+		expect(c('<a role="button"></a>', '1.2').role?.name).toBe('button');
+		expect(c('<a role="button" href></a>', '1.2').role?.name).toBe('button');
+		expect(c('<a role="foo" href></a>', '1.2').role?.name).toBe('link');
+	});
+
+	test('the heading role', () => {
+		expect(c('<h1></h1>', '1.2').role?.name).toBe('heading');
+		expect(c('<h1></h1>', '1.2').role?.isImplicit).toBe(true);
+		expect(c('<div role="heading"></div>', '1.2').role?.name).toBe('heading');
+		expect(c('<div role="heading"></div>', '1.2').role?.isImplicit).toBe(false);
+	});
+
+	test('multiple', () => {
+		expect(c('<div role="presentation heading"></div>', '1.2').role?.name).toBe('presentation');
+		expect(c('<div role="roletype heading"></div>', '1.2').role?.name).toBe('heading');
+		expect(c('<img alt="alt" role="banner button"/>', '1.2').role?.name).toBe('button');
+		expect(c('<img alt="alt" role="foo button"/>', '1.2').role?.name).toBe('button');
+		expect(c('<img alt="alt" role="graphics-symbol button"/>', '1.2').role?.name).toBe('button');
+	});
+
+	test('svg', () => {
+		expect(c('<svg><rect role="graphics-symbol img"></rect></svg>', '1.2', 'rect').role?.name).toBe(
+			'graphics-symbol',
+		);
+		expect(c('<svg><rect role="roletype img"></rect></svg>', '1.2', 'rect').role?.name).toBe('img');
+		expect(c('<svg><rect role="roletype"></rect></svg>', '1.2', 'rect').role?.name).toBe('graphics-symbol');
+	});
+
+	test('landmark', () => {
+		expect(c('<div role="region"></div>', '1.2').role?.name).toBe('generic');
+		expect(c('<div role="region" aria-label="foo"></div>', '1.2').role?.name).toBe('region');
+		expect(c('<div role="form"></div>', '1.2').role?.name).toBe('generic');
+		expect(c('<div role="form" aria-label="foo"></div>', '1.2').role?.name).toBe('form');
+		expect(c('<div role="navigation"></div>', '1.2').role?.name).toBe('navigation');
+		expect(c('<div role="navigation" aria-label="foo"></div>', '1.2').role?.name).toBe('navigation');
+	});
+
+	test('Presentational Roles Conflict Resolution (1) Interactive Elements', () => {
+		expect(c('<a href="path/to"></a>', '1.2').role?.name).toBe('link');
+		expect(c('<a role="none" href="path/to"></a>', '1.2').role?.name).toBe('link'); // No permitted role
+		expect(c('<a></a>', '1.2').role?.name).toBe(undefined);
+		expect(c('<a role="none"></a>', '1.2').role?.name).toBe('none');
+		expect(c('<a role="none" href="path/to" disabled></a>', '1.2').role?.name).toBe('link'); // No permitted role
+		expect(c('<button></button>', '1.2').role?.name).toBe('button');
+		expect(c('<button disabled></button>', '1.2').role?.name).toBe('button');
+		expect(c('<button role="none"></button>', '1.2').role?.name).toBe('button'); // No permitted role
+		expect(c('<button role="none" disabled></button>', '1.2').role?.name).toBe('button'); // No permitted role
+		expect(c('<div></div>', '1.2').role?.name).toBe('generic');
+		expect(c('<div role="none"></div>', '1.2').role?.name).toBe('none');
+		expect(c('<div tabindex="0"></div>', '1.2').role?.name).toBe('generic');
+		expect(c('<div tabindex="0" role="none"></div>', '1.2').role?.name).toBe('generic');
+		expect(c('<div><span></span></div>', '1.2', 'span').role?.name).toBe(undefined);
+		expect(c('<div><span role="none"></span></div>', '1.2', 'span').role?.name).toBe('none');
+		expect(c('<div><span tabindex="0"></span></div>', '1.2', 'span').role?.name).toBe(undefined);
+		expect(c('<div><span tabindex="0" role="none"></span></div>', '1.2', 'span').role?.name).toBe(undefined);
+		expect(c('<div hidden><span></span></div>', '1.2', 'span').role?.name).toBe(undefined);
+		expect(c('<div hidden><span role="none"></span></div>', '1.2', 'span').role?.name).toBe('none');
+		expect(c('<div hidden><span tabindex="0"></span></div>', '1.2', 'span').role?.name).toBe(undefined);
+		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 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(
+			'rowgroup',
+		);
+		expect(c('<ul><li></li></ul>', '1.2', 'li').role?.name).toBe('listitem');
+		expect(c('<ul><li role="presentation"></li></ul>', '1.2', 'li').role?.name).toBe('listitem');
+	});
+
+	test('Presentational Roles Conflict Resolution (2-2) the accessibility tree to be malformed', () => {
+		expect(c('<table><tr><td>foo</td></tr></table>', '1.2', 'td').role?.name).toBe('cell');
+		expect(c('<table role="none"><tr><td>foo</td></tr></table>', '1.2', 'td').role?.name).toBe(undefined);
+		expect(tree('<table><tr><td>foo</td></tr></table>', '1.2')).toStrictEqual([
+			['table', 'table'],
+			['tbody', 'rowgroup'],
+			['tr', 'row'],
+			['td', 'cell'],
+		]);
+		expect(tree('<table role="none"><tr><td>foo</td></tr></table>', '1.2')).toStrictEqual([
+			['table', 'none'],
+			['tbody', null],
+			['tr', null],
+			['td', null],
+		]);
+	});
+
+	test('Presentational Roles Conflict Resolution (3) Global Props', () => {
+		/**
+		 * @see https://w3c.github.io/aria/#example-41
+		 */
+		expect(c('<h1 role="presentation" aria-describedby="comment-1"> Sample Content </h1>', '1.2').role?.name).toBe(
+			'heading',
+		);
+		expect(c('<h1 role="presentation" aria-level="2"> Sample Content </h1>', '1.2').role?.name).toBe(
+			'presentation',
+		);
+	});
+});

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

@@ -0,0 +1,181 @@
+import type { ARIAVersion, ComputedRole, MLMLSpec } from '../types';
+
+import { ariaSpecs } from '../specs/aria-specs';
+import { isPresentational } from '../specs/is-presentational';
+
+import { getAttrSpecs } from './get-attr-specs';
+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);
+	const explicitRole = getExplicitRole(specs, el, version);
+	const computedRole = explicitRole.role ? explicitRole : implicitRole;
+
+	/**
+	 * Presentational Roles Conflict Resolution
+	 *
+	 * @see https://www.w3.org/TR/wai-aria/#conflict_resolution_presentation_none
+	 * @see https://w3c.github.io/aria/#conflict_resolution_presentation_none
+	 */
+
+	/**
+	 * > If the action of exposing the explicit role
+	 * > causes the accessibility tree to be malformed,
+	 * > the expected results are undefined.
+	 *
+	 * Determines whether the context is valid.
+	 * ⚠ THE SPECIFICATION HAS AN ISSUE
+	 * that has not decided whether the context is a parent or an ancestor.
+	 *
+	 * @see https://github.com/w3c/aria/issues/1033
+	 * @see https://github.com/w3c/aria/issues/748
+	 * @see https://github.com/w3c/aria/pull/1162
+	 * @see https://github.com/w3c/aria/pull/1213
+	 *
+	 * Currently, this process interprets that as A PARENT
+	 * because it wants to be near to HTML semantics.
+	 * However, the presentational role behaves transparently
+	 * according to the sample code in WAI-ARIA specification.
+	 */
+	if (computedRole.role?.requiredContextRole.length) {
+		const nonPresentationalAncestor = getNonPresentationalAncestor(el, specs, version);
+		if (!nonPresentationalAncestor.role) {
+			return {
+				el,
+				role: null,
+				errorType: 'NO_OWNER',
+			};
+		}
+		if (!computedRole.role?.requiredContextRole.includes(nonPresentationalAncestor.role.name)) {
+			return {
+				el,
+				role: null,
+				errorType: 'INVALID_REQUIRED_CONTEXT_ROLE',
+			};
+		}
+	}
+
+	if (computedRole.role && !isPresentational(computedRole.role.name)) {
+		return computedRole;
+	}
+
+	/**
+	 * > If an element is focusable,
+	 * > user agents MUST ignore the presentation/none role
+	 * > and expose the element with its implicit role,
+	 * > in order to ensure that the element is operable.
+	 *
+	 * With the issue: What does focusable or otherwise interactive mean](https://github.com/w3c/aria/issues/1192)
+	 *
+	 * - Focus: https://html.spec.whatwg.org/multipage/interaction.html#focus
+	 * - Interactive content: https://html.spec.whatwg.org/multipage/dom.html#interactive-content
+	 */
+	if (
+		/**
+		 * 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`).
+		 */
+		mayBeFocusable(el, specs) &&
+		/**
+		 * 2. No disabled
+		 */
+		!someAncestors(el, p => isEnabledAttr(p, specs, 'disabled')) &&
+		/**
+		 * 3. No inert
+		 */
+		!someAncestors(el, p => isEnabledAttr(p, specs, 'inert')) &&
+		/**
+		 * 4. No hidden
+		 */
+		!someAncestors(el, p => isEnabledAttr(p, specs, 'hidden'))
+	) {
+		return {
+			...implicitRole,
+			errorType: 'INTERACTIVE_ELEMENT_MUST_NOT_BE_PRESENTATIONAL',
+		};
+	}
+
+	/**
+	 * > If a required owned element has an explicit non-presentational role,
+	 * > user agents MUST ignore an inherited presentational role
+	 * > and expose the element with its explicit role.
+	 *
+	 * In other words,
+	 * if the element has `role=presentation` and
+	 * the role of the parent element has a required owned element,
+	 * `role=presentation` is to be ignored absolutely.
+	 */
+	if (explicitRole.role) {
+		const nonPresentationalAncestor = getNonPresentationalAncestor(el, specs, version);
+		if (nonPresentationalAncestor.role?.requiredOwnedElements.length) {
+			if (
+				nonPresentationalAncestor.role.requiredOwnedElements.some(expected => {
+					// const ancestor = nonPresentationalAncestor.el;
+					// const ancestorImplicitRole = getImplicitRole(specs, ancestor, version);
+					// console.log({ nonPresentationalAncestor, ancestorImplicitRole });
+					return isRequiredOwnedElement(implicitRole, expected, specs, version);
+				})
+			) {
+				return {
+					...implicitRole,
+					errorType: 'REQUIRED_OWNED_ELEMENT_MUST_NOT_BE_PRESENTATIONAL',
+				};
+			}
+		}
+	}
+
+	/**
+	 * > If an element has global WAI-ARIA states or properties,
+	 * > user agents MUST ignore the presentation role
+	 * > and instead expose the element's implicit role.
+	 * > However, if an element has only non-global,
+	 * > role-specific WAI-ARIA states or properties,
+	 * > the element MUST NOT be exposed
+	 * > unless the presentational role is inherited
+	 * > and an explicit non-presentational role is applied.
+	 */
+	const { props } = ariaSpecs(specs, version);
+	for (const attr of Array.from(el.attributes)) {
+		if (props.find(p => p.name === attr.name)?.isGlobal) {
+			return {
+				...implicitRole,
+				errorType: 'GLOBAL_PROP_MUST_NOT_BE_PRESENTATIONAL',
+			};
+		}
+	}
+
+	return computedRole;
+}
+
+/**
+ * The attribute is available in its owner element,
+ * it has the attribute.
+ */
+function isEnabledAttr(el: Element, specs: MLMLSpec, attrName: string) {
+	const attrs = getAttrSpecs(el, specs);
+	const attr = attrs?.find(attr => attr.name === attrName);
+	return !!attr && el.hasAttribute(attrName);
+}
+
+/**
+ * Determines whether some ancestors match the condition that the specified callback function.
+ */
+function someAncestors(el: Element, predicate: (ancestor: Element) => boolean) {
+	const list: Element[] = [];
+	let current: Element | null = el;
+	while (current) {
+		list.push(current);
+		current = current.parentElement;
+	}
+	return list.some(predicate);
+}

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;
+}