accented 0.0.0-20250424114613 → 0.0.0-20250701143712
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 +44 -193
- package/dist/accented.d.ts +7 -7
- package/dist/accented.d.ts.map +1 -1
- package/dist/accented.js +30 -27
- package/dist/accented.js.map +1 -1
- package/dist/common/tokens.d.ts +2 -0
- package/dist/common/tokens.d.ts.map +1 -0
- package/dist/common/tokens.js +2 -0
- package/dist/common/tokens.js.map +1 -0
- package/dist/constants.d.ts +1 -1
- package/dist/constants.d.ts.map +1 -1
- package/dist/constants.js +1 -1
- package/dist/constants.js.map +1 -1
- package/dist/dom-updater.d.ts +1 -1
- package/dist/dom-updater.d.ts.map +1 -1
- package/dist/dom-updater.js +14 -13
- package/dist/dom-updater.js.map +1 -1
- package/dist/elements/accented-dialog.d.ts +2 -3
- package/dist/elements/accented-dialog.d.ts.map +1 -1
- package/dist/elements/accented-dialog.js +14 -8
- package/dist/elements/accented-dialog.js.map +1 -1
- package/dist/elements/accented-trigger.d.ts +3 -4
- package/dist/elements/accented-trigger.d.ts.map +1 -1
- package/dist/elements/accented-trigger.js +10 -10
- package/dist/elements/accented-trigger.js.map +1 -1
- package/dist/fullscreen-listener.d.ts +1 -1
- package/dist/fullscreen-listener.d.ts.map +1 -1
- package/dist/fullscreen-listener.js +3 -4
- package/dist/fullscreen-listener.js.map +1 -1
- package/dist/intersection-observer.d.ts +1 -1
- package/dist/intersection-observer.d.ts.map +1 -1
- package/dist/intersection-observer.js +12 -6
- package/dist/intersection-observer.js.map +1 -1
- package/dist/log-and-rethrow.d.ts +1 -1
- package/dist/log-and-rethrow.d.ts.map +1 -1
- package/dist/log-and-rethrow.js +2 -3
- package/dist/log-and-rethrow.js.map +1 -1
- package/dist/logger.d.ts +1 -1
- package/dist/logger.d.ts.map +1 -1
- package/dist/logger.js +2 -2
- package/dist/logger.js.map +1 -1
- package/dist/register-elements.d.ts +1 -1
- package/dist/register-elements.d.ts.map +1 -1
- package/dist/register-elements.js +6 -7
- package/dist/register-elements.js.map +1 -1
- package/dist/resize-listener.d.ts +1 -1
- package/dist/resize-listener.d.ts.map +1 -1
- package/dist/resize-listener.js +3 -4
- package/dist/resize-listener.js.map +1 -1
- package/dist/scanner.d.ts +2 -2
- package/dist/scanner.d.ts.map +1 -1
- package/dist/scanner.js +36 -36
- package/dist/scanner.js.map +1 -1
- package/dist/scroll-listeners.d.ts +1 -1
- package/dist/scroll-listeners.d.ts.map +1 -1
- package/dist/scroll-listeners.js +3 -4
- package/dist/scroll-listeners.js.map +1 -1
- package/dist/state.d.ts +1 -1
- package/dist/state.d.ts.map +1 -1
- package/dist/state.js +4 -5
- package/dist/state.js.map +1 -1
- package/dist/task-queue.d.ts +2 -2
- package/dist/task-queue.d.ts.map +1 -1
- package/dist/task-queue.js +1 -1
- package/dist/task-queue.js.map +1 -1
- package/dist/types.d.ts +102 -46
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js.map +1 -1
- package/dist/utils/are-elements-with-issues-equal.d.ts +2 -2
- package/dist/utils/are-elements-with-issues-equal.d.ts.map +1 -1
- package/dist/utils/are-elements-with-issues-equal.js +3 -3
- package/dist/utils/are-elements-with-issues-equal.js.map +1 -1
- package/dist/utils/are-issue-sets-equal.d.ts +2 -2
- package/dist/utils/are-issue-sets-equal.d.ts.map +1 -1
- package/dist/utils/are-issue-sets-equal.js +3 -3
- package/dist/utils/are-issue-sets-equal.js.map +1 -1
- package/dist/utils/containing-blocks.d.ts.map +1 -1
- package/dist/utils/containing-blocks.js +1 -1
- package/dist/utils/containing-blocks.js.map +1 -1
- package/dist/utils/contains.d.ts +1 -1
- package/dist/utils/contains.d.ts.map +1 -1
- package/dist/utils/contains.js +1 -1
- package/dist/utils/contains.js.map +1 -1
- package/dist/utils/deduplicate-nodes.js +0 -1
- package/dist/utils/deduplicate-nodes.js.map +1 -1
- package/dist/utils/deep-merge.d.ts +1 -1
- package/dist/utils/deep-merge.d.ts.map +1 -1
- package/dist/utils/deep-merge.js +8 -5
- package/dist/utils/deep-merge.js.map +1 -1
- package/dist/utils/dom-helpers.d.ts.map +1 -1
- package/dist/utils/dom-helpers.js +4 -2
- package/dist/utils/dom-helpers.js.map +1 -1
- package/dist/utils/ensure-non-empty.d.ts +1 -1
- package/dist/utils/ensure-non-empty.d.ts.map +1 -1
- package/dist/utils/ensure-non-empty.js +2 -2
- package/dist/utils/ensure-non-empty.js.map +1 -1
- package/dist/utils/get-element-html.d.ts +1 -1
- package/dist/utils/get-element-html.d.ts.map +1 -1
- package/dist/utils/get-element-html.js +4 -2
- package/dist/utils/get-element-html.js.map +1 -1
- package/dist/utils/get-element-position.d.ts +2 -2
- package/dist/utils/get-element-position.d.ts.map +1 -1
- package/dist/utils/get-element-position.js +21 -25
- package/dist/utils/get-element-position.js.map +1 -1
- package/dist/utils/get-parent.d.ts +1 -1
- package/dist/utils/get-parent.d.ts.map +1 -1
- package/dist/utils/get-parent.js +1 -1
- package/dist/utils/get-parent.js.map +1 -1
- package/dist/utils/get-scan-context.d.ts +2 -2
- package/dist/utils/get-scan-context.d.ts.map +1 -1
- package/dist/utils/get-scan-context.js +9 -9
- package/dist/utils/get-scan-context.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 +5 -5
- package/dist/utils/get-scrollable-ancestors.js.map +1 -1
- package/dist/utils/is-node-in-scan-context.d.ts +2 -2
- package/dist/utils/is-node-in-scan-context.d.ts.map +1 -1
- package/dist/utils/is-node-in-scan-context.js +5 -5
- package/dist/utils/is-node-in-scan-context.js.map +1 -1
- package/dist/utils/is-non-empty.d.ts +2 -0
- package/dist/utils/is-non-empty.d.ts.map +1 -0
- package/dist/utils/is-non-empty.js +4 -0
- package/dist/utils/is-non-empty.js.map +1 -0
- package/dist/utils/normalize-context.d.ts +2 -2
- package/dist/utils/normalize-context.d.ts.map +1 -1
- package/dist/utils/normalize-context.js +10 -8
- package/dist/utils/normalize-context.js.map +1 -1
- package/dist/utils/recalculate-positions.d.ts +1 -1
- package/dist/utils/recalculate-positions.d.ts.map +1 -1
- package/dist/utils/recalculate-positions.js +5 -5
- package/dist/utils/recalculate-positions.js.map +1 -1
- package/dist/utils/recalculate-scrollable-ancestors.d.ts +1 -1
- package/dist/utils/recalculate-scrollable-ancestors.d.ts.map +1 -1
- package/dist/utils/recalculate-scrollable-ancestors.js +4 -4
- package/dist/utils/recalculate-scrollable-ancestors.js.map +1 -1
- package/dist/utils/shadow-dom-aware-mutation-observer.d.ts +1 -1
- package/dist/utils/shadow-dom-aware-mutation-observer.d.ts.map +1 -1
- package/dist/utils/shadow-dom-aware-mutation-observer.js +19 -22
- package/dist/utils/shadow-dom-aware-mutation-observer.js.map +1 -1
- package/dist/utils/supports-anchor-positioning.d.ts +1 -1
- package/dist/utils/supports-anchor-positioning.d.ts.map +1 -1
- package/dist/utils/supports-anchor-positioning.js +1 -1
- package/dist/utils/supports-anchor-positioning.js.map +1 -1
- package/dist/utils/transform-violations.d.ts +2 -2
- package/dist/utils/transform-violations.d.ts.map +1 -1
- package/dist/utils/transform-violations.js +9 -9
- package/dist/utils/transform-violations.js.map +1 -1
- package/dist/utils/update-elements-with-issues.d.ts +3 -3
- package/dist/utils/update-elements-with-issues.d.ts.map +1 -1
- package/dist/utils/update-elements-with-issues.js +34 -29
- package/dist/utils/update-elements-with-issues.js.map +1 -1
- package/dist/validate-options.d.ts +2 -2
- package/dist/validate-options.d.ts.map +1 -1
- package/dist/validate-options.js +24 -23
- package/dist/validate-options.js.map +1 -1
- package/package.json +7 -4
- package/src/accented.test.ts +2 -2
- package/src/accented.ts +39 -32
- package/src/common/tokens.ts +1 -0
- package/src/constants.ts +1 -1
- package/src/dom-updater.ts +26 -19
- package/src/elements/accented-dialog.ts +69 -43
- package/src/elements/accented-trigger.ts +54 -43
- package/src/fullscreen-listener.ts +15 -11
- package/src/intersection-observer.ts +27 -16
- package/src/log-and-rethrow.ts +2 -3
- package/src/logger.ts +8 -6
- package/src/register-elements.ts +7 -7
- package/src/resize-listener.ts +15 -11
- package/src/scanner.ts +66 -50
- package/src/scroll-listeners.ts +27 -19
- package/src/state.ts +24 -21
- package/src/task-queue.test.ts +5 -4
- package/src/task-queue.ts +2 -2
- package/src/types.ts +151 -95
- package/src/utils/are-elements-with-issues-equal.ts +7 -5
- package/src/utils/are-issue-sets-equal.test.ts +10 -6
- package/src/utils/are-issue-sets-equal.ts +8 -6
- package/src/utils/containing-blocks.ts +6 -3
- package/src/utils/contains.test.ts +2 -2
- package/src/utils/contains.ts +1 -1
- package/src/utils/deduplicate-nodes.ts +1 -1
- package/src/utils/deep-merge.test.ts +8 -1
- package/src/utils/deep-merge.ts +14 -8
- package/src/utils/dom-helpers.ts +6 -2
- package/src/utils/ensure-non-empty.ts +2 -2
- package/src/utils/get-element-html.ts +4 -2
- package/src/utils/get-element-position.ts +37 -24
- package/src/utils/get-parent.ts +1 -1
- package/src/utils/get-scan-context.test.ts +14 -8
- package/src/utils/get-scan-context.ts +12 -15
- package/src/utils/get-scrollable-ancestors.ts +8 -5
- package/src/utils/is-node-in-scan-context.test.ts +3 -3
- package/src/utils/is-node-in-scan-context.ts +6 -6
- package/src/utils/is-non-empty.ts +3 -0
- package/src/utils/normalize-context.test.ts +9 -9
- package/src/utils/normalize-context.ts +17 -10
- package/src/utils/recalculate-positions.ts +5 -5
- package/src/utils/recalculate-scrollable-ancestors.ts +4 -4
- package/src/utils/shadow-dom-aware-mutation-observer.ts +21 -24
- package/src/utils/supports-anchor-positioning.ts +3 -3
- package/src/utils/transform-violations.test.ts +22 -20
- package/src/utils/transform-violations.ts +14 -10
- package/src/utils/update-elements-with-issues.test.ts +49 -49
- package/src/utils/update-elements-with-issues.ts +96 -71
- package/src/validate-options.ts +91 -38
package/README.md
CHANGED
|
@@ -1,220 +1,71 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
It can be set up in only a few lines of code
|
|
6
|
-
|
|
7
|
-
It complements approaches to other means of continuous automated accessibility testing such as static code analysis and inclusion of accessibility tests in test suites. Think of it as a form of linting, but for a rendered web page rather than for source code.
|
|
8
|
-
|
|
9
|
-
Accented uses the [axe-core](https://github.com/dequelabs/axe-core) testing engine.
|
|
10
|
-
|
|
11
|
-
TODO: example screenshots, without Accented / with Accented.
|
|
12
|
-
|
|
13
|
-
## Basic usage
|
|
14
|
-
|
|
15
|
-
* The library can be used in three ways:
|
|
16
|
-
* NPM (with a bundler)
|
|
17
|
-
* `import accented from 'https://esm.sh/accented';`.
|
|
18
|
-
* `import('https://esm.sh/accented').then(({default: accented}) => { accented(); });` (this version will work in the console, unless it violates the content security policy, which shouldn't be the case locally).
|
|
19
|
-
* For example, this works on medium.com
|
|
20
|
-
|
|
21
|
-
## API
|
|
22
|
-
|
|
23
|
-
### Exports
|
|
24
|
-
|
|
25
|
-
* `accented`: the default library export. It’s the function that enables the continuous scanning and highlighting
|
|
26
|
-
on the page in whose context in was called. Example: `const disable = accented(options)`.
|
|
27
|
-
* Parameters: the only parameter is `options`. See [Options](#options).
|
|
28
|
-
* Returns: a `disable` function that takes no parameters. When called, disables the scanning and highlighting,
|
|
29
|
-
and cleans up any changes that Accented has made to the page.
|
|
30
|
-
|
|
31
|
-
#### Type exports
|
|
32
|
-
|
|
33
|
-
The following types are exported for TypeScript consumers:
|
|
34
|
-
|
|
35
|
-
* `AccentedOptions`: the `options` parameter (see [Options](#options)).
|
|
36
|
-
* `DisableAccented`: the type of the function returned by `accented`.
|
|
37
|
-
|
|
38
|
-
### Options
|
|
1
|
+
<a href="https://www.accented.dev">
|
|
2
|
+
<img alt="Accented" src="https://www.accented.dev/images/logo.svg" width="100" />
|
|
3
|
+
</a>
|
|
39
4
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
**Type:** see [documentation](https://www.deque.com/axe/core-documentation/api-documentation/#context-parameter).
|
|
43
|
-
|
|
44
|
-
**Default:** `document`.
|
|
45
|
-
|
|
46
|
-
The `context` parameter for `axe.run()`.
|
|
47
|
-
|
|
48
|
-
Determines what element(s) to scan for accessibility issues.
|
|
49
|
-
|
|
50
|
-
Accepts a variety of shapes:
|
|
51
|
-
* an element reference;
|
|
52
|
-
* a selector;
|
|
53
|
-
* a `NodeList`;
|
|
54
|
-
* an include / exclude object;
|
|
55
|
-
* and more.
|
|
56
|
-
|
|
57
|
-
See documentation: https://www.deque.com/axe/core-documentation/api-documentation/#context-parameter
|
|
58
|
-
|
|
59
|
-
#### `axeOptions`
|
|
60
|
-
|
|
61
|
-
**Type:** object.
|
|
62
|
-
|
|
63
|
-
**Default:** `{}`.
|
|
64
|
-
|
|
65
|
-
The `options` parameter for `axe.run()`.
|
|
66
|
-
|
|
67
|
-
Accented only supports two keys of the `options` object:
|
|
68
|
-
|
|
69
|
-
* `rules`;
|
|
70
|
-
* `runOnly`.
|
|
71
|
-
|
|
72
|
-
Both properties are optional, and both control which accessibility rules your page is tested against.
|
|
73
|
-
|
|
74
|
-
See documentation: https://www.deque.com/axe/core-documentation/api-documentation/#options-parameter
|
|
5
|
+
# Accented
|
|
75
6
|
|
|
76
|
-
|
|
7
|
+
Continuous accessibility testing and issue highlighting for web development.
|
|
77
8
|
|
|
78
|
-
|
|
9
|
+
## What is Accented?
|
|
79
10
|
|
|
80
|
-
|
|
11
|
+
Accented is a visual library based on [axe-core](https://github.com/dequelabs/axe-core) that helps identify issues as soon as they are introduced.
|
|
81
12
|
|
|
82
|
-
|
|
13
|
+
It adds visual interactive callouts for all accessibility issues that axe-core identifies.
|
|
83
14
|
|
|
84
|
-
|
|
15
|
+
Example (without Accented / with Accented):
|
|
85
16
|
|
|
86
|
-
|
|
17
|
+

|
|
87
18
|
|
|
88
|
-
|
|
19
|
+
[Try it out on StackBlitz.](https://stackblitz.com/edit/accented-playground-react-ts?file=src%2Fmain.tsx)
|
|
89
20
|
|
|
90
|
-
|
|
21
|
+
Accented can complement other tools commonly used for accessibility testing:
|
|
91
22
|
|
|
92
|
-
**
|
|
23
|
+
- **It can find more issues than source code linting.** The popular [`eslint-plugin-jsx-a11y`](https://www.npmjs.com/package/eslint-plugin-jsx-a11y) is great, and linters validate the whole codebase, but some types of issues can only be found on the rendered page. For example, the linter cannot find issues with color contrast or heading order. Besides, Accented is not framework-specific.
|
|
24
|
+
- **It’s embedded into the project code, with no setup required in the browser or code editor.** You get a similar accessibility audit using [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) or [axe DevTools](https://www.deque.com/axe/devtools/), but with Accented, you don’t need a browser extension, the results are always up-to-date, and all team members are guaranteed to see the same issues.
|
|
25
|
+
- **You don’t need to write any extra code, unlike with adding accessibility tests to a test suite.** You can test for accessibility issues in your test suite, for example using [`@axe-core/playwright`](https://www.npmjs.com/package/@axe-core/playwright). For that, however, you need to write a test case for every state of the application that you want to test. Accented instead automatically tests anything that’s currently on the page in your browser.
|
|
93
26
|
|
|
94
|
-
|
|
95
|
-
It accepts a single `params` object with the following properties:
|
|
27
|
+
Learn more about Accented at [accented.dev](https://www.accented.dev).
|
|
96
28
|
|
|
97
|
-
|
|
98
|
-
* `performance`: runtime performance of the last scan. An object:
|
|
99
|
-
* `totalBlockingTime`: how long the main thread was blocked by Accented during the last scan, in milliseconds.
|
|
100
|
-
It’s further divided into the `scan` and `domUpdate` phases.
|
|
101
|
-
* `scan`: how long the `scan` phase took, in milliseconds.
|
|
102
|
-
* `domUpdate`: how long the `domUpdate` phase took, in milliseconds.
|
|
103
|
-
* `scanContext`: nodes that got scanned. Either an array of nodes,
|
|
104
|
-
or an object with `include` and `exclude` properties (if any nodes were excluded).
|
|
29
|
+
## Installation and usage
|
|
105
30
|
|
|
106
|
-
|
|
31
|
+
Install:
|
|
107
32
|
|
|
33
|
+
```bash
|
|
34
|
+
npm install --save-dev accented
|
|
108
35
|
```
|
|
109
|
-
accented({
|
|
110
|
-
callback: ({ elementsWithIssues, performance }) => {
|
|
111
|
-
console.log('Elements with issues:', elementsWithIssues);
|
|
112
|
-
console.log('Total blocking time:', performance.totalBlockingTime);
|
|
113
|
-
}
|
|
114
|
-
});
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
#### `name`
|
|
118
|
-
|
|
119
|
-
**Type:** string.
|
|
120
|
-
|
|
121
|
-
**Default:** `"accented"`.
|
|
122
|
-
|
|
123
|
-
The character sequence that’s used in various elements, attributes and stylesheets that Accented adds to the page.
|
|
124
|
-
|
|
125
|
-
You shouldn’t have to use this attribute unless some of the names on your page conflict with what Accented provides by default.
|
|
126
|
-
|
|
127
|
-
* The data attribute that’s added to elements with issues (default: `data-accented`).
|
|
128
|
-
* The custom elements for the button and the dialog that get created for each element with issues
|
|
129
|
-
(default: `accented-trigger`, `accented-dialog`).
|
|
130
|
-
* The CSS cascade layer containing page-wide Accented-specific styles (default: `accented`).
|
|
131
|
-
* The prefix for some of the CSS custom properties used by Accented (default: `--accented-`).
|
|
132
|
-
* The window property that’s used to prevent multiple axe-core scans from running simultaneously
|
|
133
|
-
(default: `__accented_axe_running__`).
|
|
134
|
-
|
|
135
|
-
Only lowercase alphanumeric characters and dashes (-) are allowed in the name,
|
|
136
|
-
and it must start with a lowercase letter.
|
|
137
36
|
|
|
138
|
-
|
|
37
|
+
Import and run at any moment during your app’s initialization:
|
|
139
38
|
|
|
39
|
+
```js
|
|
40
|
+
if (isDevelopment) {
|
|
41
|
+
const { accented } = await import("accented");
|
|
42
|
+
accented();
|
|
43
|
+
}
|
|
140
44
|
```
|
|
141
|
-
accented({name: 'my-name'});
|
|
142
|
-
```
|
|
143
|
-
|
|
144
|
-
With the above option provided, the attribute set on elements with issues will be `data-my-name`,
|
|
145
|
-
a custom element will be called `my-name-trigger`, and so on.
|
|
146
|
-
|
|
147
|
-
#### `throttle`
|
|
148
|
-
|
|
149
|
-
An object controlling when Accented will run its scans.
|
|
150
|
-
|
|
151
|
-
#### `throttle.wait`
|
|
152
|
-
|
|
153
|
-
**Type:** number.
|
|
154
|
-
|
|
155
|
-
**Default:** 1000.
|
|
156
|
-
|
|
157
|
-
The delay (in milliseconds) after a mutation or after the last Accented scan.
|
|
158
|
-
|
|
159
|
-
If the page you’re scanning has a lot of nodes,
|
|
160
|
-
scanning may take a noticeable time (~ a few hundred milliseconds),
|
|
161
|
-
during which time the main thread will be blocked most of the time.
|
|
162
|
-
|
|
163
|
-
You may want to experiment with this value if your page contents change frequently
|
|
164
|
-
or if it has JavaScript-based animations running on the main thread.
|
|
165
|
-
|
|
166
|
-
#### `throttle.leading`
|
|
167
|
-
|
|
168
|
-
**Type:** boolean.
|
|
169
|
-
|
|
170
|
-
**Default:** `true`.
|
|
171
|
-
|
|
172
|
-
If set to true, the scan runs immediately after a mutation.
|
|
173
|
-
In this case, `wait` only applies to subsequent scans,
|
|
174
|
-
giving the page at least `wait` milliseconds between the end of the previous scan
|
|
175
|
-
and the beginning of the next one.
|
|
176
|
-
|
|
177
|
-
If set to false, the wait applies to mutations as well,
|
|
178
|
-
delaying the output.
|
|
179
|
-
This may be useful if you’re expecting bursts of mutations on your page.
|
|
180
|
-
|
|
181
|
-
### Styling
|
|
182
|
-
|
|
183
|
-
TODO: Create a separate doc with info on using `:root` and CSS layers to control some aspects of styling.
|
|
184
|
-
|
|
185
|
-
Documented CSS custom props:
|
|
186
|
-
* `--accented-primary-color`
|
|
187
|
-
* `--accented-secondary-color`
|
|
188
|
-
* `--accented-outline-width`
|
|
189
|
-
* `--accented-outline-style`
|
|
190
|
-
|
|
191
|
-
## Miscellaneous
|
|
192
|
-
|
|
193
|
-
### Shadow DOM
|
|
194
|
-
|
|
195
|
-
Highlighting elements inside shadow DOM is not supported yet, see [#25](https://github.com/pomerantsev/accented/issues/25).
|
|
196
|
-
|
|
197
|
-
### Iframes
|
|
198
45
|
|
|
199
|
-
|
|
46
|
+
⚠️ **Heads up!**
|
|
47
|
+
Don’t expose Accented to your users.
|
|
48
|
+
It’s only meant to be used in development.
|
|
200
49
|
|
|
201
|
-
|
|
202
|
-
There should be no interference between the instances of Accented running in the parent and child documents.
|
|
50
|
+
See the docs for your bundler or framework for how to run code only in the development environment.
|
|
203
51
|
|
|
204
|
-
|
|
52
|
+
- [More detailed installation and usage guide](https://www.accented.dev/docs/installation-and-usage/)
|
|
53
|
+
- [Full API](https://www.accented.dev/docs/api/)
|
|
205
54
|
|
|
206
|
-
##
|
|
55
|
+
## More info
|
|
207
56
|
|
|
208
|
-
|
|
57
|
+
- [Accessibility](https://www.accented.dev/docs/accessibility-statement/) (how accessible is Accented itself?)
|
|
58
|
+
- [Performance](https://www.accented.dev/docs/how-accented-works/#performance) (does Accented affect runtime performance of my app?)
|
|
59
|
+
- [Browser support](https://www.accented.dev/docs/browser-support-policy/) (will Accented work for me and my teammates?)
|
|
60
|
+
- [Versioning policy](https://www.accented.dev/docs/versioning-policy/) (Accented follows [SemVer](https://semver.org/))
|
|
61
|
+
- [Changelog](https://github.com/pomerantsev/accented/blob/main/packages/accented/CHANGELOG.md)
|
|
209
62
|
|
|
210
|
-
|
|
63
|
+
## Contributing
|
|
211
64
|
|
|
212
|
-
|
|
65
|
+
Contributions are welcome!
|
|
213
66
|
|
|
214
|
-
|
|
67
|
+
- See [CONTRIBUTING.md](https://github.com/pomerantsev/accented/blob/main/CONTRIBUTING.md) for setup instructions and guidelines.
|
|
68
|
+
- Open an [issue](https://github.com/pomerantsev/accented/issues) or pull request if you spot a bug or want to propose a new feature.
|
|
69
|
+
- See [Milestones](https://github.com/pomerantsev/accented/milestones) to learn about our plans for Accented.
|
|
215
70
|
|
|
216
|
-
|
|
217
|
-
* Only re-running on the changed part of the page.
|
|
218
|
-
* Throttling calls and giving the ability to tweak it.
|
|
219
|
-
* Providing the ability to select which rules to run, and which elements to run them on.
|
|
220
|
-
* TODO: explore axe-core’s internals. Can I make it yield periodically?
|
|
71
|
+
Have other ideas or feedback? Contact Pavel at [hello@pavelpomerantsev.com](mailto:hello@pavelpomerantsev.com).
|
package/dist/accented.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import type { AccentedOptions, DisableAccented } from './types';
|
|
1
|
+
import type { AccentedOptions, DisableAccented } from './types.ts';
|
|
2
2
|
export type { AccentedOptions, DisableAccented };
|
|
3
3
|
/**
|
|
4
|
-
* Enables highlighting of
|
|
4
|
+
* Enables the continuous scanning and highlighting of accessibility issues on the page.
|
|
5
5
|
*
|
|
6
|
-
* @param {AccentedOptions} options - The options object.
|
|
6
|
+
* @param {AccentedOptions} options - The options object (optional).
|
|
7
7
|
*
|
|
8
|
-
* @returns A `disable` function that
|
|
8
|
+
* @returns A `disable` function that takes no parameters. When called, disables the scanning and highlighting, and cleans up any changes that Accented has made to the page.
|
|
9
9
|
*
|
|
10
10
|
* @example
|
|
11
11
|
* accented();
|
|
@@ -20,10 +20,10 @@ export type { AccentedOptions, DisableAccented };
|
|
|
20
20
|
* leading: false
|
|
21
21
|
* },
|
|
22
22
|
* callback: ({ elementsWithIssues, performance }) => {
|
|
23
|
-
*
|
|
24
|
-
*
|
|
23
|
+
* console.log('Elements with issues:', elementsWithIssues);
|
|
24
|
+
* console.log('Total blocking time:', performance.totalBlockingTime);
|
|
25
25
|
* }
|
|
26
26
|
* });
|
|
27
27
|
*/
|
|
28
|
-
export
|
|
28
|
+
export declare function accented(options?: AccentedOptions): DisableAccented;
|
|
29
29
|
//# sourceMappingURL=accented.d.ts.map
|
package/dist/accented.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accented.d.ts","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"accented.d.ts","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAMnE,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,QAAQ,CAAC,OAAO,GAAE,eAAoB,GAAG,eAAe,CAuFvE"}
|
package/dist/accented.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
1
|
+
import { createDomUpdater } from './dom-updater.js';
|
|
2
|
+
import { setupResizeListener as setupFullscreenListener } from './fullscreen-listener.js';
|
|
3
|
+
import { setupIntersectionObserver } from './intersection-observer.js';
|
|
4
|
+
import { logAndRethrow } from './log-and-rethrow.js';
|
|
5
|
+
import { createLogger } from './logger.js';
|
|
6
|
+
import { registerElements } from './register-elements.js';
|
|
7
|
+
import { setupResizeListener } from './resize-listener.js';
|
|
8
|
+
import { createScanner } from './scanner.js';
|
|
9
|
+
import { setupScrollListeners } from './scroll-listeners.js';
|
|
9
10
|
import { enabled, extendedElementsWithIssues } from './state.js';
|
|
10
|
-
import deepMerge from './utils/deep-merge.js';
|
|
11
|
-
import validateOptions from './validate-options.js';
|
|
12
|
-
import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
|
|
13
|
-
import logAndRethrow from './log-and-rethrow.js';
|
|
14
11
|
import { initializeContainingBlockSupportSet } from './utils/containing-blocks.js';
|
|
12
|
+
import { deepMerge } from './utils/deep-merge.js';
|
|
13
|
+
import { supportsAnchorPositioning } from './utils/supports-anchor-positioning.js';
|
|
14
|
+
import { validateOptions } from './validate-options.js';
|
|
15
15
|
/**
|
|
16
|
-
* Enables highlighting of
|
|
16
|
+
* Enables the continuous scanning and highlighting of accessibility issues on the page.
|
|
17
17
|
*
|
|
18
|
-
* @param {AccentedOptions} options - The options object.
|
|
18
|
+
* @param {AccentedOptions} options - The options object (optional).
|
|
19
19
|
*
|
|
20
|
-
* @returns A `disable` function that
|
|
20
|
+
* @returns A `disable` function that takes no parameters. When called, disables the scanning and highlighting, and cleans up any changes that Accented has made to the page.
|
|
21
21
|
*
|
|
22
22
|
* @example
|
|
23
23
|
* accented();
|
|
@@ -32,12 +32,12 @@ import { initializeContainingBlockSupportSet } from './utils/containing-blocks.j
|
|
|
32
32
|
* leading: false
|
|
33
33
|
* },
|
|
34
34
|
* callback: ({ elementsWithIssues, performance }) => {
|
|
35
|
-
*
|
|
36
|
-
*
|
|
35
|
+
* console.log('Elements with issues:', elementsWithIssues);
|
|
36
|
+
* console.log('Total blocking time:', performance.totalBlockingTime);
|
|
37
37
|
* }
|
|
38
38
|
* });
|
|
39
39
|
*/
|
|
40
|
-
export
|
|
40
|
+
export function accented(options = {}) {
|
|
41
41
|
validateOptions(options);
|
|
42
42
|
try {
|
|
43
43
|
if (typeof window === 'undefined' || typeof document === 'undefined') {
|
|
@@ -46,11 +46,11 @@ export default function accented(options = {}) {
|
|
|
46
46
|
return () => { };
|
|
47
47
|
}
|
|
48
48
|
const defaultOutput = {
|
|
49
|
-
console: true
|
|
49
|
+
console: true,
|
|
50
50
|
};
|
|
51
51
|
const defaultThrottle = {
|
|
52
52
|
wait: 1000,
|
|
53
|
-
leading: true
|
|
53
|
+
leading: true,
|
|
54
54
|
};
|
|
55
55
|
// IMPORTANT: when changing any of the properties or values, also do the following:
|
|
56
56
|
// * update the default value in the type documentation accordingly;
|
|
@@ -63,25 +63,28 @@ export default function accented(options = {}) {
|
|
|
63
63
|
name: 'accented',
|
|
64
64
|
output: defaultOutput,
|
|
65
65
|
throttle: defaultThrottle,
|
|
66
|
-
callback: () => { }
|
|
66
|
+
callback: () => { },
|
|
67
67
|
};
|
|
68
68
|
const { context, axeOptions, name, output, throttle, callback } = deepMerge(defaultOptions, options);
|
|
69
69
|
if (enabled.value) {
|
|
70
70
|
// Add link to the recipes section of the docs (#56).
|
|
71
|
-
console.warn('You are trying to run the Accented library more than once.
|
|
72
|
-
'This will likely lead to errors.');
|
|
71
|
+
console.warn('You are trying to run the Accented library more than once, which may lead to errors.');
|
|
73
72
|
console.trace();
|
|
74
73
|
}
|
|
75
74
|
enabled.value = true;
|
|
76
75
|
initializeContainingBlockSupportSet();
|
|
77
76
|
registerElements(name);
|
|
78
|
-
const { disconnect: cleanupIntersectionObserver, intersectionObserver } =
|
|
77
|
+
const { disconnect: cleanupIntersectionObserver, intersectionObserver } = setupIntersectionObserver();
|
|
79
78
|
const cleanupScanner = createScanner(name, context, axeOptions, throttle, callback);
|
|
80
79
|
const cleanupDomUpdater = createDomUpdater(name, intersectionObserver);
|
|
81
80
|
const cleanupLogger = output.console ? createLogger() : () => { };
|
|
82
|
-
const cleanupScrollListeners =
|
|
83
|
-
const cleanupResizeListener = supportsAnchorPositioning(window)
|
|
84
|
-
|
|
81
|
+
const cleanupScrollListeners = setupScrollListeners();
|
|
82
|
+
const cleanupResizeListener = supportsAnchorPositioning(window)
|
|
83
|
+
? () => { }
|
|
84
|
+
: setupResizeListener();
|
|
85
|
+
const cleanupFullscreenListener = supportsAnchorPositioning(window)
|
|
86
|
+
? () => { }
|
|
87
|
+
: setupFullscreenListener();
|
|
85
88
|
return () => {
|
|
86
89
|
try {
|
|
87
90
|
enabled.value = false;
|
package/dist/accented.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accented.js","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"accented.js","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/common/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,qBAAqB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/common/tokens.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC"}
|
package/dist/constants.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const accentedUrl = "https://www.
|
|
1
|
+
export declare const accentedUrl = "https://www.accented.dev";
|
|
2
2
|
export declare const issuesUrl = "https://github.com/pomerantsev/accented/issues";
|
|
3
3
|
export declare const getAccentedElementNames: (name: string) => string[];
|
|
4
4
|
//# sourceMappingURL=constants.d.ts.map
|
package/dist/constants.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,6BAA6B,CAAC;AACtD,eAAO,MAAM,SAAS,mDAAmD,CAAC;AAC1E,eAAO,MAAM,uBAAuB,GAAI,MAAM,MAAM,aAA0C,CAAC"}
|
package/dist/constants.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export const accentedUrl = 'https://www.
|
|
1
|
+
export const accentedUrl = 'https://www.accented.dev';
|
|
2
2
|
export const issuesUrl = 'https://github.com/pomerantsev/accented/issues';
|
|
3
3
|
export const getAccentedElementNames = (name) => [`${name}-trigger`, `${name}-dialog`];
|
|
4
4
|
//# sourceMappingURL=constants.js.map
|
package/dist/constants.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,0BAA0B,CAAC;AACtD,MAAM,CAAC,MAAM,SAAS,GAAG,gDAAgD,CAAC;AAC1E,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,UAAU,EAAE,GAAG,IAAI,SAAS,CAAC,CAAC"}
|
package/dist/dom-updater.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export declare function createDomUpdater(name: string, intersectionObserver?: IntersectionObserver): () => void;
|
|
2
2
|
//# sourceMappingURL=dom-updater.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dom-updater.d.ts","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dom-updater.d.ts","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"AAiCA,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,oBAAoB,CAAC,EAAE,oBAAoB,cAmIzF"}
|
package/dist/dom-updater.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { effect } from '@preact/signals-core';
|
|
2
|
+
import { primaryColor } from './common/tokens.js';
|
|
2
3
|
import { extendedElementsWithIssues, rootNodes } from './state.js';
|
|
3
|
-
import areElementsWithIssuesEqual from './utils/are-elements-with-issues-equal.js';
|
|
4
|
-
import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
|
|
4
|
+
import { areElementsWithIssuesEqual } from './utils/are-elements-with-issues-equal.js';
|
|
5
5
|
import { isDocument, isDocumentFragment, isShadowRoot } from './utils/dom-helpers.js';
|
|
6
|
-
import getParent from './utils/get-parent.js';
|
|
6
|
+
import { getParent } from './utils/get-parent.js';
|
|
7
|
+
import { supportsAnchorPositioning } from './utils/supports-anchor-positioning.js';
|
|
7
8
|
const shouldInsertTriggerInsideElement = (element) => {
|
|
8
9
|
/**
|
|
9
10
|
* No parent means that the element is a root node,
|
|
@@ -24,13 +25,13 @@ const shouldInsertTriggerInsideElement = (element) => {
|
|
|
24
25
|
const isSummary = element.nodeName === 'SUMMARY';
|
|
25
26
|
return noParent || isTableCell || isSummary;
|
|
26
27
|
};
|
|
27
|
-
export
|
|
28
|
+
export function createDomUpdater(name, intersectionObserver) {
|
|
28
29
|
const attrName = `data-${name}`;
|
|
29
30
|
function getAnchorNames(anchorNameValue) {
|
|
30
31
|
return anchorNameValue
|
|
31
32
|
.split(',')
|
|
32
|
-
.map(anchorName => anchorName.trim())
|
|
33
|
-
.filter(anchorName => anchorName.startsWith('--'));
|
|
33
|
+
.map((anchorName) => anchorName.trim())
|
|
34
|
+
.filter((anchorName) => anchorName.startsWith('--'));
|
|
34
35
|
}
|
|
35
36
|
function setAnchorName(elementWithIssues) {
|
|
36
37
|
const { element, id, anchorNameValue } = elementWithIssues;
|
|
@@ -93,7 +94,7 @@ export default function createDomUpdater(name, intersectionObserver) {
|
|
|
93
94
|
:root {
|
|
94
95
|
/* Ensure that the primary / secondary color combination meets WCAG 1.4.3 Contrast (Minimum) */
|
|
95
96
|
/* OKLCH stuff: https://oklch.com/ */
|
|
96
|
-
--${name}-primary-color:
|
|
97
|
+
--${name}-primary-color: ${primaryColor};
|
|
97
98
|
--${name}-secondary-color: oklch(0.98 0 0);
|
|
98
99
|
--${name}-outline-width: 2px;
|
|
99
100
|
--${name}-outline-style: solid;
|
|
@@ -111,8 +112,8 @@ export default function createDomUpdater(name, intersectionObserver) {
|
|
|
111
112
|
let previousRootNodes = new Set();
|
|
112
113
|
const disposeOfStyleSheetsEffect = effect(() => {
|
|
113
114
|
const newRootNodes = rootNodes.value;
|
|
114
|
-
const addedRootNodes = [...newRootNodes].filter(rootNode => !previousRootNodes.has(rootNode));
|
|
115
|
-
const removedRootNodes = [...previousRootNodes].filter(rootNode => !newRootNodes.has(rootNode));
|
|
115
|
+
const addedRootNodes = [...newRootNodes].filter((rootNode) => !previousRootNodes.has(rootNode));
|
|
116
|
+
const removedRootNodes = [...previousRootNodes].filter((rootNode) => !newRootNodes.has(rootNode));
|
|
116
117
|
for (const rootNode of addedRootNodes) {
|
|
117
118
|
if (isDocument(rootNode) || (isDocumentFragment(rootNode) && isShadowRoot(rootNode))) {
|
|
118
119
|
rootNode.adoptedStyleSheets.push(stylesheet);
|
|
@@ -126,11 +127,11 @@ export default function createDomUpdater(name, intersectionObserver) {
|
|
|
126
127
|
previousRootNodes = newRootNodes;
|
|
127
128
|
});
|
|
128
129
|
const disposeOfElementsEffect = effect(() => {
|
|
129
|
-
const added = extendedElementsWithIssues.value.filter(elementWithIssues => {
|
|
130
|
-
return !previousExtendedElementsWithIssues.some(previousElementWithIssues => areElementsWithIssuesEqual(previousElementWithIssues, elementWithIssues));
|
|
130
|
+
const added = extendedElementsWithIssues.value.filter((elementWithIssues) => {
|
|
131
|
+
return !previousExtendedElementsWithIssues.some((previousElementWithIssues) => areElementsWithIssuesEqual(previousElementWithIssues, elementWithIssues));
|
|
131
132
|
});
|
|
132
|
-
const removed = previousExtendedElementsWithIssues.filter(previousElementWithIssues => {
|
|
133
|
-
return !extendedElementsWithIssues.value.some(elementWithIssues => areElementsWithIssuesEqual(elementWithIssues, previousElementWithIssues));
|
|
133
|
+
const removed = previousExtendedElementsWithIssues.filter((previousElementWithIssues) => {
|
|
134
|
+
return !extendedElementsWithIssues.value.some((elementWithIssues) => areElementsWithIssuesEqual(elementWithIssues, previousElementWithIssues));
|
|
134
135
|
});
|
|
135
136
|
removeIssues(removed);
|
|
136
137
|
setIssues(added);
|
package/dist/dom-updater.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dom-updater.js","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"dom-updater.js","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import type { Issue } from '../types';
|
|
2
1
|
import type { Signal } from '@preact/signals-core';
|
|
2
|
+
import type { Issue } from '../types.ts';
|
|
3
3
|
export interface AccentedDialog extends HTMLElement {
|
|
4
4
|
issues: Signal<Array<Issue>> | undefined;
|
|
5
5
|
element: Element | undefined;
|
|
6
6
|
showModal: () => void;
|
|
7
7
|
open: boolean;
|
|
8
8
|
}
|
|
9
|
-
declare const
|
|
9
|
+
export declare const getAccentedDialog: () => {
|
|
10
10
|
new (): {
|
|
11
11
|
"__#1@#abortController": AbortController | undefined;
|
|
12
12
|
issues: Signal<Array<Issue>> | undefined;
|
|
@@ -356,5 +356,4 @@ declare const _default: () => {
|
|
|
356
356
|
focus(options?: FocusOptions): void;
|
|
357
357
|
};
|
|
358
358
|
};
|
|
359
|
-
export default _default;
|
|
360
359
|
//# sourceMappingURL=accented-dialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accented-dialog.d.ts","sourceRoot":"","sources":["../../src/elements/accented-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"accented-dialog.d.ts","sourceRoot":"","sources":["../../src/elements/accented-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGnD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIzC,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,SAAS,CAAC;IACzC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;CACf;AAID,eAAO,MAAM,iBAAiB;;iCAoOR,eAAe,GAAG,SAAS;gBAErC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,SAAS;iBAE/B,OAAO,GAAG,SAAS;;;;;qCAqJN,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBnC,CAAC"}
|