@markuplint/ml-spec 3.10.0 → 3.11.0

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getComputedRole = void 0;
 const aria_specs_1 = require("../specs/aria-specs");
 const is_presentational_1 = require("../specs/is-presentational");
+const accname_computation_1 = require("./accname-computation");
 const get_attr_specs_1 = require("./get-attr-specs");
 const get_explicit_role_1 = require("./get-explicit-role");
 const get_implicit_role_1 = require("./get-implicit-role");
@@ -13,7 +14,7 @@ const may_be_focusable_1 = require("./may-be-focusable");
 function getComputedRole(specs, 
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
 el, version, assumeSingleNode = false) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     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
@@ -83,6 +84,51 @@ el, version, assumeSingleNode = false) {
             };
         }
     }
+    /**
+     * SVG: Including Elements in the Accessibility Tree
+     *
+     * > Many SVG elements—although rendered to the screen—
+     * > do not have an intrinsic semantic meaning. Instead,
+     * > they represent components of the visual presentation of the document.
+     * > To simplify the accessible representation of the document,
+     * > these purely presentational elements should normally be omitted
+     * > from the accessibility tree, unless the author explicitly provides semantic content.
+     * >
+     * > However, any rendered SVG element may have semantic meaning.
+     * > Authors indicate the significance of the element
+     * > by including alternative text content or WAI-ARIA attributes.
+     * > This section defines the rules for including normally-omitted elements
+     * > in the accessibility tree.
+     * >
+     * > The following graphical and container elements
+     * > in the SVG namespace SHOULD NOT be included in the accessibility tree,
+     * > except as described in this section:
+     * >
+     * > - shape elements (circle, ellipse, line, path, polygon, polyline, rect)
+     * > - the use element
+     * > - the grouping (g) element
+     * > - the image element
+     * > - the mesh element
+     * > - text formatting elements (textPath, tspan)
+     * > - the foreignObject element
+     *
+     * @see https://www.w3.org/TR/svg-aam-1.0/#include_elements
+     */
+    if (
+    // It doesn't been specified a valid explicit role.
+    (explicitRole.role === null || explicitRole.errorType != null) &&
+        // It is an SVG element.
+        el.namespaceURI === 'http://www.w3.org/2000/svg') {
+        const accname = (0, accname_computation_1.getAccname)(el).trim() ||
+            ((_b = (_a = Array.from(el.children)
+                .find(child => ['title', 'desc'].includes(child.localName))) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim());
+        if (!accname) {
+            return {
+                el,
+                role: null,
+            };
+        }
+    }
     if (computedRole.role && !(0, is_presentational_1.isPresentational)(computedRole.role.name)) {
         return computedRole;
     }
@@ -138,7 +184,7 @@ el, version, assumeSingleNode = false) {
      */
     if (explicitRole.role) {
         const nonPresentationalAncestor = (0, get_non_presentational_ancestor_1.getNonPresentationalAncestor)(el, specs, version);
-        if (nonPresentationalAncestor.role && ((_a = nonPresentationalAncestor.role) === null || _a === void 0 ? void 0 : _a.requiredOwnedElements.length) > 0) {
+        if (nonPresentationalAncestor.role && ((_c = nonPresentationalAncestor.role) === null || _c === void 0 ? void 0 : _c.requiredOwnedElements.length) > 0) {
             if (nonPresentationalAncestor.role.requiredOwnedElements.some(expected => {
                 // const ancestor = nonPresentationalAncestor.el;
                 // const ancestorImplicitRole = getImplicitRole(specs, ancestor, version);
@@ -164,7 +210,7 @@ el, version, assumeSingleNode = false) {
      */
     const { props } = (0, aria_specs_1.ariaSpecs)(specs, version);
     for (const attr of Array.from(el.attributes)) {
-        if ((_b = props.find(p => p.name === attr.name)) === null || _b === void 0 ? void 0 : _b.isGlobal) {
+        if ((_d = props.find(p => p.name === attr.name)) === null || _d === void 0 ? void 0 : _d.isGlobal) {
             return {
                 ...implicitRole,
                 errorType: 'GLOBAL_PROP_MUST_NOT_BE_PRESENTATIONAL',

package/lib/types/attributes.d.ts

@@ -12,7 +12,7 @@ export interface AttributesSchema {
 }
 export interface GlobalAttributes {
     '#HTMLGlobalAttrs'?: boolean;
-    '#GlobalEventAttrs'?: boolean | ('onabort' | 'onauxclick' | 'onbeforeinput' | 'onbeforematch' | 'onbeforetoggle' | 'onblur' | 'oncancel' | 'oncanplay' | 'oncanplaythrough' | 'onchange' | 'onclick' | 'onclose' | 'oncompositionend' | 'oncompositionstart' | 'oncompositionupdate' | 'oncontextlost' | 'oncontextmenu' | 'oncontextrestored' | 'oncopy' | 'oncuechange' | 'oncut' | 'ondblclick' | 'ondrag' | 'ondragend' | 'ondragenter' | 'ondragleave' | 'ondragover' | 'ondragstart' | 'ondrop' | 'ondurationchange' | 'onemptied' | 'onended' | 'onerror' | 'onfocus' | 'onfocusin' | 'onfocusout' | 'onformdata' | 'oninput' | 'oninvalid' | 'onkeydown' | 'onkeypress' | 'onkeyup' | 'onload' | 'onloadeddata' | 'onloadedmetadata' | 'onloadstart' | 'onmousedown' | 'onmouseenter' | 'onmouseleave' | 'onmousemove' | 'onmouseout' | 'onmouseover' | 'onmouseup' | 'onpaste' | 'onpause' | 'onplay' | 'onplaying' | 'onprogress' | 'onratechange' | 'onreset' | 'onresize' | 'onscroll' | 'onsecuritypolicyviolation' | 'onseeked' | 'onseeking' | 'onselect' | 'onslotchange' | 'onstalled' | 'onsubmit' | 'onsuspend' | 'ontimeupdate' | 'ontoggle' | 'onunload' | 'onvolumechange' | 'onwaiting' | 'onwebkitanimationend' | 'onwebkitanimationiteration' | 'onwebkitanimationstart' | 'onwebkittransitionend' | 'onwheel')[];
+    '#GlobalEventAttrs'?: boolean | ('onabort' | 'onauxclick' | 'onbeforeinput' | 'onbeforematch' | 'onbeforetoggle' | 'onblur' | 'oncancel' | 'oncanplay' | 'oncanplaythrough' | 'onchange' | 'onclick' | 'onclose' | 'oncompositionend' | 'oncompositionstart' | 'oncompositionupdate' | 'oncontextlost' | 'oncontextmenu' | 'oncontextrestored' | 'oncopy' | 'oncuechange' | 'oncut' | 'ondblclick' | 'ondrag' | 'ondragend' | 'ondragenter' | 'ondragleave' | 'ondragover' | 'ondragstart' | 'ondrop' | 'ondurationchange' | 'onemptied' | 'onended' | 'onerror' | 'onfocus' | 'onfocusin' | 'onfocusout' | 'onformdata' | 'oninput' | 'oninvalid' | 'onkeydown' | 'onkeypress' | 'onkeyup' | 'onload' | 'onloadeddata' | 'onloadedmetadata' | 'onloadstart' | 'onmousedown' | 'onmouseenter' | 'onmouseleave' | 'onmousemove' | 'onmouseout' | 'onmouseover' | 'onmouseup' | 'onpaste' | 'onpause' | 'onplay' | 'onplaying' | 'onprogress' | 'onratechange' | 'onreset' | 'onresize' | 'onscroll' | 'onsecuritypolicyviolation' | 'onseeked' | 'onseeking' | 'onselect' | 'onslotchange' | 'onstalled' | 'onsubmit' | 'onsuspend' | 'ontimeupdate' | 'ontoggle' | 'onunload' | 'onvolumechange' | 'onwaiting' | 'onwebkitanimationend' | 'onwebkitanimationiteration' | 'onwebkitanimationstart' | 'onwebkittransitionend' | 'onwheel' | 'onanimationstart' | 'onanimationiteration' | 'onanimationend' | 'onanimationcancel' | 'ontransitionrun' | 'ontransitionstart' | 'ontransitionend' | 'ontransitioncancel')[];
     /**
      * @minItems 0
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/ml-spec",
-	"version": "3.10.0",
+	"version": "3.11.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.2.0",
-		"@markuplint/types": "3.8.0",
+		"@markuplint/types": "3.9.0",
 		"dom-accessibility-api": "^0.6.1",
 		"is-plain-object": "^5.0.0",
-		"tslib": "^2.5.3",
-		"type-fest": "^3.11.1"
+		"tslib": "^2.6.0",
+		"type-fest": "^3.12.0"
 	},
 	"devDependencies": {
-		"@markuplint/test-tools": "3.5.0",
+		"@markuplint/test-tools": "3.6.0",
 		"json-schema-to-typescript": "13.0.2"
 	},
-	"gitHead": "9547b8dca20736a93e4d01af2d61bee314ba5718"
+	"gitHead": "4ab20276db48a6acb29a923ea8666890ca853442"
 }

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

@@ -60,8 +60,12 @@ describe('1.2', () => {
 		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');
+		expect(c('<svg><rect role="roletype img" aria-label="accname"></rect></svg>', '1.2', 'rect').role?.name).toBe(
+			'img',
+		);
+		expect(c('<svg><rect role="roletype" aria-label="accname"></rect></svg>', '1.2', 'rect').role?.name).toBe(
+			'graphics-symbol',
+		);
 	});
 
 	test('landmark', () => {
@@ -187,8 +191,12 @@ describe('1.3', () => {
 		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');
+		expect(c('<svg><rect role="roletype img" aria-label="accname"></rect></svg>', '1.3', 'rect').role?.name).toBe(
+			'img',
+		);
+		expect(c('<svg><rect role="roletype" aria-label="accname"></rect></svg>', '1.3', 'rect').role?.name).toBe(
+			'graphics-symbol',
+		);
 	});
 
 	test('landmark', () => {
@@ -291,4 +299,17 @@ describe('Issues', () => {
 		expect(c('<td role="gridcell"></td>', '1.2').role?.name).toBe('gridcell');
 		expect(c('<td role="gridcell"></td>', '1.3').role?.name).toBe('gridcell');
 	});
+
+	test('#1026', () => {
+		expect(c('<svg><rect width="30" height="30" /></svg>', '1.2', 'rect').role?.name).toBe(undefined);
+		expect(
+			c('<svg><rect width="30" height="30"><title>Accname</title></rect></svg>', '1.2', 'rect').role?.name,
+		).toBe('graphics-symbol');
+		expect(c('<svg><rect aria-label="accname" width="30" height="30" /></svg>', '1.2', 'rect').role?.name).toBe(
+			'graphics-symbol',
+		);
+		expect(
+			c('<svg role="img"><rect aria-label="accname" width="30" height="30" /></svg>', '1.2', 'rect').role?.name,
+		).toBe('graphics-symbol');
+	});
 });