@markuplint/ml-spec 3.7.0 → 3.8.0

package/lib/specs/get-attr-specs.d.ts

@@ -1,8 +1,12 @@
 import type { MLMLSpec, Attribute } from '../types';
 import type { NamespaceURI } from '@markuplint/ml-ast';
-export declare function getAttrSpecs(localName: string, namespace: NamespaceURI | null, schema: MLMLSpec): readonly Attribute[] | null;
+export declare function getAttrSpecs(
+	localName: string,
+	namespace: NamespaceURI | null,
+	schema: MLMLSpec,
+): readonly Attribute[] | null;
 type HasName = {
-    readonly name: string;
+	readonly name: string;
 };
-export declare function nameCompare(a: HasName | string, b: HasName | string): 0 | 1 | -1;
+export declare function nameCompare(a: HasName | string, b: HasName | string): 1 | -1 | 0;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/ml-spec",
-	"version": "3.7.0",
+	"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.2.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": "42b97b47d22b37437024e693a72a458e2963e261"
+	"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');
+});