@markuplint/ml-spec 3.0.0-alpha.3 → 3.0.0-alpha.5

package/lib/dom-traverse/get-computed-aria-props.d.ts

@@ -0,0 +1,12 @@
+import type { ARIAVersion, MLMLSpec } from '../types';
+declare type ARIAProps = Record<string, ARIAProp>;
+declare type ARIAProp = {
+    name: string;
+    value: string | undefined;
+    required: boolean;
+    deprecated: boolean;
+    from: ARIAPropReferenceType;
+};
+declare type ARIAPropReferenceType = 'default' | 'html-attr' | 'aria-attr';
+export declare function getComputedAriaProps(specs: Readonly<MLMLSpec>, el: Element, version: ARIAVersion): ARIAProps;
+export {};

package/lib/dom-traverse/get-computed-aria-props.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComputedAriaProps = void 0;
+const aria_specs_1 = require("../specs/aria-specs");
+const get_computed_role_1 = require("./get-computed-role");
+function getComputedAriaProps(specs, el, version) {
+    const ariaSpecs = (0, aria_specs_1.ariaSpecs)(specs, version);
+    const { role } = (0, get_computed_role_1.getComputedRole)(specs, el, version);
+    if (!role) {
+        return {};
+    }
+    const props = {};
+    role.ownedProperties.forEach(ownedProp => {
+        var _a;
+        const spec = ariaSpecs.props.find(propSpec => propSpec.name === ownedProp.name);
+        if (!spec) {
+            return;
+        }
+        if (el.hasAttribute(spec.name)) {
+            const attrValue = el.getAttribute(spec.name);
+            if (attrValue && isValidAriaValue(spec, role.name, attrValue, spec.enum)) {
+                props[ownedProp.name] = {
+                    name: ownedProp.name,
+                    value: attrValue,
+                    deprecated: !!spec.deprecated,
+                    required: !!ownedProp.required,
+                    from: 'aria-attr',
+                };
+                return;
+            }
+        }
+        const equivalentHtmlAttr = (_a = spec.equivalentHtmlAttrs) === null || _a === void 0 ? void 0 : _a[0];
+        if (equivalentHtmlAttr && el.hasAttribute(equivalentHtmlAttr.htmlAttrName)) {
+            const value = equivalentHtmlAttr.value === null
+                ? el.getAttribute(equivalentHtmlAttr.htmlAttrName)
+                : equivalentHtmlAttr.value;
+            if (value != null) {
+                props[ownedProp.name] = {
+                    name: ownedProp.name,
+                    value,
+                    deprecated: !!spec.deprecated,
+                    required: !!ownedProp.required,
+                    from: 'html-attr',
+                };
+                return;
+            }
+        }
+        let defaultValue = spec.defaultValue;
+        /**
+         * @see https://www.w3.org/TR/html-aria/#el-h1-h6
+         */
+        if (ownedProp.name === 'aria-level' && /^H[1-6]$/.test(el.nodeName)) {
+            defaultValue = el.nodeName.replace('H', '');
+        }
+        props[ownedProp.name] = {
+            name: ownedProp.name,
+            value: defaultValue,
+            deprecated: !!spec.deprecated,
+            required: !!ownedProp.required,
+            from: 'default',
+        };
+    });
+    return props;
+}
+exports.getComputedAriaProps = getComputedAriaProps;
+function isValidAriaValue(spec, role, value, enumList) {
+    let type = spec.value;
+    if (spec.conditionalValue) {
+        for (const cond of spec.conditionalValue) {
+            if (cond.role.includes(role)) {
+                type = cond.value;
+            }
+        }
+    }
+    value = (value !== null && value !== void 0 ? value : '').trim();
+    switch (type) {
+        case 'string': {
+            return true;
+        }
+        case 'ID reference':
+        case 'ID reference list':
+        case 'URI': {
+            return !!value;
+        }
+        case 'integer':
+        case 'number': {
+            return !isNaN(parseFloat(value));
+        }
+        case 'token':
+        case 'token list': {
+            if (!enumList.length) {
+                throw new Error('Need an enum list in token and token list types');
+            }
+            return enumList.includes(value.toLowerCase());
+        }
+        case 'tristate': {
+            return ['true', 'false', 'mixed'].includes(value.toLowerCase());
+        }
+        case 'true/false': {
+            return ['true', 'false'].includes(value.toLowerCase());
+        }
+        case 'true/false/undefined': {
+            return ['true', 'false', 'undefined'].includes(value.toLowerCase());
+        }
+    }
+}

package/lib/dom-traverse/is-exposed.d.ts

@@ -0,0 +1,11 @@
+import type { ARIAVersion, MLMLSpec } from '../types';
+/**
+ * Detect including/excluding from the Accessibility Tree
+ *
+ * @see https://www.w3.org/TR/wai-aria-1.2/#accessibility_tree
+ *
+ * @param specs
+ * @param el
+ * @param version
+ */
+export declare function isExposed(el: Element, specs: Readonly<MLMLSpec>, version: ARIAVersion): boolean;

package/lib/dom-traverse/is-exposed.js

@@ -0,0 +1,221 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isExposed = void 0;
+const aria_specs_1 = require("../specs/aria-specs");
+const is_presentational_1 = require("../specs/is-presentational");
+const get_computed_role_1 = require("./get-computed-role");
+/**
+ * Exposable content models and elements
+ *
+ * **WARNING**:
+ * This implementation is through the author's interpretation.
+ * Want a issue request.
+ * https://github.com/markuplint/markuplint/issues/new
+ *
+ * @see exposableModels https://html.spec.whatwg.org/multipage/dom.html#content-models
+ * @see exposableElementsThatAreNoBelongingAModel https://html.spec.whatwg.org/multipage/indices.html#elements-3
+ */
+const exposableModels = ['#palpable', '#SVGRenderable'];
+const exposableElementsThatAreNoBelongingAModel = [
+    'body',
+    'dd',
+    'dt',
+    'figcaption',
+    'html',
+    'legend',
+    'li',
+    'optgroup',
+    'option',
+    'rp',
+    'rt',
+    'summary',
+    'tbody',
+    'td',
+    'tfoot',
+    'th',
+    'thead',
+    'tr',
+];
+/**
+ * Detect including/excluding from the Accessibility Tree
+ *
+ * @see https://www.w3.org/TR/wai-aria-1.2/#accessibility_tree
+ *
+ * @param specs
+ * @param el
+ * @param version
+ */
+function isExposed(el, specs, version) {
+    // According to WAI-ARIA
+    if (isExcluding(el, specs, version)) {
+        return false;
+    }
+    // According to HTML and SVG Specs with **the author's interpretation**
+    {
+        const exposableConditions = exposableModels
+            .map(model => {
+            var _a;
+            return ((_a = specs.def['#contentModels'][model]) === null || _a === void 0 ? void 0 : _a.join(',')) || '';
+        })
+            .concat(exposableElementsThatAreNoBelongingAModel.join(','));
+        const exposable = exposableConditions.some(condition => {
+            return el.matches(condition);
+        });
+        if (!exposable) {
+            return false;
+        }
+    }
+    // According to WAI-ARIA
+    {
+        const exposable = isIncluding(el, specs, version);
+        if (exposable) {
+            return true;
+        }
+    }
+    // Default
+    return true;
+}
+exports.isExposed = isExposed;
+/**
+ * Excluding Elements from the Accessibility Tree
+ *
+ * @see https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion
+ *
+ * @param specs
+ * @param el
+ * @param version
+ */
+function isExcluding(el, specs, version) {
+    /**
+     * The following elements are not exposed via the accessibility API and
+     * user agents MUST NOT include them in the accessibility tree:
+     * - Elements, including their descendent elements,
+     *   that have host language semantics specifying
+     *   that the element is not displayed, such as CSS display:none,
+     *   visibility:hidden, or the HTML hidden attribute.
+     */
+    {
+        let currentEl = el;
+        while (currentEl) {
+            if (hasDisplayNodeOrVisibilityHidden(currentEl) || currentEl.hasAttribute('hidden')) {
+                return true;
+            }
+            currentEl = currentEl.parentElement;
+        }
+    }
+    /**
+     * - Elements with none or presentation as the first role in the role attribute.
+     *   However, their exclusion is conditional. In addition,
+     *   the element's descendants and text content are generally included.
+     *   These exceptions and conditions are documented in the presentation (role)
+     *   section.
+     */
+    if ((0, is_presentational_1.isPresentational)((el.getAttribute('role') || '').split(/\s+/)[0])) {
+        return true;
+    }
+    /**
+     * If not already excluded from the accessibility tree per the above rules,
+     * user agents SHOULD NOT include the following elements
+     * in the accessibility tree:
+     * - Elements, including their descendants, that have aria-hidden set to true.
+     *   In other words, aria-hidden="true" on a parent overrides aria-hidden="false"
+     *   on descendants.
+     */
+    {
+        let currentEl = el;
+        while (currentEl) {
+            if (currentEl.getAttribute('aria-hidden') === 'true') {
+                return true;
+            }
+            currentEl = currentEl.parentElement;
+        }
+    }
+    /**
+     * - Any descendants of elements that have the characteristic
+     *   "Children Presentational: True" unless the descendant
+     *   is not allowed to be presentational because it meets one of
+     *   the conditions for exception described in
+     *   Presentational Roles Conflict Resolution.
+     *   However, the text content of any excluded descendants is included.
+     */
+    {
+        let currentEl = el.parentElement;
+        while (currentEl) {
+            const { role } = (0, get_computed_role_1.getComputedRole)(specs, currentEl, version);
+            if (role === null || role === void 0 ? void 0 : role.childrenPresentational) {
+                return true;
+            }
+            currentEl = currentEl.parentElement;
+        }
+    }
+    return false;
+}
+/**
+ * Including Elements in the Accessibility Tree
+ *
+ * If not excluded from or marked as hidden in the accessibility tree
+ * per the rules above in Excluding Elements in the Accessibility Tree,
+ * user agents MUST provide an accessible object in the accessibility tree
+ * for DOM elements that meet any of the following criteria:
+ *
+ * @see https://www.w3.org/TR/wai-aria-1.2/#tree_inclusion
+ *
+ * @param specs
+ * @param el
+ * @param version
+ */
+function isIncluding(el, specs, version) {
+    /**
+     * > **meet any** of the following criteria:
+     */
+    const results = [];
+    /**
+     * Elements that are not hidden and may fire an accessibility API event,
+     * including:
+     * - Elements that are currently focused, even if the element or one of
+     *   its ancestor elements has its aria-hidden attribute set to true.
+     */
+    // 🚫 Can't detect the element is focused.
+    // results.push(true);
+    /**
+     * - Elements that are a valid target of an aria-activedescendant attribute.
+     */
+    // TODO: Compute aria-activedescendant.
+    // results.push(true);
+    /**
+     * Elements that have an explicit role or a global WAI-ARIA attribute and
+     * do not have aria-hidden set to true.
+     * (See Excluding Elements in the Accessibility Tree for
+     * additional guidance on aria-hidden.)
+     */
+    if (el.getAttribute('aria-hidden') !== 'true') {
+        const globalAria = (0, aria_specs_1.ariaSpecs)(specs, version).props.filter(prop => prop.isGlobal);
+        const { role } = (0, get_computed_role_1.getComputedRole)(specs, el, version);
+        // Has an explicit role
+        if (role && !role.isImplicit) {
+            results.push(true);
+        }
+        // Has a global WAI-ARIA attribute
+        for (const attr of Array.from(el.attributes)) {
+            if (globalAria.some(aria => aria.name === attr.localName)) {
+                results.push(true);
+                break;
+            }
+        }
+    }
+    /**
+     * Elements that are not hidden and have an ID that is referenced
+     * by another element via a WAI-ARIA property.
+     */
+    // TODO: Compute refering ID.
+    // results.push(true);
+    return results.includes(true);
+}
+function hasDisplayNodeOrVisibilityHidden(el) {
+    const style = el.getAttribute('style');
+    if (!style) {
+        return false;
+    }
+    // TODO: Improve accuracy
+    return /display\s*:\s*none|visibility\s*:\s*hidden/gi.test(style);
+}

package/lib/index.d.ts

@@ -1,11 +1,13 @@
 export * from './dom-traverse/accname-computation';
 export * from './dom-traverse/get-attr-specs';
+export * from './dom-traverse/get-computed-aria-props';
 export * from './dom-traverse/get-computed-role';
 export * from './dom-traverse/get-content-model';
 export * from './dom-traverse/get-implicit-role';
 export * from './dom-traverse/get-permitted-roles';
 export * from './dom-traverse/get-spec';
 export * from './dom-traverse/has-required-owned-elements';
+export * from './dom-traverse/is-exposed';
 export * from './dom-traverse/may-be-focusable';
 export * from './specs/aria-specs';
 export * from './specs/content-model-category-to-tag-names';

package/lib/index.js

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 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);
 tslib_1.__exportStar(require("./dom-traverse/get-computed-role"), exports);
 tslib_1.__exportStar(require("./dom-traverse/get-content-model"), exports);
 tslib_1.__exportStar(require("./dom-traverse/get-implicit-role"), exports);
 tslib_1.__exportStar(require("./dom-traverse/get-permitted-roles"), exports);
 tslib_1.__exportStar(require("./dom-traverse/get-spec"), exports);
 tslib_1.__exportStar(require("./dom-traverse/has-required-owned-elements"), exports);
+tslib_1.__exportStar(require("./dom-traverse/is-exposed"), exports);
 tslib_1.__exportStar(require("./dom-traverse/may-be-focusable"), exports);
 tslib_1.__exportStar(require("./specs/aria-specs"), exports);
 tslib_1.__exportStar(require("./specs/content-model-category-to-tag-names"), exports);

package/lib/types/permitted-structres.d.ts

@@ -6,7 +6,7 @@
 export declare type PermittedContentPattern = PermittedContentRequire | PermittedContentOptional | PermittedContentOneOrMore | PermittedContentZeroOrMore | PermittedContentChoice | PermittedContentTransparent;
 export declare type Model = ContentType | ContentType[];
 export declare type ContentType = string | Category;
-export declare type Category = '#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';
+export declare type Category = '#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';
 export interface ContentModelsSchema {
     __contentModel?: ContentModel;
 }

package/lib/types/permitted-structures.d.ts

@@ -6,7 +6,7 @@
 export declare type PermittedContentPattern = PermittedContentRequire | PermittedContentOptional | PermittedContentOneOrMore | PermittedContentZeroOrMore | PermittedContentChoice | PermittedContentTransparent;
 export declare type Model = ContentType | ContentType[];
 export declare type ContentType = string | Category;
-export declare type Category = '#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';
+export declare type Category = '#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';
 export interface ContentModelsSchema {
     __contentModel?: ContentModel;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/ml-spec",
-	"version": "3.0.0-alpha.3",
+	"version": "3.0.0-alpha.5",
 	"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>",
@@ -22,14 +22,14 @@
 		"schema": "run-s schema:*"
 	},
 	"dependencies": {
-		"@markuplint/ml-ast": "3.0.0-alpha.3",
+		"@markuplint/ml-ast": "3.0.0-alpha.5",
 		"dom-accessibility-api": "^0.5.14",
 		"tslib": "^2.4.0"
 	},
 	"devDependencies": {
-		"@markuplint/test-tools": "3.0.0-alpha.3",
-		"@markuplint/types": "3.0.0-alpha.3",
+		"@markuplint/test-tools": "3.0.0-alpha.5",
+		"@markuplint/types": "3.0.0-alpha.5",
 		"json-schema-to-typescript": "^11.0.2"
 	},
-	"gitHead": "884b1a6a7385e86cca7796b0b927a886ee90140e"
+	"gitHead": "d2ee395d917cb69b91dedb0262b1c12ddc81fb58"
 }

package/schemas/content-models.schema.json

@@ -80,8 +80,7 @@
 				"#SVGStructural",
 				"#SVGStructurallyExternal",
 				"#SVGTextContent",
-				"#SVGTextContentChild",
-				"#SVGOtherXMLNamespace"
+				"#SVGTextContentChild"
 			]
 		},
 		"Model": {

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

@@ -7,7 +7,7 @@ test('Get accessible name', () => {
 	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 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');
 });