Skip to content

Commit e2cb0f2

Browse files
drwpowdrwpow
authored
add getAccNameAndDescription API (#63)
1 parent 3593caf commit e2cb0f2

File tree

627 files changed

+84935
-219
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

627 files changed

+84935
-219
lines changed

‎.changeset/sweet-jars-tickle.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"html-aria": patch
3+
---
4+
5+
Add getAccname() and getAccDescription() for getting accessible names + descriptions.

‎README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,19 @@ isValidAttribute("aria-valuenow", 0); // true
275275

276276
⚠️ _Be mindful of cases where a valid value may still be valid, but invoke different behavior according to the ARIA role, e.g. [`mixed` behavior for `radio`/`menuitemradio`/`switch`](https://www.w3.org/TR/wai-aria-1.3/#aria-checked)_
277277

278+
### getAccNameAndDescription()
279+
280+
> [!NOTE]
281+
> Only available in the DOM API.
282+
283+
Get the [accessible name and description](https://www.w3.org/TR/html-aam-1.0/#accessible-name-and-description-computation) for an HTML element.
284+
285+
```ts
286+
const el = document.querySelector("input");
287+
getAccNameAndDescription(el);
288+
// { name: "My Input", description: undefined }
289+
```
290+
278291
## Reference
279292

280293
### ARIA roles from HTML

‎biome.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
},
88
"files": {
99
"ignoreUnknown": false,
10-
"ignore": ["dist/**", "package.json"]
10+
"ignore": ["dist/**", "package.json", "scripts/wpt"]
1111
},
1212
"formatter": {
1313
"enabled": true,

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,15 @@
5353
"@changesets/changelog-github": "^0.5.1",
5454
"@changesets/cli": "^2.29.4",
5555
"@types/aria-query": "^5.0.4",
56-
"@vitest/browser": "^3.1.3",
56+
"@vitest/browser": "^3.1.4",
5757
"aria-query": "^5.3.2",
5858
"dom-accessibility-api": "^0.7.0",
5959
"happy-dom": "^17.4.7",
6060
"jsdom": "^25.0.1",
6161
"playwright": "^1.52.0",
62+
"tinyglobby": "^0.2.14",
6263
"typescript": "^5.8.3",
6364
"unbuild": "^3.5.0",
64-
"vitest": "^3.1.3"
65+
"vitest": "^3.1.4"
6566
}
6667
}

‎pnpm-lock.yaml‎

Lines changed: 201 additions & 198 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scripts/wpt-accname.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import fs from 'node:fs';
2+
import path from 'node:path';
3+
import { fileURLToPath } from 'node:url';
4+
import { glob } from 'tinyglobby';
5+
6+
const TEST_FILE = new URL('../test/dom/get-accdescription.test.ts', import.meta.url);
7+
const WANT_MATCH = /"property",\n\s+"accDescription",\n\s+"is",\n\s+"([^"]+)"/;
8+
const WPT_DIR = new URL('./wpt/', import.meta.url);
9+
10+
async function main() {
11+
const tests = await glob('accname/**/*.html', { cwd: fileURLToPath(WPT_DIR), absolute: true });
12+
13+
const testcases = [];
14+
15+
for (const testfile of tests) {
16+
const contents = fs.readFileSync(testfile, 'utf8');
17+
const want = contents.match(WANT_MATCH)?.[1];
18+
let html = contents.substring(contents.indexOf('</p>') + '</p>'.length).trim();
19+
html = html.substring(0, html.indexOf('<div id="manualMode">')).trim();
20+
21+
testcases.push([
22+
path.basename(testfile).replace(/\.html$/, ''),
23+
{
24+
given: [html, '#test'],
25+
want,
26+
},
27+
]);
28+
}
29+
30+
// this just shoves them at the end. cuz I need to format anyway
31+
const old = fs.readFileSync(TEST_FILE, 'utf8');
32+
fs.writeFileSync(TEST_FILE, `${old}${JSON.stringify(testcases)}`);
33+
}
34+
35+
main();

‎scripts/wpt/accname/manual/description_1.0_combobox-focusable-manual.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Description 1.0 combobox-focusable</title>
5+
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
6+
<link rel="stylesheet" href="/wai-aria/scripts/manual.css">
7+
<script src="/resources/testharness.js"></script>
8+
<script src="/resources/testharnessreport.js"></script>
9+
<script src="/wai-aria/scripts/ATTAcomm.js"></script>
10+
<script>
11+
setup({explicit_timeout: true, explicit_done: true });
12+
13+
var theTest = new ATTAcomm(
14+
{
15+
"steps" : [
16+
{
17+
"element" : "test",
18+
"test" : {
19+
"ATK" : [
20+
[
21+
"property",
22+
"description",
23+
"is",
24+
""
25+
]
26+
],
27+
"AXAPI" : [
28+
[
29+
"property",
30+
"AXHelp",
31+
"is",
32+
""
33+
]
34+
],
35+
"IAccessible2" : [
36+
[
37+
"property",
38+
"accDescription",
39+
"is",
40+
""
41+
]
42+
],
43+
"UIA" : [
44+
[
45+
"property",
46+
"Description",
47+
"is",
48+
""
49+
]
50+
]
51+
},
52+
"title" : "step 1",
53+
"type" : "test"
54+
}
55+
],
56+
"title" : "Description 1.0 combobox-focusable"
57+
}
58+
59+
) ;
60+
</script>
61+
</head>
62+
<body>
63+
<p>This test examines the ARIA properties for Description 1.0 combobox-focusable.</p>
64+
<div id="test" role="combobox" tabindex="0" title="Choose your language.">
65+
<span> English </span>
66+
</div>
67+
68+
<div id="manualMode"></div>
69+
<div id="log"></div>
70+
<div id="ATTAmessages"></div>
71+
</body>
72+
</html>

‎scripts/wpt/accname/manual/description_from_content_of_describedby_element-manual.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Description from content of describedby element</title>
5+
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
6+
<link rel="stylesheet" href="/wai-aria/scripts/manual.css">
7+
<script src="/resources/testharness.js"></script>
8+
<script src="/resources/testharnessreport.js"></script>
9+
<script src="/wai-aria/scripts/ATTAcomm.js"></script>
10+
<script>
11+
setup({explicit_timeout: true, explicit_done: true });
12+
13+
var theTest = new ATTAcomm(
14+
{
15+
"steps" : [
16+
{
17+
"element" : "test",
18+
"test" : {
19+
"ATK" : [
20+
[
21+
"property",
22+
"description",
23+
"is",
24+
"My name is Eli the weird. (QED) Where are my marbles?"
25+
]
26+
],
27+
"AXAPI" : [
28+
[
29+
"property",
30+
"AXHelp",
31+
"is",
32+
"My name is Eli the weird. (QED) Where are my marbles?"
33+
]
34+
],
35+
"IAccessible2" : [
36+
[
37+
"property",
38+
"accDescription",
39+
"is",
40+
"My name is Eli the weird. (QED) Where are my marbles?"
41+
]
42+
],
43+
"UIA" : [
44+
[
45+
"property",
46+
"Description",
47+
"is",
48+
"My name is Eli the weird. (QED) Where are my marbles?"
49+
]
50+
]
51+
},
52+
"title" : "step 1",
53+
"type" : "test"
54+
}
55+
],
56+
"title" : "Description from content of describedby element"
57+
}
58+
59+
) ;
60+
</script>
61+
</head>
62+
<body>
63+
<p>This test examines the ARIA properties for Description from content of describedby element.</p>
64+
<style>
65+
.hidden { display: none; }
66+
</style>
67+
<input id="test" type="text" aria-label="Important stuff" aria-describedby="descId" />
68+
<div>
69+
<div id="descId">
70+
<span aria-hidden="true"><i> Hello, </i></span>
71+
<span>My</span> name is
72+
<div><img src="file.jpg" title="Bryan" alt="" role="presentation" /></div>
73+
<span role="presentation" aria-label="Eli">
74+
<span aria-label="Garaventa">Zambino</span>
75+
</span>
76+
<span>the weird.</span>
77+
(QED)
78+
<span class="hidden"><i><b>and don't you forget it.</b></i></span>
79+
<table>
80+
<tr>
81+
<td>Where</td>
82+
<td style="visibility:hidden;"><div>in</div></td>
83+
<td><div style="display:none;">the world</div></td>
84+
<td>are my marbles?</td>
85+
</tr>
86+
</table>
87+
</div>
88+
</div>
89+
90+
<div id="manualMode"></div>
91+
<div id="log"></div>
92+
<div id="ATTAmessages"></div>
93+
</body>
94+
</html>

‎scripts/wpt/accname/manual/description_link-with-label-manual.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Description link-with-label</title>
5+
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
6+
<link rel="stylesheet" href="/wai-aria/scripts/manual.css">
7+
<script src="/resources/testharness.js"></script>
8+
<script src="/resources/testharnessreport.js"></script>
9+
<script src="/wai-aria/scripts/ATTAcomm.js"></script>
10+
<script>
11+
setup({explicit_timeout: true, explicit_done: true });
12+
13+
var theTest = new ATTAcomm(
14+
{
15+
"steps" : [
16+
{
17+
"element" : "test",
18+
"test" : {
19+
"ATK" : [
20+
[
21+
"property",
22+
"description",
23+
"is",
24+
"San Francisco"
25+
]
26+
],
27+
"AXAPI" : [
28+
[
29+
"property",
30+
"AXHelp",
31+
"is",
32+
"San Francisco"
33+
]
34+
],
35+
"IAccessible2" : [
36+
[
37+
"property",
38+
"accDescription",
39+
"is",
40+
"San Francisco"
41+
]
42+
],
43+
"UIA" : [
44+
[
45+
"property",
46+
"Description",
47+
"is",
48+
"San Francisco"
49+
]
50+
]
51+
},
52+
"title" : "step 1",
53+
"type" : "test"
54+
}
55+
],
56+
"title" : "Description link-with-label"
57+
}
58+
59+
) ;
60+
</script>
61+
</head>
62+
<body>
63+
<p>This test examines the ARIA properties for Description link-with-label.</p>
64+
<a id="test" href="#" aria-label="California" title="San Francisco" >United States</a>
65+
66+
<div id="manualMode"></div>
67+
<div id="log"></div>
68+
<div id="ATTAmessages"></div>
69+
</body>
70+
</html>

‎scripts/wpt/accname/manual/description_test_case_557-manual.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Description test case 557</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="/wai-aria/scripts/manual.css">
7+
<script src="/resources/testharness.js"></script>
8+
<script src="/resources/testharnessreport.js"></script>
9+
<script src="/wai-aria/scripts/ATTAcomm.js"></script>
10+
<script>
11+
setup({explicit_timeout: true, explicit_done: true });
12+
13+
var theTest = new ATTAcomm(
14+
{
15+
"steps" : [
16+
{
17+
"element" : "test",
18+
"test" : {
19+
"ATK" : [
20+
[
21+
"property",
22+
"description",
23+
"is",
24+
"t"
25+
]
26+
],
27+
"AXAPI" : [
28+
[
29+
"property",
30+
"AXHelp",
31+
"is",
32+
"t"
33+
]
34+
],
35+
"IAccessible2" : [
36+
[
37+
"property",
38+
"accDescription",
39+
"is",
40+
"t"
41+
]
42+
],
43+
"UIA" : [
44+
[
45+
"property",
46+
"Description",
47+
"is",
48+
"t"
49+
]
50+
]
51+
},
52+
"title" : "step 1",
53+
"type" : "test"
54+
}
55+
],
56+
"title" : "Description test case 557"
57+
}
58+
59+
) ;
60+
</script>
61+
</head>
62+
<body>
63+
<p>This test examines the ARIA properties for Description test case 557.</p>
64+
<img id="test" src="foo.jpg" aria-label="1" alt="a" title="t"/>
65+
66+
<div id="manualMode"></div>
67+
<div id="log"></div>
68+
<div id="ATTAmessages"></div>
69+
</body>
70+
</html>

0 commit comments

Comments
 (0)