@markuplint/ml-spec 3.6.1 → 3.8.0

package/lib/constant/aria-version.d.ts

@@ -0,0 +1,2 @@
+export declare const ariaVersions: readonly ['1.1', '1.2', '1.3'];
+export declare const ARIA_RECOMMENDED_VERSION: '1.2';

package/lib/constant/aria-version.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ARIA_RECOMMENDED_VERSION = exports.ariaVersions = void 0;
+exports.ariaVersions = ['1.1', '1.2', '1.3'];
+exports.ARIA_RECOMMENDED_VERSION = '1.2';

package/lib/dom-traverse/get-computed-role.d.ts

@@ -1,2 +1,7 @@
 import type { ARIAVersion, ComputedRole, MLMLSpec } from '../types';
-export declare function getComputedRole(specs: MLMLSpec, el: Element, version: ARIAVersion): ComputedRole;
+export declare function getComputedRole(
+	specs: MLMLSpec,
+	el: Element,
+	version: ARIAVersion,
+	assumeSingleNode?: boolean,
+): ComputedRole;

package/lib/dom-traverse/get-computed-role.js

@@ -8,14 +8,26 @@ const get_explicit_role_1 = require("./get-explicit-role");
 const get_implicit_role_1 = require("./get-implicit-role");
 const get_non_presentational_ancestor_1 = require("./get-non-presentational-ancestor");
 const has_required_owned_elements_1 = require("./has-required-owned-elements");
+const matches_context_role_1 = require("./matches-context-role");
 const may_be_focusable_1 = require("./may-be-focusable");
 function getComputedRole(specs, 
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-el, version) {
-    var _a, _b, _c;
+el, version, assumeSingleNode = false) {
+    var _a, _b;
     const implicitRole = (0, get_implicit_role_1.getImplicitRole)(specs, el, version);
     const explicitRole = (0, get_explicit_role_1.getExplicitRole)(specs, el, version);
-    const computedRole = explicitRole.role ? explicitRole : implicitRole;
+    const computedRole = explicitRole.role
+        ? explicitRole
+        : {
+            ...implicitRole,
+            errorType: explicitRole.errorType === 'NO_EXPLICIT' ? undefined : explicitRole.errorType,
+        };
+    if (assumeSingleNode) {
+        return {
+            ...computedRole,
+            errorType: 'NO_OWNER',
+        };
+    }
     /**
      * Presentational Roles Conflict Resolution
      *
@@ -42,6 +54,19 @@ el, version) {
      * according to the sample code in WAI-ARIA specification.
      */
     if (computedRole.role && computedRole.role.requiredContextRole.length > 0) {
+        /**
+         * An element fragment that serves as the root without a parent element
+         * cannot satisfy the "Required Context Role" condition.
+         * Therefore, under normal circumstances, the `role` will disappear.
+         * However, in this specific case, it will fall back to both explicit
+         * and implicit roles. Note that the explicit role takes precedence.
+         */
+        if (el.parentElement === null) {
+            return {
+                ...computedRole,
+                errorType: 'NO_OWNER',
+            };
+        }
         const nonPresentationalAncestor = (0, get_non_presentational_ancestor_1.getNonPresentationalAncestor)(el, specs, version);
         if (!nonPresentationalAncestor.role) {
             return {
@@ -50,7 +75,7 @@ el, version) {
                 errorType: 'NO_OWNER',
             };
         }
-        if (!((_a = computedRole.role) === null || _a === void 0 ? void 0 : _a.requiredContextRole.includes(nonPresentationalAncestor.role.name))) {
+        if (!(0, matches_context_role_1.matchesContextRole)(computedRole.role.requiredContextRole, el, specs, version)) {
             return {
                 el,
                 role: null,
@@ -113,7 +138,7 @@ el, version) {
      */
     if (explicitRole.role) {
         const nonPresentationalAncestor = (0, get_non_presentational_ancestor_1.getNonPresentationalAncestor)(el, specs, version);
-        if (nonPresentationalAncestor.role && ((_b = nonPresentationalAncestor.role) === null || _b === void 0 ? void 0 : _b.requiredOwnedElements.length) > 0) {
+        if (nonPresentationalAncestor.role && ((_a = nonPresentationalAncestor.role) === null || _a === void 0 ? void 0 : _a.requiredOwnedElements.length) > 0) {
             if (nonPresentationalAncestor.role.requiredOwnedElements.some(expected => {
                 // const ancestor = nonPresentationalAncestor.el;
                 // const ancestorImplicitRole = getImplicitRole(specs, ancestor, version);
@@ -139,7 +164,7 @@ el, version) {
      */
     const { props } = (0, aria_specs_1.ariaSpecs)(specs, version);
     for (const attr of Array.from(el.attributes)) {
-        if ((_c = props.find(p => p.name === attr.name)) === null || _c === void 0 ? void 0 : _c.isGlobal) {
+        if ((_b = props.find(p => p.name === attr.name)) === null || _b === void 0 ? void 0 : _b.isGlobal) {
             return {
                 ...implicitRole,
                 errorType: 'GLOBAL_PROP_MUST_NOT_BE_PRESENTATIONAL',

package/lib/dom-traverse/get-non-presentational-ancestor.js

@@ -8,8 +8,14 @@ function getNonPresentationalAncestor(
 el, specs, version) {
     var _a;
     let ancestor = el.parentElement;
+    /**
+     * In ARIA 1.1 and 1.2, the role of an element is not affected by the role of its ancestor elements.
+     *
+     * It is due to implementation considerations in Markuplint.
+     */
+    const assumeSingleNode = version !== '1.1' && version !== '1.2';
     while (ancestor) {
-        const ancestorRole = (0, get_computed_role_1.getComputedRole)(specs, ancestor, version);
+        const ancestorRole = (0, get_computed_role_1.getComputedRole)(specs, ancestor, version, assumeSingleNode);
         if (!(0, is_presentational_1.isPresentational)((_a = ancestorRole.role) === null || _a === void 0 ? void 0 : _a.name)) {
             return ancestorRole;
         }

package/lib/dom-traverse/matches-context-role.d.ts

@@ -0,0 +1,7 @@
+import type { ARIAVersion, MLMLSpec } from '../types';
+export declare function matchesContextRole(
+	conditions: readonly string[],
+	ownedEl: Element,
+	specs: MLMLSpec,
+	version: ARIAVersion,
+): boolean;

package/lib/dom-traverse/matches-context-role.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchesContextRole = void 0;
+const get_computed_role_1 = require("./get-computed-role");
+function matchesContextRole(conditions, 
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+ownedEl, specs, version) {
+    return conditions.some(condition => matchesCondition(condition, ownedEl.parentElement, specs, version));
+}
+exports.matchesContextRole = matchesContextRole;
+function matchesCondition(condition, 
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+parentEl, specs, version) {
+    const conditions = condition.split(/\s+>\s+/g).reverse();
+    while (conditions.length > 0) {
+        if (!parentEl) {
+            return false;
+        }
+        const condition = conditions.shift();
+        const parentRole = (0, get_computed_role_1.getComputedRole)(specs, parentEl, version, true).role;
+        if (condition !== (parentRole === null || parentRole === void 0 ? void 0 : parentRole.name)) {
+            return false;
+        }
+        parentEl = parentEl.parentElement;
+    }
+    return true;
+}

package/lib/index.d.ts

@@ -1,3 +1,4 @@
+export * from './constant/aria-version';
 export * from './dom-traverse/accname-computation';
 export * from './dom-traverse/get-attr-specs';
 export * from './dom-traverse/get-computed-aria-props';
@@ -23,3 +24,4 @@ export * from './types/aria';
 export * from './types/attributes';
 export * from './types/permitted-structures';
 export * from './utils/resolve-namespace';
+export * from './utils/validateAriaVersion';

package/lib/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./constant/aria-version"), exports);
 tslib_1.__exportStar(require("./dom-traverse/accname-computation"), exports);
 tslib_1.__exportStar(require("./dom-traverse/get-attr-specs"), exports);
 tslib_1.__exportStar(require("./dom-traverse/get-computed-aria-props"), exports);
@@ -26,3 +27,4 @@ tslib_1.__exportStar(require("./types/aria"), exports);
 tslib_1.__exportStar(require("./types/attributes"), exports);
 tslib_1.__exportStar(require("./types/permitted-structures"), exports);
 tslib_1.__exportStar(require("./utils/resolve-namespace"), exports);
+tslib_1.__exportStar(require("./utils/validateAriaVersion"), exports);

package/lib/specs/resolve-version.js

@@ -7,7 +7,7 @@ function resolveVersion(aria, version) {
     const permittedRoles = (_d = (_c = aria[version]) === null || _c === void 0 ? void 0 : _c.permittedRoles) !== null && _d !== void 0 ? _d : aria.permittedRoles;
     const implicitProperties = (_f = (_e = aria[version]) === null || _e === void 0 ? void 0 : _e.implicitProperties) !== null && _f !== void 0 ? _f : aria.implicitProperties;
     const properties = (_h = (_g = aria[version]) === null || _g === void 0 ? void 0 : _g.properties) !== null && _h !== void 0 ? _h : aria.properties;
-    const namingProhibited = version === '1.2' ? (_k = (_j = aria[version]) === null || _j === void 0 ? void 0 : _j.namingProhibited) !== null && _k !== void 0 ? _k : aria.namingProhibited : aria.namingProhibited;
+    const namingProhibited = version === '1.1' ? aria.namingProhibited : (_k = (_j = aria[version]) === null || _j === void 0 ? void 0 : _j.namingProhibited) !== null && _k !== void 0 ? _k : aria.namingProhibited;
     const conditions = (_m = (_l = aria[version]) === null || _l === void 0 ? void 0 : _l.conditions) !== null && _m !== void 0 ? _m : aria.conditions;
     return {
         implicitRole,

package/lib/specs/schema-to-spec.js

@@ -39,6 +39,11 @@ function schemaToSpec(schemas) {
                         props: (0, merge_array_1.mergeArray)(def['#aria']['1.2'].props, extendedSpec.def['#aria']['1.2'].props),
                         graphicsRoles: (0, merge_array_1.mergeArray)(def['#aria']['1.2'].graphicsRoles, extendedSpec.def['#aria']['1.2'].graphicsRoles),
                     },
+                    '1.3': {
+                        roles: (0, merge_array_1.mergeArray)(def['#aria']['1.3'].roles, extendedSpec.def['#aria']['1.3'].roles),
+                        props: (0, merge_array_1.mergeArray)(def['#aria']['1.3'].props, extendedSpec.def['#aria']['1.3'].props),
+                        graphicsRoles: (0, merge_array_1.mergeArray)(def['#aria']['1.3'].graphicsRoles, extendedSpec.def['#aria']['1.3'].graphicsRoles),
+                    },
                 };
             }
             if (extendedSpec.def['#contentModels']) {

package/lib/types/aria.d.ts

@@ -99,6 +99,26 @@ export interface ARIA {
 			properties?: PermittedARIAProperties;
 		};
 	};
+	'1.3'?: {
+		implicitRole?: ImplicitRole;
+		permittedRoles?: PermittedRoles;
+		namingProhibited?: true;
+		implicitProperties?: ImplicitProperties;
+		properties?: PermittedARIAProperties;
+		conditions?: {
+			/**
+			 * This interface was referenced by `undefined`'s JSON-Schema definition
+			 * via the `patternProperty` ".+".
+			 */
+			[k: string]: {
+				implicitRole?: ImplicitRole;
+				permittedRoles?: PermittedRoles;
+				namingProhibited?: true;
+				implicitProperties?: ImplicitProperties;
+				properties?: PermittedARIAProperties;
+			};
+		};
+	};
 	'1.2'?: {
 		implicitRole?: ImplicitRole;
 		permittedRoles?: PermittedRoles;

package/lib/types/index.d.ts

@@ -1,6 +1,7 @@
 import type { ARIA } from './aria';
 import type { AttributeJSON, AttributeType, GlobalAttributes } from './attributes';
 import type { ContentModel, Category } from './permitted-structures';
+import type { ariaVersions } from '../constant/aria-version';
 import type { NamespaceURI } from '@markuplint/ml-ast';
 import type { ReadonlyDeep } from 'type-fest';
 /**
@@ -29,6 +30,7 @@ export type SpecDefs = {
 		readonly [category: string]: Readonly<Record<string, Partial<Attribute>>>;
 	};
 	readonly '#aria': {
+		readonly '1.3': ARIASpec;
 		readonly '1.2': ARIASpec;
 		readonly '1.1': ARIASpec;
 	};
@@ -189,7 +191,7 @@ export type ARIAAttributeValue =
 	| 'token'
 	| 'token list'
 	| 'URI';
-export type ARIAVersion = '1.1' | '1.2';
+export type ARIAVersion = (typeof ariaVersions)[number];
 export type EquivalentHtmlAttr = {
 	readonly htmlAttrName: string;
 	readonly isNotStrictEquivalent?: true;

package/lib/utils/validateAriaVersion.d.ts

@@ -0,0 +1,2 @@
+import type { ARIAVersion } from '../types';
+export declare function validateAriaVersion(version: string): version is ARIAVersion;

package/lib/utils/validateAriaVersion.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateAriaVersion = void 0;
+const aria_version_1 = require("../constant/aria-version");
+function validateAriaVersion(version) {
+    return aria_version_1.ariaVersions.includes(version);
+}
+exports.validateAriaVersion = validateAriaVersion;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/ml-spec",
-	"version": "3.6.1",
+	"version": "3.8.0",
 	"description": "Types and schema that specs of the Markup languages for markuplint",
 	"repository": "git@github.com:markuplint/markuplint.git",
 	"author": "Yusuke Hirao <yusukehirao@me.com>",
@@ -26,15 +26,15 @@
 	},
 	"dependencies": {
 		"@markuplint/ml-ast": "3.1.0",
+		"@markuplint/types": "3.6.0",
 		"dom-accessibility-api": "^0.5.14",
 		"is-plain-object": "^5.0.0",
-		"tslib": "^2.4.1"
+		"tslib": "^2.4.1",
+		"type-fest": "^3.8.0"
 	},
 	"devDependencies": {
-		"@markuplint/test-tools": "3.1.0",
-		"@markuplint/types": "3.5.1",
-		"json-schema-to-typescript": "11.0.2",
-		"type-fest": "^3.6.1"
+		"@markuplint/test-tools": "3.3.0",
+		"json-schema-to-typescript": "11.0.2"
 	},
-	"gitHead": "3cdf5a088b2da03773d5d4461d0e65ec32290a00"
+	"gitHead": "adc6e432cccba7cfad0dc8bf9f92e5aaf1107359"
 }

package/test/dom-traverse/accname-computation.spec.js

@@ -0,0 +1,69 @@
+const { createJSDOMElement: c } = require('@markuplint/test-tools');
+
+const { getAccname } = require('../../lib/dom-traverse/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="alternative-text" />'))).toBe('alternative-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');
+});
+
+/**
+ * @see 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');
+});
+
+/**
+ * @see 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');
+});