accented 1.1.0 → 1.1.2
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/dist/accented.d.ts.map +1 -1
- package/dist/accented.js +2 -4
- package/dist/accented.js.map +1 -1
- package/dist/dom-updater.js +6 -6
- package/dist/dom-updater.js.map +1 -1
- package/dist/elements/accented-dialog.d.ts.map +1 -1
- package/dist/elements/accented-dialog.js +1 -3
- package/dist/elements/accented-dialog.js.map +1 -1
- package/dist/elements/accented-trigger.js +2 -2
- package/dist/elements/accented-trigger.js.map +1 -1
- package/dist/intersection-observer.js +2 -2
- package/dist/intersection-observer.js.map +1 -1
- package/dist/logger.d.ts +1 -4
- package/dist/logger.d.ts.map +1 -1
- package/dist/logger.js +15 -15
- package/dist/logger.js.map +1 -1
- package/dist/scanner.d.ts.map +1 -1
- package/dist/scanner.js +4 -5
- package/dist/scanner.js.map +1 -1
- package/dist/state.js +4 -4
- package/dist/state.js.map +1 -1
- package/dist/utils/get-element-position.d.ts +1 -1
- package/dist/utils/get-element-position.d.ts.map +1 -1
- package/dist/utils/get-element-position.js +6 -6
- package/dist/utils/get-element-position.js.map +1 -1
- package/dist/utils/get-scrollable-ancestors.d.ts +1 -1
- package/dist/utils/get-scrollable-ancestors.d.ts.map +1 -1
- package/dist/utils/get-scrollable-ancestors.js +2 -2
- package/dist/utils/get-scrollable-ancestors.js.map +1 -1
- package/dist/utils/recalculate-positions.js +1 -1
- package/dist/utils/recalculate-positions.js.map +1 -1
- package/dist/utils/recalculate-scrollable-ancestors.js +1 -1
- package/dist/utils/recalculate-scrollable-ancestors.js.map +1 -1
- package/dist/utils/shadow-dom-aware-mutation-observer.d.ts +2 -2
- package/dist/utils/shadow-dom-aware-mutation-observer.d.ts.map +1 -1
- package/dist/utils/shadow-dom-aware-mutation-observer.js +29 -27
- package/dist/utils/shadow-dom-aware-mutation-observer.js.map +1 -1
- package/dist/utils/supports-anchor-positioning.d.ts +1 -5
- package/dist/utils/supports-anchor-positioning.d.ts.map +1 -1
- package/dist/utils/supports-anchor-positioning.js +4 -6
- package/dist/utils/supports-anchor-positioning.js.map +1 -1
- package/dist/utils/update-elements-with-issues.d.ts +1 -4
- package/dist/utils/update-elements-with-issues.d.ts.map +1 -1
- package/dist/utils/update-elements-with-issues.js +8 -10
- package/dist/utils/update-elements-with-issues.js.map +1 -1
- package/package.json +2 -2
- package/src/accented.ts +2 -4
- package/src/dom-updater.ts +6 -6
- package/src/elements/accented-dialog.ts +1 -3
- package/src/elements/accented-trigger.ts +2 -2
- package/src/intersection-observer.ts +2 -2
- package/src/logger.ts +15 -15
- package/src/scanner.ts +4 -5
- package/src/state.ts +5 -5
- package/src/utils/get-element-position.ts +6 -6
- package/src/utils/get-scrollable-ancestors.ts +2 -2
- package/src/utils/recalculate-positions.ts +1 -1
- package/src/utils/recalculate-scrollable-ancestors.ts +1 -1
- package/src/utils/shadow-dom-aware-mutation-observer.test.ts +413 -0
- package/src/utils/shadow-dom-aware-mutation-observer.ts +36 -28
- package/src/utils/supports-anchor-positioning.ts +4 -10
- package/src/utils/update-elements-with-issues.test.ts +29 -54
- package/src/utils/update-elements-with-issues.ts +7 -11
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
export declare function createShadowDOMAwareMutationObserver(name: string, callback: MutationCallback): {
|
|
2
|
-
#shadowRoots:
|
|
2
|
+
#shadowRoots: Map<ShadowRoot, /*elided*/ any>;
|
|
3
3
|
#options: MutationObserverInit | undefined;
|
|
4
4
|
observe(target: Node, options?: MutationObserverInit): void;
|
|
5
5
|
disconnect(): void;
|
|
6
6
|
#observeShadowRoots: (elements: Array<Element | Document | DocumentFragment>) => void;
|
|
7
|
-
#
|
|
7
|
+
#unobserveShadowRoots: (elements: Array<Element | Document | DocumentFragment>) => void;
|
|
8
8
|
takeRecords(): MutationRecord[];
|
|
9
9
|
};
|
|
10
10
|
//# sourceMappingURL=shadow-dom-aware-mutation-observer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadow-dom-aware-mutation-observer.d.ts","sourceRoot":"","sources":["../../src/utils/shadow-dom-aware-mutation-observer.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"shadow-dom-aware-mutation-observer.d.ts","sourceRoot":"","sources":["../../src/utils/shadow-dom-aware-mutation-observer.ts"],"names":[],"mappings":"AAaA,wBAAgB,oCAAoC,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,gBAAgB;;cAgB/E,oBAAoB,GAAG,SAAS;oBAkBjB,IAAI,YAAY,oBAAoB,GAAG,IAAI;kBAQ7C,IAAI;0BAMJ,UAAU,KAAK,CAAC,OAAO,GAAG,QAAQ,GAAG,gBAAgB,CAAC;4BAUpD,UAAU,KAAK,CAAC,OAAO,GAAG,QAAQ,GAAG,gBAAgB,CAAC;;EAWlF"}
|
|
@@ -1,26 +1,32 @@
|
|
|
1
1
|
import { getAccentedElementNames } from '../constants.js';
|
|
2
2
|
import { isDocument, isDocumentFragment, isElement } from './dom-helpers.js';
|
|
3
|
+
function getShadowRoots(elements) {
|
|
4
|
+
return elements
|
|
5
|
+
.flatMap((element) => [element, ...Array.from(element.querySelectorAll('*'))])
|
|
6
|
+
.reduce((acc, element) => isElement(element) && element.shadowRoot ? acc.concat(element.shadowRoot) : acc, []);
|
|
7
|
+
}
|
|
3
8
|
export function createShadowDOMAwareMutationObserver(name, callback) {
|
|
9
|
+
var _a;
|
|
10
|
+
const accentedElementNames = getAccentedElementNames(name);
|
|
11
|
+
function getMutationNodes(mutations, type) {
|
|
12
|
+
return mutations
|
|
13
|
+
.filter((mutation) => mutation.type === 'childList')
|
|
14
|
+
.flatMap((mutation) => Array.from(mutation[type]))
|
|
15
|
+
.filter((node) => isElement(node))
|
|
16
|
+
.filter((node) => !accentedElementNames.includes(node.nodeName.toLowerCase()));
|
|
17
|
+
}
|
|
4
18
|
class ShadowDOMAwareMutationObserver extends MutationObserver {
|
|
5
|
-
#shadowRoots = new
|
|
19
|
+
#shadowRoots = new Map();
|
|
6
20
|
#options;
|
|
7
|
-
constructor(
|
|
21
|
+
constructor(mutationCallback) {
|
|
8
22
|
super((mutations, observer) => {
|
|
9
|
-
const
|
|
10
|
-
const childListMutations = mutations.filter((mutation) => mutation.type === 'childList');
|
|
11
|
-
const newElements = childListMutations
|
|
12
|
-
.flatMap((mutation) => [...mutation.addedNodes])
|
|
13
|
-
.filter((node) => isElement(node))
|
|
14
|
-
.filter((node) => !accentedElementNames.includes(node.nodeName.toLowerCase()));
|
|
23
|
+
const newElements = getMutationNodes(mutations, 'addedNodes');
|
|
15
24
|
this.#observeShadowRoots(newElements);
|
|
16
|
-
const removedElements =
|
|
17
|
-
.flatMap((mutation) => [...mutation.removedNodes])
|
|
18
|
-
.filter((node) => isElement(node))
|
|
19
|
-
.filter((node) => !accentedElementNames.includes(node.nodeName.toLowerCase()));
|
|
25
|
+
const removedElements = getMutationNodes(mutations, 'removedNodes');
|
|
20
26
|
// Mutation observer has no "unobserve" method, so we're simply deleting
|
|
21
27
|
// the elements from the set of shadow roots.
|
|
22
|
-
this.#
|
|
23
|
-
|
|
28
|
+
this.#unobserveShadowRoots(removedElements);
|
|
29
|
+
mutationCallback(mutations, observer);
|
|
24
30
|
});
|
|
25
31
|
}
|
|
26
32
|
observe(target, options) {
|
|
@@ -31,31 +37,27 @@ export function createShadowDOMAwareMutationObserver(name, callback) {
|
|
|
31
37
|
super.observe(target, options);
|
|
32
38
|
}
|
|
33
39
|
disconnect() {
|
|
40
|
+
this.#unobserveShadowRoots(Array.from(this.#shadowRoots.keys()));
|
|
34
41
|
this.#shadowRoots.clear();
|
|
35
42
|
super.disconnect();
|
|
36
43
|
}
|
|
37
44
|
#observeShadowRoots = (elements) => {
|
|
38
|
-
const shadowRoots = elements
|
|
39
|
-
.flatMap((element) => [...element.querySelectorAll('*')])
|
|
40
|
-
.filter((element) => element.shadowRoot)
|
|
41
|
-
.map((element) => element.shadowRoot);
|
|
45
|
+
const shadowRoots = getShadowRoots(elements);
|
|
42
46
|
for (const shadowRoot of shadowRoots) {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
+
const observer = new _a(callback);
|
|
48
|
+
observer.observe(shadowRoot, this.#options);
|
|
49
|
+
this.#shadowRoots.set(shadowRoot, observer);
|
|
47
50
|
}
|
|
48
51
|
};
|
|
49
|
-
#
|
|
50
|
-
const shadowRoots = elements
|
|
51
|
-
.flatMap((element) => [...element.querySelectorAll('*')])
|
|
52
|
-
.filter((element) => element.shadowRoot)
|
|
53
|
-
.map((element) => element.shadowRoot);
|
|
52
|
+
#unobserveShadowRoots = (elements) => {
|
|
53
|
+
const shadowRoots = getShadowRoots(elements);
|
|
54
54
|
for (const shadowRoot of shadowRoots) {
|
|
55
|
+
this.#shadowRoots.get(shadowRoot)?.disconnect();
|
|
55
56
|
this.#shadowRoots.delete(shadowRoot);
|
|
56
57
|
}
|
|
57
58
|
};
|
|
58
59
|
}
|
|
60
|
+
_a = ShadowDOMAwareMutationObserver;
|
|
59
61
|
return new ShadowDOMAwareMutationObserver(callback);
|
|
60
62
|
}
|
|
61
63
|
//# sourceMappingURL=shadow-dom-aware-mutation-observer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadow-dom-aware-mutation-observer.js","sourceRoot":"","sources":["../../src/utils/shadow-dom-aware-mutation-observer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7E,
|
|
1
|
+
{"version":3,"file":"shadow-dom-aware-mutation-observer.js","sourceRoot":"","sources":["../../src/utils/shadow-dom-aware-mutation-observer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7E,SAAS,cAAc,CAAC,QAAsD;IAC5E,OAAO,QAAQ;SACZ,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;SAC7E,MAAM,CACL,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE,CACf,SAAS,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,EACjF,EAAE,CACH,CAAC;AACN,CAAC;AAED,MAAM,UAAU,oCAAoC,CAAC,IAAY,EAAE,QAA0B;;IAG3F,MAAM,oBAAoB,GAAG,uBAAuB,CAAC,IAAI,CAAC,CAAC;IAE3D,SAAS,gBAAgB,CAAC,SAAgC,EAAE,IAAmC;QAC7F,OAAO,SAAS;aACb,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,KAAK,WAAW,CAAC;aACnD,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;aACjD,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;aACjC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,oBAAoB,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;IACnF,CAAC;IAED,MAAM,8BAA+B,SAAQ,gBAAgB;QAC3D,YAAY,GAAgB,IAAI,GAAG,EAAE,CAAC;QAEtC,QAAQ,CAAmC;QAE3C,YAAY,gBAAkC;YAC5C,KAAK,CAAC,CAAC,SAAS,EAAE,QAAQ,EAAE,EAAE;gBAC5B,MAAM,WAAW,GAAG,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;gBAE9D,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;gBAEtC,MAAM,eAAe,GAAG,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;gBAEpE,wEAAwE;gBACxE,6CAA6C;gBAC7C,IAAI,CAAC,qBAAqB,CAAC,eAAe,CAAC,CAAC;gBAE5C,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;YACxC,CAAC,CAAC,CAAC;QACL,CAAC;QAEQ,OAAO,CAAC,MAAY,EAAE,OAA8B;YAC3D,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC;YAC1B,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,UAAU,CAAC,MAAM,CAAC,IAAI,kBAAkB,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC1E,IAAI,CAAC,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;YACrC,CAAC;YACD,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACjC,CAAC;QAEQ,UAAU;YACjB,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;YACjE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;YAC1B,KAAK,CAAC,UAAU,EAAE,CAAC;QACrB,CAAC;QAED,mBAAmB,GAAG,CAAC,QAAsD,EAAE,EAAE;YAC/E,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;YAE7C,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE,CAAC;gBACrC,MAAM,QAAQ,GAAG,IAAI,EAA8B,CAAC,QAAQ,CAAC,CAAC;gBAC9D,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;gBAC5C,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC,CAAC;QAEF,qBAAqB,GAAG,CAAC,QAAsD,EAAE,EAAE;YACjF,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;YAE7C,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE,CAAC;gBACrC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC;gBAChD,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,CAAC;KACH;;IAED,OAAO,IAAI,8BAA8B,CAAC,QAAQ,CAAC,CAAC;AACtD,CAAC"}
|
|
@@ -1,6 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
CSS: typeof CSS;
|
|
3
|
-
};
|
|
4
|
-
export declare function supportsAnchorPositioning(win: WindowWithCSS): boolean;
|
|
5
|
-
export {};
|
|
1
|
+
export declare function supportsAnchorPositioning(): boolean;
|
|
6
2
|
//# sourceMappingURL=supports-anchor-positioning.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"supports-anchor-positioning.d.ts","sourceRoot":"","sources":["../../src/utils/supports-anchor-positioning.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"supports-anchor-positioning.d.ts","sourceRoot":"","sources":["../../src/utils/supports-anchor-positioning.ts"],"names":[],"mappings":"AAYA,wBAAgB,yBAAyB,YAIxC"}
|
|
@@ -2,16 +2,14 @@
|
|
|
2
2
|
* We have to do browser sniffing now and explicitly turn off Anchor positioning in Safari
|
|
3
3
|
* since anchor positioning is not working correctly in Safari 26 Technology Preview.
|
|
4
4
|
*/
|
|
5
|
-
function isWebKit(
|
|
6
|
-
const ua =
|
|
5
|
+
function isWebKit() {
|
|
6
|
+
const ua = navigator.userAgent;
|
|
7
7
|
return (/AppleWebKit/.test(ua) && !/Chrome/.test(ua)) || /\b(iPad|iPhone|iPod)\b/.test(ua);
|
|
8
8
|
}
|
|
9
9
|
// ATTENTION: sync with the implementation in end-to-end tests.
|
|
10
10
|
// I didn't find a way to sync this with automatically with the implementation of supportsAnchorPositioning
|
|
11
11
|
// in end-to-end tests, so it has to be synced manually.
|
|
12
|
-
export function supportsAnchorPositioning(
|
|
13
|
-
return (
|
|
14
|
-
win.CSS.supports('position-anchor: --foo') &&
|
|
15
|
-
!isWebKit(win));
|
|
12
|
+
export function supportsAnchorPositioning() {
|
|
13
|
+
return (CSS.supports('anchor-name: --foo') && CSS.supports('position-anchor: --foo') && !isWebKit());
|
|
16
14
|
}
|
|
17
15
|
//# sourceMappingURL=supports-anchor-positioning.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"supports-anchor-positioning.js","sourceRoot":"","sources":["../../src/utils/supports-anchor-positioning.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"supports-anchor-positioning.js","sourceRoot":"","sources":["../../src/utils/supports-anchor-positioning.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,SAAS,QAAQ;IACf,MAAM,EAAE,GAAG,SAAS,CAAC,SAAS,CAAC;IAC/B,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7F,CAAC;AAED,+DAA+D;AAC/D,2GAA2G;AAC3G,wDAAwD;AACxD,MAAM,UAAU,yBAAyB;IACvC,OAAO,CACL,GAAG,CAAC,QAAQ,CAAC,oBAAoB,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,wBAAwB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAC5F,CAAC;AACJ,CAAC"}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import type { Signal } from '@preact/signals-core';
|
|
2
2
|
import type { AxeResults } from 'axe-core';
|
|
3
3
|
import type { ExtendedElementWithIssues, ScanContext } from '../types.ts';
|
|
4
|
-
export declare function updateElementsWithIssues({ extendedElementsWithIssues, scanContext, violations,
|
|
4
|
+
export declare function updateElementsWithIssues({ extendedElementsWithIssues, scanContext, violations, name, }: {
|
|
5
5
|
extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>>;
|
|
6
6
|
scanContext: ScanContext;
|
|
7
7
|
violations: typeof AxeResults.violations;
|
|
8
|
-
win: Window & {
|
|
9
|
-
CSS: typeof CSS;
|
|
10
|
-
};
|
|
11
8
|
name: string;
|
|
12
9
|
}): void;
|
|
13
10
|
//# sourceMappingURL=update-elements-with-issues.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"update-elements-with-issues.d.ts","sourceRoot":"","sources":["../../src/utils/update-elements-with-issues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG3C,OAAO,KAAK,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA6B1E,wBAAgB,wBAAwB,CAAC,EACvC,0BAA0B,EAC1B,WAAW,EACX,UAAU,EACV,
|
|
1
|
+
{"version":3,"file":"update-elements-with-issues.d.ts","sourceRoot":"","sources":["../../src/utils/update-elements-with-issues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG3C,OAAO,KAAK,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA6B1E,wBAAgB,wBAAwB,CAAC,EACvC,0BAA0B,EAC1B,WAAW,EACX,UAAU,EACV,IAAI,GACL,EAAE;IACD,0BAA0B,EAAE,MAAM,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC;IACrE,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,OAAO,UAAU,CAAC,UAAU,CAAC;IACzC,IAAI,EAAE,MAAM,CAAC;CACd,QA+FA"}
|
|
@@ -22,7 +22,7 @@ function shouldSkipRender(element) {
|
|
|
22
22
|
return isInsideSvg || isInsideHead;
|
|
23
23
|
}
|
|
24
24
|
let count = 0;
|
|
25
|
-
export function updateElementsWithIssues({ extendedElementsWithIssues, scanContext, violations,
|
|
25
|
+
export function updateElementsWithIssues({ extendedElementsWithIssues, scanContext, violations, name, }) {
|
|
26
26
|
const updatedElementsWithIssues = transformViolations(violations, name);
|
|
27
27
|
batch(() => {
|
|
28
28
|
for (const updatedElementWithIssues of updatedElementsWithIssues) {
|
|
@@ -55,22 +55,22 @@ export function updateElementsWithIssues({ extendedElementsWithIssues, scanConte
|
|
|
55
55
|
.filter((addedElementWithIssues) => addedElementWithIssues.element.isConnected)
|
|
56
56
|
.map((addedElementWithIssues) => {
|
|
57
57
|
const id = count++;
|
|
58
|
-
const trigger =
|
|
59
|
-
const elementZIndex = Number.parseInt(
|
|
58
|
+
const trigger = document.createElement(`${name}-trigger`);
|
|
59
|
+
const elementZIndex = Number.parseInt(getComputedStyle(addedElementWithIssues.element).zIndex, 10);
|
|
60
60
|
if (!Number.isNaN(elementZIndex)) {
|
|
61
61
|
trigger.style.setProperty('z-index', (elementZIndex + 1).toString(), 'important');
|
|
62
62
|
}
|
|
63
63
|
trigger.style.setProperty('position-anchor', `--${name}-anchor-${id}`, 'important');
|
|
64
64
|
trigger.dataset.id = id.toString();
|
|
65
|
-
const accentedDialog =
|
|
65
|
+
const accentedDialog = document.createElement(`${name}-dialog`);
|
|
66
66
|
trigger.dialog = accentedDialog;
|
|
67
|
-
const position = getElementPosition(addedElementWithIssues.element
|
|
67
|
+
const position = getElementPosition(addedElementWithIssues.element);
|
|
68
68
|
trigger.position = signal(position);
|
|
69
69
|
trigger.visible = signal(true);
|
|
70
70
|
trigger.element = addedElementWithIssues.element;
|
|
71
|
-
const scrollableAncestors = supportsAnchorPositioning(
|
|
71
|
+
const scrollableAncestors = supportsAnchorPositioning()
|
|
72
72
|
? new Set()
|
|
73
|
-
: getScrollableAncestors(addedElementWithIssues.element
|
|
73
|
+
: getScrollableAncestors(addedElementWithIssues.element);
|
|
74
74
|
const issues = signal(addedElementWithIssues.issues);
|
|
75
75
|
accentedDialog.issues = issues;
|
|
76
76
|
accentedDialog.element = addedElementWithIssues.element;
|
|
@@ -83,9 +83,7 @@ export function updateElementsWithIssues({ extendedElementsWithIssues, scanConte
|
|
|
83
83
|
position: trigger.position,
|
|
84
84
|
scrollableAncestors: signal(scrollableAncestors),
|
|
85
85
|
anchorNameValue: addedElementWithIssues.element.style.getPropertyValue('anchor-name') ||
|
|
86
|
-
|
|
87
|
-
.getComputedStyle(addedElementWithIssues.element)
|
|
88
|
-
.getPropertyValue('anchor-name'),
|
|
86
|
+
getComputedStyle(addedElementWithIssues.element).getPropertyValue('anchor-name'),
|
|
89
87
|
trigger,
|
|
90
88
|
issues,
|
|
91
89
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"update-elements-with-issues.js","sourceRoot":"","sources":["../../src/utils/update-elements-with-issues.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAKrD,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,SAAS,gBAAgB,CAAC,OAAgB;IACxC,kDAAkD;IAClD,oDAAoD;IACpD,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;IAClC,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IAE5D,iEAAiE;IACjE,uEAAuE;IACvE,wBAAwB;IACxB,0DAA0D;IAC1D,2CAA2C;IAC3C,MAAM,YAAY,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAEtD,OAAO,WAAW,IAAI,YAAY,CAAC;AACrC,CAAC;AAED,IAAI,KAAK,GAAG,CAAC,CAAC;AAEd,MAAM,UAAU,wBAAwB,CAAC,EACvC,0BAA0B,EAC1B,WAAW,EACX,UAAU,EACV,
|
|
1
|
+
{"version":3,"file":"update-elements-with-issues.js","sourceRoot":"","sources":["../../src/utils/update-elements-with-issues.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "accented",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "A frontend library for continuous accessibility testing and issue highlighting",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/accented.js",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"homepage": "https://accented.dev",
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@preact/signals-core": "^1.
|
|
30
|
+
"@preact/signals-core": "^1.12.1",
|
|
31
31
|
"axe-core": "^4.10.3"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
package/src/accented.ts
CHANGED
|
@@ -100,10 +100,8 @@ export function accented(options: AccentedOptions = {}): DisableAccented {
|
|
|
100
100
|
const cleanupDomUpdater = output.page ? createDomUpdater(name, intersectionObserver) : () => {};
|
|
101
101
|
const cleanupLogger = output.console ? createLogger() : () => {};
|
|
102
102
|
const cleanupScrollListeners = output.page ? setupScrollListeners() : () => {};
|
|
103
|
-
const cleanupResizeListener = supportsAnchorPositioning(
|
|
104
|
-
|
|
105
|
-
: setupResizeListener();
|
|
106
|
-
const cleanupFullscreenListener = supportsAnchorPositioning(window)
|
|
103
|
+
const cleanupResizeListener = supportsAnchorPositioning() ? () => {} : setupResizeListener();
|
|
104
|
+
const cleanupFullscreenListener = supportsAnchorPositioning()
|
|
107
105
|
? () => {}
|
|
108
106
|
: setupFullscreenListener();
|
|
109
107
|
|
package/src/dom-updater.ts
CHANGED
|
@@ -61,13 +61,13 @@ export function createDomUpdater(name: string, intersectionObserver?: Intersecti
|
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
function setIssues(
|
|
65
|
-
for (const elementWithIssues of
|
|
64
|
+
function setIssues(elementsWithIssues: Array<ExtendedElementWithIssues>) {
|
|
65
|
+
for (const elementWithIssues of elementsWithIssues) {
|
|
66
66
|
if (elementWithIssues.skipRender) {
|
|
67
67
|
continue;
|
|
68
68
|
}
|
|
69
69
|
elementWithIssues.element.setAttribute(attrName, elementWithIssues.id.toString());
|
|
70
|
-
if (supportsAnchorPositioning(
|
|
70
|
+
if (supportsAnchorPositioning()) {
|
|
71
71
|
setAnchorName(elementWithIssues);
|
|
72
72
|
}
|
|
73
73
|
|
|
@@ -82,13 +82,13 @@ export function createDomUpdater(name: string, intersectionObserver?: Intersecti
|
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
function removeIssues(
|
|
86
|
-
for (const elementWithIssues of
|
|
85
|
+
function removeIssues(elementsWithIssues: Array<ExtendedElementWithIssues>) {
|
|
86
|
+
for (const elementWithIssues of elementsWithIssues) {
|
|
87
87
|
if (elementWithIssues.skipRender) {
|
|
88
88
|
continue;
|
|
89
89
|
}
|
|
90
90
|
elementWithIssues.element.removeAttribute(attrName);
|
|
91
|
-
if (supportsAnchorPositioning(
|
|
91
|
+
if (supportsAnchorPositioning()) {
|
|
92
92
|
removeAnchorName(elementWithIssues);
|
|
93
93
|
}
|
|
94
94
|
elementWithIssues.trigger.remove();
|
|
@@ -41,8 +41,6 @@ export const getAccentedDialog = () => {
|
|
|
41
41
|
<p>
|
|
42
42
|
Powered by
|
|
43
43
|
<a href="${accentedUrl}" target="_blank" aria-description="Opens in new tab">Accented</a>
|
|
44
|
-
and
|
|
45
|
-
<a href="https://github.com/dequelabs/axe-core" target="_blank" aria-description="Opens in new tab">axe-core</a>.
|
|
46
44
|
</p>
|
|
47
45
|
</section>
|
|
48
46
|
</dialog>
|
|
@@ -142,7 +140,7 @@ export const getAccentedDialog = () => {
|
|
|
142
140
|
color: var(--text-color);
|
|
143
141
|
border: 2px solid currentColor;
|
|
144
142
|
padding: var(--space-l);
|
|
145
|
-
inline-size: min(90ch, calc(100% - var(--space-s)* 2));
|
|
143
|
+
inline-size: min(90ch, calc(100% - var(--space-s) * 2));
|
|
146
144
|
max-block-size: calc(100% - var(--space-s) * 2);
|
|
147
145
|
|
|
148
146
|
color-scheme: light dark;
|
|
@@ -30,7 +30,7 @@ export const getAccentedTrigger = (name: string) => {
|
|
|
30
30
|
--base-size: max(1rem, 16px);
|
|
31
31
|
position: fixed !important;
|
|
32
32
|
${
|
|
33
|
-
supportsAnchorPositioning(
|
|
33
|
+
supportsAnchorPositioning()
|
|
34
34
|
? `
|
|
35
35
|
inset-inline-start: anchor(self-start) !important;
|
|
36
36
|
inset-inline-end: anchor(self-end) !important;
|
|
@@ -191,7 +191,7 @@ export const getAccentedTrigger = (name: string) => {
|
|
|
191
191
|
{ signal: this.#abortController.signal },
|
|
192
192
|
);
|
|
193
193
|
|
|
194
|
-
if (!supportsAnchorPositioning(
|
|
194
|
+
if (!supportsAnchorPositioning()) {
|
|
195
195
|
this.#disposeOfPositionEffect = effect(() => {
|
|
196
196
|
if (this.position && trigger) {
|
|
197
197
|
const position = this.position.value;
|
|
@@ -18,8 +18,8 @@ export function setupIntersectionObserver() {
|
|
|
18
18
|
// in an unexpected way when the container has `overflow: visible`.
|
|
19
19
|
// So now we always set visibility in the intersection observer.
|
|
20
20
|
extendedElementWithIssues.visible.value = entry.isIntersecting;
|
|
21
|
-
if (entry.isIntersecting && !supportsAnchorPositioning(
|
|
22
|
-
extendedElementWithIssues.position.value = getElementPosition(entry.target
|
|
21
|
+
if (entry.isIntersecting && !supportsAnchorPositioning()) {
|
|
22
|
+
extendedElementWithIssues.position.value = getElementPosition(entry.target);
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
}
|
package/src/logger.ts
CHANGED
|
@@ -53,8 +53,8 @@ type IssueType = {
|
|
|
53
53
|
|
|
54
54
|
type GroupedByIssueType = Record<string, IssueType>;
|
|
55
55
|
|
|
56
|
-
const getIssueTypeGroups = (
|
|
57
|
-
const groupedByIssueType =
|
|
56
|
+
const getIssueTypeGroups = (elsWithIssues: Array<ElementWithIssues>) => {
|
|
57
|
+
const groupedByIssueType = elsWithIssues.reduce((acc, { element, issues }) => {
|
|
58
58
|
for (const issue of issues) {
|
|
59
59
|
if (!acc[issue.id]) {
|
|
60
60
|
acc[issue.id] = {
|
|
@@ -80,11 +80,11 @@ const getIssueTypeGroups = (elementsWithIssues: Array<ElementWithIssues>) => {
|
|
|
80
80
|
return sorted;
|
|
81
81
|
};
|
|
82
82
|
|
|
83
|
-
function logIssuesByElement(
|
|
83
|
+
function logIssuesByElement(elsWithIssues: Array<ElementWithIssues>) {
|
|
84
84
|
// Elements with more severe issues (or with a higher number of issues of the same severity)
|
|
85
85
|
// will appear higher in the output.
|
|
86
86
|
// This way, issues with a higher severity will be prioritized.
|
|
87
|
-
const sortedElementsWithIssues =
|
|
87
|
+
const sortedElementsWithIssues = elsWithIssues.toSorted((a, b) => {
|
|
88
88
|
const impacts = orderedImpacts.toReversed();
|
|
89
89
|
const impactWithDifferentIssueCount = impacts.find((impact) => {
|
|
90
90
|
const aCount = a.issues.filter((issue) => issue.impact === impact).length;
|
|
@@ -172,12 +172,12 @@ function logIssuesByType(issueTypeGroups: Array<IssueType>) {
|
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
function logNewIssues(
|
|
175
|
-
|
|
175
|
+
elsWithIssues: Array<ElementWithIssues>,
|
|
176
176
|
previousElementsWithIssues: Array<ElementWithIssues>,
|
|
177
177
|
) {
|
|
178
178
|
// The elements with accessibility issues that didn't have any associated issues
|
|
179
179
|
// or that weren't in the DOM at the time of last scan.
|
|
180
|
-
const addedElements =
|
|
180
|
+
const addedElements = elsWithIssues.filter((elementWithIssues) => {
|
|
181
181
|
return !previousElementsWithIssues.some((previousElementWithIssues) =>
|
|
182
182
|
areElementsWithIssuesEqual(previousElementWithIssues, elementWithIssues),
|
|
183
183
|
);
|
|
@@ -185,7 +185,7 @@ function logNewIssues(
|
|
|
185
185
|
|
|
186
186
|
// The elements that now have more issues than at the time of last scan,
|
|
187
187
|
// with just the new issues (previously existing issues are filtered out).
|
|
188
|
-
const existingElementsWithNewIssues =
|
|
188
|
+
const existingElementsWithNewIssues = elsWithIssues.reduce<Array<ElementWithIssues>>(
|
|
189
189
|
(acc, elementWithIssues) => {
|
|
190
190
|
let foundElementWithIssues: ElementWithIssues | null = null;
|
|
191
191
|
for (const previousElementWithIssues of previousElementsWithIssues) {
|
|
@@ -232,17 +232,17 @@ function logNewIssues(
|
|
|
232
232
|
}
|
|
233
233
|
|
|
234
234
|
function logIssues(
|
|
235
|
-
|
|
235
|
+
elsWithIssues: Array<ElementWithIssues>,
|
|
236
236
|
previousElementsWithIssues: Array<ElementWithIssues>,
|
|
237
237
|
) {
|
|
238
|
-
const elementCount =
|
|
238
|
+
const elementCount = elsWithIssues.length;
|
|
239
239
|
|
|
240
240
|
if (elementCount === 0) {
|
|
241
241
|
console.log(`No accessibility issues (Accented, ${accentedUrl}).`);
|
|
242
242
|
return;
|
|
243
243
|
}
|
|
244
244
|
|
|
245
|
-
const issueCount =
|
|
245
|
+
const issueCount = elsWithIssues.reduce((acc, { issues }) => acc + issues.length, 0);
|
|
246
246
|
console.group(
|
|
247
247
|
`%c${issueCount} accessibility issue${issueCount === 1 ? '' : 's'} in ${elementCount} element${elementCount === 1 ? '' : 's'} (Accented, ${accentedUrl}):\n`,
|
|
248
248
|
defaultStyle,
|
|
@@ -251,16 +251,16 @@ function logIssues(
|
|
|
251
251
|
if (issueCount <= MAX_ISSUES_BEFORE_OUTPUT_COLLAPSE) {
|
|
252
252
|
// Don't collapse issues if there are not too many (this hopefully helps user avoid unnecessary clicks in the console).
|
|
253
253
|
// Output by element (no specific reason for this choice, just a preference).
|
|
254
|
-
logIssuesByElement(
|
|
254
|
+
logIssuesByElement(elsWithIssues);
|
|
255
255
|
} else {
|
|
256
256
|
// When there are many issues, outputting them all would probably make the console too noisy,
|
|
257
257
|
// so we collapse them.
|
|
258
258
|
// Moreover, we output all issues twice, by element and by issue type, to give users more choice.
|
|
259
|
-
console.groupCollapsed(`%cAll by element (${
|
|
260
|
-
logIssuesByElement(
|
|
259
|
+
console.groupCollapsed(`%cAll by element (${elsWithIssues.length})`, defaultStyle);
|
|
260
|
+
logIssuesByElement(elsWithIssues);
|
|
261
261
|
console.groupEnd();
|
|
262
262
|
|
|
263
|
-
const issueTypeGroups = getIssueTypeGroups(
|
|
263
|
+
const issueTypeGroups = getIssueTypeGroups(elsWithIssues);
|
|
264
264
|
console.groupCollapsed(`%cAll by issue type (${issueTypeGroups.length})`, defaultStyle);
|
|
265
265
|
logIssuesByType(issueTypeGroups);
|
|
266
266
|
console.groupEnd();
|
|
@@ -269,7 +269,7 @@ function logIssues(
|
|
|
269
269
|
if (previousElementsWithIssues.length > 0) {
|
|
270
270
|
// Log new issues separately, to make it easier for the user to know what issues
|
|
271
271
|
// were introduced recently.
|
|
272
|
-
logNewIssues(
|
|
272
|
+
logNewIssues(elsWithIssues, previousElementsWithIssues);
|
|
273
273
|
}
|
|
274
274
|
|
|
275
275
|
console.groupEnd();
|
package/src/scanner.ts
CHANGED
|
@@ -96,7 +96,6 @@ export function createScanner(
|
|
|
96
96
|
extendedElementsWithIssues,
|
|
97
97
|
scanContext,
|
|
98
98
|
violations: result.violations,
|
|
99
|
-
win: window,
|
|
100
99
|
name,
|
|
101
100
|
});
|
|
102
101
|
|
|
@@ -143,7 +142,7 @@ export function createScanner(
|
|
|
143
142
|
return !(onlyAccentedElementsAddedOrRemoved || accentedElementChanged);
|
|
144
143
|
});
|
|
145
144
|
|
|
146
|
-
if (listWithoutAccentedElements.length !== 0 && !supportsAnchorPositioning(
|
|
145
|
+
if (listWithoutAccentedElements.length !== 0 && !supportsAnchorPositioning()) {
|
|
147
146
|
// Something has changed in the DOM, so we need to realign all triggers with respective elements.
|
|
148
147
|
recalculatePositions();
|
|
149
148
|
|
|
@@ -159,14 +158,14 @@ export function createScanner(
|
|
|
159
158
|
// we may miss other mutations on those same elements caused by Accented,
|
|
160
159
|
// leading to extra runs of the mutation observer.
|
|
161
160
|
const elementsWithAccentedAttributeChanges = listWithoutAccentedElements.reduce(
|
|
162
|
-
(
|
|
161
|
+
(acc, mutationRecord) => {
|
|
163
162
|
if (
|
|
164
163
|
mutationRecord.type === 'attributes' &&
|
|
165
164
|
mutationRecord.attributeName === `data-${name}`
|
|
166
165
|
) {
|
|
167
|
-
|
|
166
|
+
acc.add(mutationRecord.target);
|
|
168
167
|
}
|
|
169
|
-
return
|
|
168
|
+
return acc;
|
|
170
169
|
},
|
|
171
170
|
new Set<Node>(),
|
|
172
171
|
);
|
package/src/state.ts
CHANGED
|
@@ -14,10 +14,10 @@ export const elementsWithIssues = computed<Array<ElementWithIssues>>(() =>
|
|
|
14
14
|
})),
|
|
15
15
|
);
|
|
16
16
|
|
|
17
|
-
export const rootNodes = computed
|
|
17
|
+
export const rootNodes = computed(
|
|
18
18
|
() =>
|
|
19
19
|
new Set(
|
|
20
|
-
(enabled.value ? [document
|
|
20
|
+
Array.from<Node>(enabled.value ? [document] : []).concat(
|
|
21
21
|
...extendedElementsWithIssues.value.map(
|
|
22
22
|
(extendedElementWithIssues) => extendedElementWithIssues.rootNode,
|
|
23
23
|
),
|
|
@@ -26,10 +26,10 @@ export const rootNodes = computed<Set<Node>>(
|
|
|
26
26
|
);
|
|
27
27
|
|
|
28
28
|
export const scrollableAncestors = computed<Set<Element>>(() =>
|
|
29
|
-
extendedElementsWithIssues.value.reduce((
|
|
29
|
+
extendedElementsWithIssues.value.reduce((acc, extendedElementWithIssues) => {
|
|
30
30
|
for (const scrollableAncestor of extendedElementWithIssues.scrollableAncestors.value) {
|
|
31
|
-
|
|
31
|
+
acc.add(scrollableAncestor);
|
|
32
32
|
}
|
|
33
|
-
return
|
|
33
|
+
return acc;
|
|
34
34
|
}, new Set<Element>()),
|
|
35
35
|
);
|
|
@@ -4,8 +4,8 @@ import { isHtmlElement } from './dom-helpers.js';
|
|
|
4
4
|
import { getParent } from './get-parent.js';
|
|
5
5
|
|
|
6
6
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block
|
|
7
|
-
function isContainingBlock(element: Element
|
|
8
|
-
const style =
|
|
7
|
+
function isContainingBlock(element: Element): boolean {
|
|
8
|
+
const style = getComputedStyle(element);
|
|
9
9
|
const {
|
|
10
10
|
transform,
|
|
11
11
|
perspective,
|
|
@@ -33,11 +33,11 @@ function isContainingBlock(element: Element, win: Window): boolean {
|
|
|
33
33
|
);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
function getNonInitialContainingBlock(element: Element
|
|
36
|
+
function getNonInitialContainingBlock(element: Element): Element | null {
|
|
37
37
|
let currentElement: Element | null = element;
|
|
38
38
|
while (currentElement) {
|
|
39
39
|
currentElement = getParent(currentElement);
|
|
40
|
-
if (currentElement && isContainingBlock(currentElement
|
|
40
|
+
if (currentElement && isContainingBlock(currentElement)) {
|
|
41
41
|
return currentElement;
|
|
42
42
|
}
|
|
43
43
|
}
|
|
@@ -52,8 +52,8 @@ function getNonInitialContainingBlock(element: Element, win: Window): Element |
|
|
|
52
52
|
* * The element itself, or one of the element's ancestors has a scale or rotate transform.
|
|
53
53
|
* * The browser doesn't support anchor positioning.
|
|
54
54
|
*/
|
|
55
|
-
export function getElementPosition(element: Element
|
|
56
|
-
const nonInitialContainingBlock = getNonInitialContainingBlock(element
|
|
55
|
+
export function getElementPosition(element: Element): Position {
|
|
56
|
+
const nonInitialContainingBlock = getNonInitialContainingBlock(element);
|
|
57
57
|
// If an element has a containing block as an ancestor,
|
|
58
58
|
// and that containing block is not the <html> element (the initial containing block),
|
|
59
59
|
// fixed positioning works differently.
|
|
@@ -2,7 +2,7 @@ import { getParent } from './get-parent.js';
|
|
|
2
2
|
|
|
3
3
|
const scrollableOverflowValues = new Set(['auto', 'scroll', 'hidden']);
|
|
4
4
|
|
|
5
|
-
export function getScrollableAncestors(element: Element
|
|
5
|
+
export function getScrollableAncestors(element: Element) {
|
|
6
6
|
let currentElement: Element | null = element;
|
|
7
7
|
const scrollableAncestors = new Set<Element>();
|
|
8
8
|
while (true) {
|
|
@@ -10,7 +10,7 @@ export function getScrollableAncestors(element: Element, win: Window) {
|
|
|
10
10
|
if (!currentElement) {
|
|
11
11
|
break;
|
|
12
12
|
}
|
|
13
|
-
const computedStyle =
|
|
13
|
+
const computedStyle = getComputedStyle(currentElement);
|
|
14
14
|
if (
|
|
15
15
|
scrollableOverflowValues.has(computedStyle.overflowX) ||
|
|
16
16
|
scrollableOverflowValues.has(computedStyle.overflowY)
|
|
@@ -16,7 +16,7 @@ export function recalculatePositions() {
|
|
|
16
16
|
batch(() => {
|
|
17
17
|
for (const { element, position, visible } of extendedElementsWithIssues.value) {
|
|
18
18
|
if (visible.value && element.isConnected) {
|
|
19
|
-
position.value = getElementPosition(element
|
|
19
|
+
position.value = getElementPosition(element);
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
});
|
|
@@ -6,7 +6,7 @@ export function recalculateScrollableAncestors() {
|
|
|
6
6
|
batch(() => {
|
|
7
7
|
for (const { element, scrollableAncestors } of extendedElementsWithIssues.value) {
|
|
8
8
|
if (element.isConnected) {
|
|
9
|
-
scrollableAncestors.value = getScrollableAncestors(element
|
|
9
|
+
scrollableAncestors.value = getScrollableAncestors(element);
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
});
|