aria-api 0.8.0 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/aria.js +30 -30
- package/lib/atree.js +28 -28
- package/lib/name.js +2 -2
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -14,7 +14,7 @@ complicated. This library takes care of exactly that.
|
|
|
14
14
|
npm install aria-api
|
|
15
15
|
|
|
16
16
|
This installation method works best if you use tools like webpack or
|
|
17
|
-
|
|
17
|
+
rollup. There is also an UMD build included as `dist/aria.js`.
|
|
18
18
|
|
|
19
19
|
# Usage
|
|
20
20
|
|
package/dist/aria.js
CHANGED
|
@@ -912,28 +912,20 @@
|
|
|
912
912
|
}
|
|
913
913
|
};
|
|
914
914
|
|
|
915
|
-
const _getOwner = function(node
|
|
915
|
+
const _getOwner = function(node) {
|
|
916
916
|
if (node.nodeType === node.ELEMENT_NODE && node.id) {
|
|
917
|
-
const selector =
|
|
918
|
-
|
|
919
|
-
for (const owner of owners) {
|
|
920
|
-
if (owner.matches(selector)) {
|
|
921
|
-
return owner;
|
|
922
|
-
}
|
|
923
|
-
}
|
|
924
|
-
} else {
|
|
925
|
-
return document.querySelector(selector);
|
|
926
|
-
}
|
|
917
|
+
const selector = `[aria-owns~="${CSS.escape(node.id)}"]`;
|
|
918
|
+
return node.getRootNode().querySelector(selector);
|
|
927
919
|
}
|
|
928
920
|
};
|
|
929
921
|
|
|
930
|
-
const _getParentNode = function(node
|
|
931
|
-
return _getOwner(node
|
|
922
|
+
const _getParentNode = function(node) {
|
|
923
|
+
return _getOwner(node) || node.parentNode || node.host;
|
|
932
924
|
};
|
|
933
925
|
|
|
934
|
-
const detectLoop = function(node
|
|
926
|
+
const detectLoop = function(node) {
|
|
935
927
|
const seen = [node];
|
|
936
|
-
while ((node = _getParentNode(node
|
|
928
|
+
while ((node = _getParentNode(node))) {
|
|
937
929
|
if (seen.includes(node)) {
|
|
938
930
|
return true;
|
|
939
931
|
}
|
|
@@ -941,27 +933,36 @@
|
|
|
941
933
|
}
|
|
942
934
|
};
|
|
943
935
|
|
|
944
|
-
const getOwner = function(node
|
|
945
|
-
const owner = _getOwner(node
|
|
946
|
-
if (owner && !detectLoop(node
|
|
936
|
+
const getOwner = function(node) {
|
|
937
|
+
const owner = _getOwner(node);
|
|
938
|
+
if (owner && !detectLoop(node)) {
|
|
947
939
|
return owner;
|
|
948
940
|
}
|
|
949
941
|
};
|
|
950
942
|
|
|
951
|
-
const getParentNode = function(node
|
|
952
|
-
return getOwner(node
|
|
943
|
+
const getParentNode = function(node) {
|
|
944
|
+
return getOwner(node) || node.parentNode || node.host;
|
|
953
945
|
};
|
|
954
946
|
|
|
955
947
|
const isHidden = function(node) {
|
|
956
948
|
return node.nodeType === node.ELEMENT_NODE && getAttribute(node, 'hidden');
|
|
957
949
|
};
|
|
958
950
|
|
|
959
|
-
const getChildNodes = function(node
|
|
951
|
+
const getChildNodes = function(node) {
|
|
960
952
|
const childNodes = [];
|
|
953
|
+
let rawChildNodes = [];
|
|
954
|
+
|
|
955
|
+
if (node.shadowRoot) {
|
|
956
|
+
rawChildNodes = node.shadowRoot.childNodes;
|
|
957
|
+
} else if (node.assignedNodes) {
|
|
958
|
+
rawChildNodes = node.assignedNodes();
|
|
959
|
+
} else {
|
|
960
|
+
rawChildNodes = node.childNodes;
|
|
961
|
+
}
|
|
961
962
|
|
|
962
|
-
for (let i = 0; i <
|
|
963
|
-
const child =
|
|
964
|
-
if (!getOwner(child
|
|
963
|
+
for (let i = 0; i < rawChildNodes.length; i++) {
|
|
964
|
+
const child = rawChildNodes[i];
|
|
965
|
+
if (!getOwner(child) && !isHidden(child)) {
|
|
965
966
|
childNodes.push(child);
|
|
966
967
|
}
|
|
967
968
|
}
|
|
@@ -969,9 +970,9 @@
|
|
|
969
970
|
if (node.nodeType === node.ELEMENT_NODE) {
|
|
970
971
|
const owns = getAttribute(node, 'owns') || [];
|
|
971
972
|
for (let i = 0; i < owns.length; i++) {
|
|
972
|
-
const child =
|
|
973
|
+
const child = node.getRootNode().getElementById(owns[i]);
|
|
973
974
|
// double check with getOwner for consistency
|
|
974
|
-
if (child && getOwner(child
|
|
975
|
+
if (child && getOwner(child) === node && !isHidden(child)) {
|
|
975
976
|
childNodes.push(child);
|
|
976
977
|
}
|
|
977
978
|
}
|
|
@@ -981,12 +982,11 @@
|
|
|
981
982
|
};
|
|
982
983
|
|
|
983
984
|
const walk = function(root, fn) {
|
|
984
|
-
const owners = document.querySelectorAll('[aria-owns]');
|
|
985
985
|
let queue = [root];
|
|
986
986
|
while (queue.length) {
|
|
987
987
|
const item = queue.shift();
|
|
988
988
|
fn(item);
|
|
989
|
-
queue = getChildNodes(item
|
|
989
|
+
queue = getChildNodes(item).concat(queue);
|
|
990
990
|
}
|
|
991
991
|
};
|
|
992
992
|
|
|
@@ -1141,7 +1141,7 @@
|
|
|
1141
1141
|
if (!ongoingLabelledBy && el.matches('[aria-labelledby]')) {
|
|
1142
1142
|
const ids = el.getAttribute('aria-labelledby').split(/\s+/);
|
|
1143
1143
|
const strings = ids.map(id => {
|
|
1144
|
-
const label =
|
|
1144
|
+
const label = el.getRootNode().getElementById(id);
|
|
1145
1145
|
return label ? getNameRaw(label, true, true, visited, true) : '';
|
|
1146
1146
|
});
|
|
1147
1147
|
ret = strings.join(' ');
|
|
@@ -1252,7 +1252,7 @@
|
|
|
1252
1252
|
if (el.matches('[aria-describedby]')) {
|
|
1253
1253
|
const ids = el.getAttribute('aria-describedby').split(/\s+/);
|
|
1254
1254
|
const strings = ids.map(id => {
|
|
1255
|
-
const label =
|
|
1255
|
+
const label = el.getRootNode().getElementById(id);
|
|
1256
1256
|
return label ? getNameRaw(label, true, true) : '';
|
|
1257
1257
|
});
|
|
1258
1258
|
ret = strings.join(' ');
|
package/lib/atree.js
CHANGED
|
@@ -1,27 +1,19 @@
|
|
|
1
1
|
import * as attrs from './attrs';
|
|
2
2
|
|
|
3
|
-
const _getOwner = function(node
|
|
3
|
+
const _getOwner = function(node) {
|
|
4
4
|
if (node.nodeType === node.ELEMENT_NODE && node.id) {
|
|
5
|
-
const selector =
|
|
6
|
-
|
|
7
|
-
for (const owner of owners) {
|
|
8
|
-
if (owner.matches(selector)) {
|
|
9
|
-
return owner;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
} else {
|
|
13
|
-
return document.querySelector(selector);
|
|
14
|
-
}
|
|
5
|
+
const selector = `[aria-owns~="${CSS.escape(node.id)}"]`;
|
|
6
|
+
return node.getRootNode().querySelector(selector);
|
|
15
7
|
}
|
|
16
8
|
};
|
|
17
9
|
|
|
18
|
-
const _getParentNode = function(node
|
|
19
|
-
return _getOwner(node
|
|
10
|
+
const _getParentNode = function(node) {
|
|
11
|
+
return _getOwner(node) || node.parentNode || node.host;
|
|
20
12
|
};
|
|
21
13
|
|
|
22
|
-
const detectLoop = function(node
|
|
14
|
+
const detectLoop = function(node) {
|
|
23
15
|
const seen = [node];
|
|
24
|
-
while ((node = _getParentNode(node
|
|
16
|
+
while ((node = _getParentNode(node))) {
|
|
25
17
|
if (seen.includes(node)) {
|
|
26
18
|
return true;
|
|
27
19
|
}
|
|
@@ -29,27 +21,36 @@ const detectLoop = function(node, owners) {
|
|
|
29
21
|
}
|
|
30
22
|
};
|
|
31
23
|
|
|
32
|
-
const getOwner = function(node
|
|
33
|
-
const owner = _getOwner(node
|
|
34
|
-
if (owner && !detectLoop(node
|
|
24
|
+
const getOwner = function(node) {
|
|
25
|
+
const owner = _getOwner(node);
|
|
26
|
+
if (owner && !detectLoop(node)) {
|
|
35
27
|
return owner;
|
|
36
28
|
}
|
|
37
29
|
};
|
|
38
30
|
|
|
39
|
-
export const getParentNode = function(node
|
|
40
|
-
return getOwner(node
|
|
31
|
+
export const getParentNode = function(node) {
|
|
32
|
+
return getOwner(node) || node.parentNode || node.host;
|
|
41
33
|
};
|
|
42
34
|
|
|
43
35
|
const isHidden = function(node) {
|
|
44
36
|
return node.nodeType === node.ELEMENT_NODE && attrs.getAttribute(node, 'hidden');
|
|
45
37
|
};
|
|
46
38
|
|
|
47
|
-
export const getChildNodes = function(node
|
|
39
|
+
export const getChildNodes = function(node) {
|
|
48
40
|
const childNodes = [];
|
|
41
|
+
let rawChildNodes = [];
|
|
42
|
+
|
|
43
|
+
if (node.shadowRoot) {
|
|
44
|
+
rawChildNodes = node.shadowRoot.childNodes;
|
|
45
|
+
} else if (node.assignedNodes) {
|
|
46
|
+
rawChildNodes = node.assignedNodes();
|
|
47
|
+
} else {
|
|
48
|
+
rawChildNodes = node.childNodes;
|
|
49
|
+
}
|
|
49
50
|
|
|
50
|
-
for (let i = 0; i <
|
|
51
|
-
const child =
|
|
52
|
-
if (!getOwner(child
|
|
51
|
+
for (let i = 0; i < rawChildNodes.length; i++) {
|
|
52
|
+
const child = rawChildNodes[i];
|
|
53
|
+
if (!getOwner(child) && !isHidden(child)) {
|
|
53
54
|
childNodes.push(child);
|
|
54
55
|
}
|
|
55
56
|
}
|
|
@@ -57,9 +58,9 @@ export const getChildNodes = function(node, owners) {
|
|
|
57
58
|
if (node.nodeType === node.ELEMENT_NODE) {
|
|
58
59
|
const owns = attrs.getAttribute(node, 'owns') || [];
|
|
59
60
|
for (let i = 0; i < owns.length; i++) {
|
|
60
|
-
const child =
|
|
61
|
+
const child = node.getRootNode().getElementById(owns[i]);
|
|
61
62
|
// double check with getOwner for consistency
|
|
62
|
-
if (child && getOwner(child
|
|
63
|
+
if (child && getOwner(child) === node && !isHidden(child)) {
|
|
63
64
|
childNodes.push(child);
|
|
64
65
|
}
|
|
65
66
|
}
|
|
@@ -69,12 +70,11 @@ export const getChildNodes = function(node, owners) {
|
|
|
69
70
|
};
|
|
70
71
|
|
|
71
72
|
export const walk = function(root, fn) {
|
|
72
|
-
const owners = document.querySelectorAll('[aria-owns]');
|
|
73
73
|
let queue = [root];
|
|
74
74
|
while (queue.length) {
|
|
75
75
|
const item = queue.shift();
|
|
76
76
|
fn(item);
|
|
77
|
-
queue = getChildNodes(item
|
|
77
|
+
queue = getChildNodes(item).concat(queue);
|
|
78
78
|
}
|
|
79
79
|
};
|
|
80
80
|
|
package/lib/name.js
CHANGED
|
@@ -94,7 +94,7 @@ const getNameRaw = function(el, recursive, ongoingLabelledBy, visited, directRef
|
|
|
94
94
|
if (!ongoingLabelledBy && el.matches('[aria-labelledby]')) {
|
|
95
95
|
const ids = el.getAttribute('aria-labelledby').split(/\s+/);
|
|
96
96
|
const strings = ids.map(id => {
|
|
97
|
-
const label =
|
|
97
|
+
const label = el.getRootNode().getElementById(id);
|
|
98
98
|
return label ? getNameRaw(label, true, true, visited, true) : '';
|
|
99
99
|
});
|
|
100
100
|
ret = strings.join(' ');
|
|
@@ -205,7 +205,7 @@ export const getDescription = function(el) {
|
|
|
205
205
|
if (el.matches('[aria-describedby]')) {
|
|
206
206
|
const ids = el.getAttribute('aria-describedby').split(/\s+/);
|
|
207
207
|
const strings = ids.map(id => {
|
|
208
|
-
const label =
|
|
208
|
+
const label = el.getRootNode().getElementById(id);
|
|
209
209
|
return label ? getNameRaw(label, true, true) : '';
|
|
210
210
|
});
|
|
211
211
|
ret = strings.join(' ');
|