@markuplint/ml-spec 3.6.1 → 3.8.0

package/test/dom-traverse/get-computed-role.spec.js

@@ -0,0 +1,294 @@
+const specs = require('@markuplint/html-spec');
+const { createSelector } = require('@markuplint/selector');
+const { createJSDOMElement } = require('@markuplint/test-tools');
+
+const { getComputedRole } = require('../../lib/dom-traverse/get-computed-role');
+
+function _(html, selector) {
+	return createJSDOMElement(html, selector, function (selector) {
+		// JSDOM supports no level 4 selectors yet.
+		return createSelector(selector, specs).match(this) !== false;
+	});
+}
+
+function c(html, version, selector) {
+	return getComputedRole(specs, _(html, selector), version);
+}
+
+function tree(html, version) {
+	const el = _(html);
+	const tree = [];
+	let current = el;
+	// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+	while (current) {
+		const role = getComputedRole(specs, current, version);
+		const result = [current.localName, role.role?.name ?? null];
+		if (role.errorType) {
+			result.push(role.errorType);
+		}
+		tree.push(result);
+		current = current.children.item(0);
+	}
+	return tree;
+}
+
+describe('1.2', () => {
+	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('generic');
+		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('generic');
+		expect(c('<div><span tabindex="0" role="none"></span></div>', '1.2', 'span').role?.name).toBe('generic');
+		expect(c('<div hidden><span></span></div>', '1.2', 'span').role?.name).toBe('generic');
+		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('generic');
+		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, 'NO_OWNER'],
+			['tr', null, 'NO_OWNER'],
+			['td', null /* NOT MATCHING THE CONDITIONS */],
+		]);
+		expect(
+			tree(
+				'<table role="table"><tbody role="rowgroup"><tr role="row"><td role="gridcell"></td></tr></tbody></table>',
+				'1.2',
+			),
+		).toStrictEqual([
+			['table', 'table'],
+			['tbody', 'rowgroup'],
+			['tr', 'row'],
+			['td', 'cell', 'NO_PERMITTED'],
+		]);
+		expect(
+			tree(
+				'<table role="grid"><tbody role="rowgroup"><tr role="row"><td role="gridcell"></td></tr></tbody></table>',
+				'1.2',
+			),
+		).toStrictEqual([
+			['table', 'grid'],
+			['tbody', 'rowgroup'],
+			['tr', 'row'],
+			['td', 'gridcell'],
+		]);
+	});
+
+	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',
+		);
+	});
+});
+
+describe('1.3', () => {
+	test('the a element', () => {
+		expect(c('<a></a>', '1.3').role?.name).toBe(undefined);
+		expect(c('<a href></a>', '1.3').role?.name).toBe('link');
+		expect(c('<a role="button"></a>', '1.3').role?.name).toBe('button');
+		expect(c('<a role="button" href></a>', '1.3').role?.name).toBe('button');
+		expect(c('<a role="foo" href></a>', '1.3').role?.name).toBe('link');
+	});
+
+	test('the heading role', () => {
+		expect(c('<h1></h1>', '1.3').role?.name).toBe('heading');
+		expect(c('<h1></h1>', '1.3').role?.isImplicit).toBe(true);
+		expect(c('<div role="heading"></div>', '1.3').role?.name).toBe('heading');
+		expect(c('<div role="heading"></div>', '1.3').role?.isImplicit).toBe(false);
+	});
+
+	test('multiple', () => {
+		expect(c('<div role="presentation heading"></div>', '1.3').role?.name).toBe('presentation');
+		expect(c('<div role="roletype heading"></div>', '1.3').role?.name).toBe('heading');
+		expect(c('<img alt="alt" role="banner button"/>', '1.3').role?.name).toBe('button');
+		expect(c('<img alt="alt" role="foo button"/>', '1.3').role?.name).toBe('button');
+		expect(c('<img alt="alt" role="graphics-symbol button"/>', '1.3').role?.name).toBe('button');
+	});
+
+	test('svg', () => {
+		expect(c('<svg><rect role="graphics-symbol img"></rect></svg>', '1.3', 'rect').role?.name).toBe(
+			'graphics-symbol',
+		);
+		expect(c('<svg><rect role="roletype img"></rect></svg>', '1.3', 'rect').role?.name).toBe('img');
+		expect(c('<svg><rect role="roletype"></rect></svg>', '1.3', 'rect').role?.name).toBe('graphics-symbol');
+	});
+
+	test('landmark', () => {
+		expect(c('<div role="region"></div>', '1.3').role?.name).toBe('generic');
+		expect(c('<div role="region" aria-label="foo"></div>', '1.3').role?.name).toBe('region');
+		expect(c('<div role="form"></div>', '1.3').role?.name).toBe('generic');
+		expect(c('<div role="form" aria-label="foo"></div>', '1.3').role?.name).toBe('form');
+		expect(c('<div role="navigation"></div>', '1.3').role?.name).toBe('navigation');
+		expect(c('<div role="navigation" aria-label="foo"></div>', '1.3').role?.name).toBe('navigation');
+	});
+
+	test('Presentational Roles Conflict Resolution (1) Interactive Elements', () => {
+		expect(c('<a href="path/to"></a>', '1.3').role?.name).toBe('link');
+		expect(c('<a role="none" href="path/to"></a>', '1.3').role?.name).toBe('link'); // No permitted role
+		expect(c('<a></a>', '1.3').role?.name).toBe(undefined);
+		expect(c('<a role="none"></a>', '1.3').role?.name).toBe('none');
+		expect(c('<a role="none" href="path/to" disabled></a>', '1.3').role?.name).toBe('link'); // No permitted role
+		expect(c('<button></button>', '1.3').role?.name).toBe('button');
+		expect(c('<button disabled></button>', '1.3').role?.name).toBe('button');
+		expect(c('<button role="none"></button>', '1.3').role?.name).toBe('button'); // No permitted role
+		expect(c('<button role="none" disabled></button>', '1.3').role?.name).toBe('button'); // No permitted role
+		expect(c('<div></div>', '1.3').role?.name).toBe('generic');
+		expect(c('<div role="none"></div>', '1.3').role?.name).toBe('none');
+		expect(c('<div tabindex="0"></div>', '1.3').role?.name).toBe('generic');
+		expect(c('<div tabindex="0" role="none"></div>', '1.3').role?.name).toBe('generic');
+		expect(c('<div><span></span></div>', '1.3', 'span').role?.name).toBe('generic');
+		expect(c('<div><span role="none"></span></div>', '1.3', 'span').role?.name).toBe('none');
+		expect(c('<div><span tabindex="0"></span></div>', '1.3', 'span').role?.name).toBe('generic');
+		expect(c('<div><span tabindex="0" role="none"></span></div>', '1.3', 'span').role?.name).toBe('generic');
+		expect(c('<div hidden><span></span></div>', '1.3', 'span').role?.name).toBe('generic');
+		expect(c('<div hidden><span role="none"></span></div>', '1.3', 'span').role?.name).toBe('none');
+		expect(c('<div hidden><span tabindex="0"></span></div>', '1.3', 'span').role?.name).toBe('generic');
+		expect(c('<div hidden><span tabindex="0" role="none"></span></div>', '1.3', '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.3', 'td').role?.name).toBe('cell');
+		expect(c('<table><tr><td role="none">foo</td></tr></table>', '1.3', 'td').role?.name).toBe('cell');
+		expect(c('<table><tbody role="none"><tr><td>foo</td></tr></tbody></table>', '1.3', 'tbody').role?.name).toBe(
+			'rowgroup',
+		);
+		expect(c('<ul><li></li></ul>', '1.3', 'li').role?.name).toBe('listitem');
+		expect(c('<ul><li role="presentation"></li></ul>', '1.3', '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.3', 'td').role?.name).toBe('cell');
+		expect(c('<table role="none"><tr><td>foo</td></tr></table>', '1.3', 'td').role?.name).toBe(undefined);
+		expect(tree('<table><tr><td>foo</td></tr></table>', '1.3')).toStrictEqual([
+			['table', 'table'],
+			['tbody', 'rowgroup'],
+			['tr', 'row'],
+			['td', 'cell'],
+		]);
+		expect(tree('<table role="none"><tr><td>foo</td></tr></table>', '1.3')).toStrictEqual([
+			['table', 'none'],
+			['tbody', null, 'NO_OWNER'],
+			['tr', null, 'INVALID_REQUIRED_CONTEXT_ROLE'],
+			['td', null /* NOT MATCHING THE CONDITIONS */],
+		]);
+		expect(
+			tree(
+				'<table role="table"><tbody role="rowgroup"><tr role="row"><td role="gridcell"></td></tr></tbody></table>',
+				'1.3',
+			),
+		).toStrictEqual([
+			['table', 'table'],
+			['tbody', 'rowgroup'],
+			['tr', 'row'],
+			['td', 'cell', 'NO_PERMITTED'],
+		]);
+		expect(
+			tree(
+				'<table role="grid"><tbody role="rowgroup"><tr role="row"><td role="gridcell"></td></tr></tbody></table>',
+				'1.3',
+			),
+		).toStrictEqual([
+			['table', 'grid'],
+			['tbody', 'rowgroup'],
+			['tr', 'row'],
+			['td', 'gridcell'],
+		]);
+	});
+
+	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.3').role?.name).toBe(
+			'heading',
+		);
+		expect(c('<h1 role="presentation" aria-level="2"> Sample Content </h1>', '1.3').role?.name).toBe(
+			'presentation',
+		);
+	});
+});
+
+describe('Issues', () => {
+	test('#778', () => {
+		expect(c('<td role="gridcell"></td>', '1.2').role?.name).toBe('gridcell');
+		expect(c('<td role="gridcell"></td>', '1.3').role?.name).toBe('gridcell');
+	});
+});

package/test/dom-traverse/get-implicit-role.spec.js

@@ -0,0 +1,40 @@
+const specs = require('@markuplint/html-spec');
+const { createSelector } = require('@markuplint/selector');
+const { createJSDOMElement } = require('@markuplint/test-tools');
+
+const { getImplicitRole } = require('../../lib/dom-traverse/get-implicit-role');
+
+function _(html, selector) {
+	return createJSDOMElement(html, selector, function (selector) {
+		// JSDOM supports no level 4 selectors yet.
+		return createSelector(selector, specs).match(this) !== false;
+	});
+}
+
+describe('1.2', () => {
+	test('<button>', () => {
+		const el = _('<button></button>');
+		const role = getImplicitRole(specs, el, '1.2');
+		expect(role.role?.name).toBe('button');
+	});
+
+	test('<td>', () => {
+		const el = _('<table><tr><td></td></tr></table>', 'td');
+		const role = getImplicitRole(specs, el, '1.2');
+		expect(role.role?.name).toBe('cell');
+	});
+});
+
+describe('1.3', () => {
+	test('<button>', () => {
+		const el = _('<button></button>');
+		const role = getImplicitRole(specs, el, '1.3');
+		expect(role.role?.name).toBe('button');
+	});
+
+	test('<td>', () => {
+		const el = _('<table><tr><td></td></tr></table>', 'td');
+		const role = getImplicitRole(specs, el, '1.3');
+		expect(role.role?.name).toBe('cell');
+	});
+});

package/test/dom-traverse/has-required-owned-elements.spec.js

@@ -0,0 +1,34 @@
+const specs = require('@markuplint/html-spec');
+const { createSelector } = require('@markuplint/selector');
+const { createJSDOMElement } = require('@markuplint/test-tools');
+
+const { hasRequiredOwnedElement } = require('../../lib/dom-traverse/has-required-owned-elements');
+
+function _(html, selector) {
+	return createJSDOMElement(html, selector, function (selector) {
+		// JSDOM supports no level 4 selectors yet.
+		return createSelector(selector, specs).match(this) !== false;
+	});
+}
+
+function m(html, version, selector) {
+	const el = _(html, selector);
+	return hasRequiredOwnedElement(el, specs, version);
+}
+
+describe('matchesOwnedRole', () => {
+	test('rowgroup > row', () => {
+		expect(m('<table><tbody><tr><td></td></tr></tbody></table>', '1.2')).toBe(true);
+	});
+	test('row', () => {
+		expect(m('<table><tr><td></td></tr></table>', '1.2', 'tr')).toBe(true);
+	});
+	test('list > listitem', () => {
+		expect(m('<ul><li></li></ul>', '1.2')).toBe(true);
+		expect(m('<ul><div><li></li></div></ul>', '1.2')).toBe(false);
+		expect(m('<ul><div role="none"><li></li></div></ul>', '1.2')).toBe(true);
+		expect(
+			m('<ul><div role="none"><div role="none"><div role="none"><li></li></div></div></div></ul>', '1.2'),
+		).toBe(true);
+	});
+});

package/test/dom-traverse/is-exposed.spec.js

@@ -0,0 +1,70 @@
+const specs = require('@markuplint/html-spec');
+const { createSelector } = require('@markuplint/selector');
+const { createJSDOMElement } = require('@markuplint/test-tools');
+
+const { isExposed } = require('../../lib/dom-traverse/is-exposed');
+
+function _(html, selector) {
+	return createJSDOMElement(html, selector, function (selector) {
+		// JSDOM supports no level 4 selectors yet.
+		return createSelector(selector, specs).match(this) !== false;
+	});
+}
+
+function x(html, selector, version = '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);
+	});
+
+	test('Recent element', () => {
+		expect(x('<canvas></canvas>')).toBe(true);
+		expect(x('<dialog></dialog>')).toBe(true);
+		expect(x('<details></details>')).toBe(true);
+		expect(x('<summary></summary>')).toBe(true);
+		expect(x('<meter></meter>')).toBe(true);
+		expect(x('<progress></progress>')).toBe(true);
+		expect(x('<picture></picture>')).toBe(true);
+		expect(x('<ruby></ruby>')).toBe(true);
+		expect(x('<pt></pt>')).toBe(true);
+		expect(x('<rp></rp>')).toBe(true);
+		expect(x('<time></time>')).toBe(true);
+		expect(x('<slot></slot>')).toBe(true);
+		expect(x('<portal></portal>')).toBe(true);
+	});
+
+	test('Unknown element', () => {
+		expect(x('<unknown></unknown>')).toBe(true);
+		expect(x('<font></font>')).toBe(true);
+		expect(x('<x-component></x-component>')).toBe(true);
+	});
+});

package/test/dom-traverse/matches-context-role.spec.js

@@ -0,0 +1,60 @@
+const specs = require('@markuplint/html-spec');
+const { createSelector } = require('@markuplint/selector');
+const { createJSDOMElement } = require('@markuplint/test-tools');
+
+const { matchesContextRole } = require('../../lib/dom-traverse/matches-context-role');
+
+function _(html, selector) {
+	return createJSDOMElement(html, selector, function (selector) {
+		// JSDOM supports no level 4 selectors yet.
+		return createSelector(selector, specs).match(this) !== false;
+	});
+}
+
+describe('1.2', () => {
+	const version = '1.2';
+
+	test('rowgroup', () => {
+		const el = _('<table><tbody><tr><td></td></tr></tbody></table>', 'tr');
+		expect(matchesContextRole(['rowgroup'], el, specs, version)).toBe(true);
+	});
+
+	test('rowgroup owned by table', () => {
+		const el = _('<table><tbody><tr><td></td></tr></tbody></table>', 'tr');
+		expect(matchesContextRole(['table > rowgroup'], el, specs, version)).toBe(true);
+	});
+
+	test('no rowgroup', () => {
+		const el = _('<table><tbody><tr><td></td></tr></tbody></table>', 'tr');
+		expect(matchesContextRole(['group'], el, specs, version)).toBe(false);
+	});
+
+	test('rowgroup owned by no table', () => {
+		const el = _('<table><tbody><tr><td></td></tr></tbody></table>', 'tr');
+		expect(matchesContextRole(['grid > rowgroup'], el, specs, version)).toBe(false);
+	});
+});
+
+describe('1.3', () => {
+	const version = '1.3';
+
+	test('rowgroup', () => {
+		const el = _('<table><tbody><tr><td></td></tr></tbody></table>', 'tr');
+		expect(matchesContextRole(['rowgroup'], el, specs, version)).toBe(true);
+	});
+
+	test('rowgroup owned by table', () => {
+		const el = _('<table><tbody><tr><td></td></tr></tbody></table>', 'tr');
+		expect(matchesContextRole(['table > rowgroup'], el, specs, version)).toBe(true);
+	});
+
+	test('no rowgroup', () => {
+		const el = _('<table><tbody><tr><td></td></tr></tbody></table>', 'tr');
+		expect(matchesContextRole(['group'], el, specs, version)).toBe(false);
+	});
+
+	test('rowgroup owned by no table', () => {
+		const el = _('<table><tbody><tr><td></td></tr></tbody></table>', 'tr');
+		expect(matchesContextRole(['grid > rowgroup'], el, specs, version)).toBe(false);
+	});
+});

package/test/specs/get-attr-specs.spec.js

@@ -0,0 +1,41 @@
+const htmlSpec = require('@markuplint/html-spec');
+
+const { getAttrSpecs } = require('../../lib/specs/get-attr-specs');
+
+describe('getSpec', () => {
+	test('svg:image[x]', () => {
+		const specs = getAttrSpecs('image', 'http://www.w3.org/2000/svg', htmlSpec);
+		const x = specs?.find(spec => spec.name === 'x');
+		expect(x).toStrictEqual({
+			defaultValue: '0',
+			name: 'x',
+			type: ['<svg-length>', '<percentage>'],
+			animatable: true,
+		});
+	});
+
+	test('svg:foreignObject[x]', () => {
+		const specs = getAttrSpecs('foreignObject', 'http://www.w3.org/2000/svg', htmlSpec);
+		const x = specs?.find(spec => spec.name === 'x');
+		expect(x).toStrictEqual({
+			defaultValue: '0',
+			description:
+				'The x coordinate of the foreignObject. Value type: <length>|<percentage> ; Default value: 0; Animatable: yes',
+			name: 'x',
+			type: ['<svg-length>', '<percentage>'],
+			animatable: true,
+		});
+	});
+
+	test('svg:linearGradient[xlink:href]', () => {
+		const specs = getAttrSpecs('linearGradient', 'http://www.w3.org/2000/svg', htmlSpec);
+		const x = specs?.find(spec => spec.name === 'xlink:href');
+		expect(x).toStrictEqual({
+			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',
+			type: 'URL',
+			deprecated: true,
+		});
+	});
+});

package/test/specs/get-implicit-role.spec.js

@@ -0,0 +1,79 @@
+const specs = require('@markuplint/html-spec');
+const { createSelector } = require('@markuplint/selector');
+const { createJSDOMElement } = require('@markuplint/test-tools');
+
+const { getImplicitRole } = require('../../lib/specs/get-implicit-role');
+
+function c(html, version) {
+	const el = createJSDOMElement(html);
+	return getImplicitRole(
+		specs,
+		el.localName,
+		el.namespaceURI,
+		version,
+		selector => createSelector(selector, specs).match(el) !== false,
+	);
+}
+
+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('generic');
+		expect(c('<area shape="rect" />', '1.2')).toBe('generic');
+		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(false);
+		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');
+	});
+});