accented 0.0.1-dev.4 → 1.0.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.
Files changed (217) hide show
  1. package/NOTICE +14 -0
  2. package/README.md +71 -0
  3. package/dist/accented.d.ts +28 -7
  4. package/dist/accented.d.ts.map +1 -1
  5. package/dist/accented.js +107 -42
  6. package/dist/accented.js.map +1 -1
  7. package/dist/common/tokens.d.ts +7 -0
  8. package/dist/common/tokens.d.ts.map +1 -0
  9. package/dist/common/tokens.js +8 -0
  10. package/dist/common/tokens.js.map +1 -0
  11. package/dist/constants.d.ts +4 -0
  12. package/dist/constants.d.ts.map +1 -0
  13. package/dist/constants.js +4 -0
  14. package/dist/constants.js.map +1 -0
  15. package/dist/dom-updater.d.ts +1 -6
  16. package/dist/dom-updater.d.ts.map +1 -1
  17. package/dist/dom-updater.js +136 -20
  18. package/dist/dom-updater.js.map +1 -1
  19. package/dist/elements/accented-dialog.d.ts +359 -0
  20. package/dist/elements/accented-dialog.d.ts.map +1 -0
  21. package/dist/elements/accented-dialog.js +377 -0
  22. package/dist/elements/accented-dialog.js.map +1 -0
  23. package/dist/elements/accented-trigger.d.ts +364 -0
  24. package/dist/elements/accented-trigger.d.ts.map +1 -0
  25. package/dist/elements/accented-trigger.js +214 -0
  26. package/dist/elements/accented-trigger.js.map +1 -0
  27. package/dist/fullscreen-listener.d.ts +2 -0
  28. package/dist/fullscreen-listener.d.ts.map +1 -0
  29. package/dist/fullscreen-listener.js +17 -0
  30. package/dist/fullscreen-listener.js.map +1 -0
  31. package/dist/intersection-observer.d.ts +5 -0
  32. package/dist/intersection-observer.d.ts.map +1 -0
  33. package/dist/intersection-observer.js +34 -0
  34. package/dist/intersection-observer.js.map +1 -0
  35. package/dist/log-and-rethrow.d.ts +2 -0
  36. package/dist/log-and-rethrow.d.ts.map +1 -0
  37. package/dist/log-and-rethrow.js +6 -0
  38. package/dist/log-and-rethrow.js.map +1 -0
  39. package/dist/logger.d.ts +2 -0
  40. package/dist/logger.d.ts.map +1 -0
  41. package/dist/logger.js +28 -0
  42. package/dist/logger.js.map +1 -0
  43. package/dist/register-elements.d.ts +2 -0
  44. package/dist/register-elements.d.ts.map +1 -0
  45. package/dist/register-elements.js +20 -0
  46. package/dist/register-elements.js.map +1 -0
  47. package/dist/resize-listener.d.ts +2 -0
  48. package/dist/resize-listener.d.ts.map +1 -0
  49. package/dist/resize-listener.js +17 -0
  50. package/dist/resize-listener.js.map +1 -0
  51. package/dist/scanner.d.ts +3 -0
  52. package/dist/scanner.d.ts.map +1 -0
  53. package/dist/scanner.js +153 -0
  54. package/dist/scanner.js.map +1 -0
  55. package/dist/scroll-listeners.d.ts +2 -0
  56. package/dist/scroll-listeners.d.ts.map +1 -0
  57. package/dist/scroll-listeners.js +37 -0
  58. package/dist/scroll-listeners.js.map +1 -0
  59. package/dist/state.d.ts +7 -0
  60. package/dist/state.d.ts.map +1 -0
  61. package/dist/state.js +16 -0
  62. package/dist/state.js.map +1 -0
  63. package/dist/task-queue.d.ts +5 -6
  64. package/dist/task-queue.d.ts.map +1 -1
  65. package/dist/task-queue.js +30 -25
  66. package/dist/task-queue.js.map +1 -1
  67. package/dist/types.d.ts +227 -0
  68. package/dist/types.d.ts.map +1 -0
  69. package/dist/types.js +2 -0
  70. package/dist/types.js.map +1 -0
  71. package/dist/utils/are-elements-with-issues-equal.d.ts +3 -0
  72. package/dist/utils/are-elements-with-issues-equal.d.ts.map +1 -0
  73. package/dist/utils/are-elements-with-issues-equal.js +5 -0
  74. package/dist/utils/are-elements-with-issues-equal.js.map +1 -0
  75. package/dist/utils/are-issue-sets-equal.d.ts +3 -0
  76. package/dist/utils/are-issue-sets-equal.d.ts.map +1 -0
  77. package/dist/utils/are-issue-sets-equal.js +6 -0
  78. package/dist/utils/are-issue-sets-equal.js.map +1 -0
  79. package/dist/utils/containing-blocks.d.ts +3 -0
  80. package/dist/utils/containing-blocks.d.ts.map +1 -0
  81. package/dist/utils/containing-blocks.js +46 -0
  82. package/dist/utils/containing-blocks.js.map +1 -0
  83. package/dist/utils/contains.d.ts +2 -0
  84. package/dist/utils/contains.d.ts.map +1 -0
  85. package/dist/utils/contains.js +19 -0
  86. package/dist/utils/contains.js.map +1 -0
  87. package/dist/utils/deduplicate-nodes.d.ts +2 -0
  88. package/dist/utils/deduplicate-nodes.d.ts.map +1 -0
  89. package/dist/utils/deduplicate-nodes.js +4 -0
  90. package/dist/utils/deduplicate-nodes.js.map +1 -0
  91. package/dist/utils/deep-merge.d.ts +4 -0
  92. package/dist/utils/deep-merge.d.ts.map +1 -0
  93. package/dist/utils/deep-merge.js +21 -0
  94. package/dist/utils/deep-merge.js.map +1 -0
  95. package/dist/utils/dom-helpers.d.ts +9 -0
  96. package/dist/utils/dom-helpers.d.ts.map +1 -0
  97. package/dist/utils/dom-helpers.js +34 -0
  98. package/dist/utils/dom-helpers.js.map +1 -0
  99. package/dist/utils/ensure-non-empty.d.ts +2 -0
  100. package/dist/utils/ensure-non-empty.d.ts.map +1 -0
  101. package/dist/utils/ensure-non-empty.js +7 -0
  102. package/dist/utils/ensure-non-empty.js.map +1 -0
  103. package/dist/utils/get-element-html.d.ts +2 -0
  104. package/dist/utils/get-element-html.d.ts.map +1 -0
  105. package/dist/utils/get-element-html.js +16 -0
  106. package/dist/utils/get-element-html.js.map +1 -0
  107. package/dist/utils/get-element-position.d.ts +11 -0
  108. package/dist/utils/get-element-position.d.ts.map +1 -0
  109. package/dist/utils/get-element-position.js +70 -0
  110. package/dist/utils/get-element-position.js.map +1 -0
  111. package/dist/utils/get-parent.d.ts +2 -0
  112. package/dist/utils/get-parent.d.ts.map +1 -0
  113. package/dist/utils/get-parent.js +12 -0
  114. package/dist/utils/get-parent.js.map +1 -0
  115. package/dist/utils/get-scan-context.d.ts +3 -0
  116. package/dist/utils/get-scan-context.d.ts.map +1 -0
  117. package/dist/utils/get-scan-context.js +28 -0
  118. package/dist/utils/get-scan-context.js.map +1 -0
  119. package/dist/utils/get-scrollable-ancestors.d.ts +2 -0
  120. package/dist/utils/get-scrollable-ancestors.d.ts.map +1 -0
  121. package/dist/utils/get-scrollable-ancestors.js +19 -0
  122. package/dist/utils/get-scrollable-ancestors.js.map +1 -0
  123. package/dist/utils/is-node-in-scan-context.d.ts +3 -0
  124. package/dist/utils/is-node-in-scan-context.d.ts.map +1 -0
  125. package/dist/utils/is-node-in-scan-context.js +26 -0
  126. package/dist/utils/is-node-in-scan-context.js.map +1 -0
  127. package/dist/utils/is-non-empty.d.ts +2 -0
  128. package/dist/utils/is-non-empty.d.ts.map +1 -0
  129. package/dist/utils/is-non-empty.js +4 -0
  130. package/dist/utils/is-non-empty.js.map +1 -0
  131. package/dist/utils/normalize-context.d.ts +3 -0
  132. package/dist/utils/normalize-context.d.ts.map +1 -0
  133. package/dist/utils/normalize-context.js +59 -0
  134. package/dist/utils/normalize-context.js.map +1 -0
  135. package/dist/utils/recalculate-positions.d.ts +2 -0
  136. package/dist/utils/recalculate-positions.d.ts.map +1 -0
  137. package/dist/utils/recalculate-positions.js +27 -0
  138. package/dist/utils/recalculate-positions.js.map +1 -0
  139. package/dist/utils/recalculate-scrollable-ancestors.d.ts +2 -0
  140. package/dist/utils/recalculate-scrollable-ancestors.d.ts.map +1 -0
  141. package/dist/utils/recalculate-scrollable-ancestors.js +13 -0
  142. package/dist/utils/recalculate-scrollable-ancestors.js.map +1 -0
  143. package/dist/utils/shadow-dom-aware-mutation-observer.d.ts +10 -0
  144. package/dist/utils/shadow-dom-aware-mutation-observer.d.ts.map +1 -0
  145. package/dist/utils/shadow-dom-aware-mutation-observer.js +61 -0
  146. package/dist/utils/shadow-dom-aware-mutation-observer.js.map +1 -0
  147. package/dist/utils/supports-anchor-positioning.d.ts +6 -0
  148. package/dist/utils/supports-anchor-positioning.d.ts.map +1 -0
  149. package/dist/utils/supports-anchor-positioning.js +4 -0
  150. package/dist/utils/supports-anchor-positioning.js.map +1 -0
  151. package/dist/utils/transform-violations.d.ts +4 -0
  152. package/dist/utils/transform-violations.d.ts.map +1 -0
  153. package/dist/utils/transform-violations.js +61 -0
  154. package/dist/utils/transform-violations.js.map +1 -0
  155. package/dist/utils/update-elements-with-issues.d.ts +13 -0
  156. package/dist/utils/update-elements-with-issues.d.ts.map +1 -0
  157. package/dist/utils/update-elements-with-issues.js +96 -0
  158. package/dist/utils/update-elements-with-issues.js.map +1 -0
  159. package/dist/validate-options.d.ts +3 -0
  160. package/dist/validate-options.d.ts.map +1 -0
  161. package/dist/validate-options.js +129 -0
  162. package/dist/validate-options.js.map +1 -0
  163. package/package.json +21 -8
  164. package/src/accented.test.ts +24 -0
  165. package/src/accented.ts +130 -0
  166. package/src/common/tokens.ts +10 -0
  167. package/src/constants.ts +3 -0
  168. package/src/dom-updater.ts +165 -0
  169. package/src/elements/accented-dialog.ts +419 -0
  170. package/src/elements/accented-trigger.ts +251 -0
  171. package/src/fullscreen-listener.ts +21 -0
  172. package/src/intersection-observer.ts +39 -0
  173. package/src/log-and-rethrow.ts +8 -0
  174. package/src/logger.ts +36 -0
  175. package/src/register-elements.ts +21 -0
  176. package/src/resize-listener.ts +21 -0
  177. package/src/scanner.ts +195 -0
  178. package/src/scroll-listeners.ts +45 -0
  179. package/src/state.ts +35 -0
  180. package/src/task-queue.test.ts +136 -0
  181. package/src/task-queue.ts +61 -0
  182. package/src/types.ts +258 -0
  183. package/src/utils/are-elements-with-issues-equal.ts +11 -0
  184. package/src/utils/are-issue-sets-equal.test.ts +53 -0
  185. package/src/utils/are-issue-sets-equal.ts +12 -0
  186. package/src/utils/containing-blocks.ts +60 -0
  187. package/src/utils/contains.test.ts +54 -0
  188. package/src/utils/contains.ts +19 -0
  189. package/src/utils/deduplicate-nodes.ts +3 -0
  190. package/src/utils/deep-merge.test.ts +41 -0
  191. package/src/utils/deep-merge.ts +24 -0
  192. package/src/utils/dom-helpers.ts +42 -0
  193. package/src/utils/ensure-non-empty.ts +6 -0
  194. package/src/utils/get-element-html.ts +15 -0
  195. package/src/utils/get-element-position.ts +89 -0
  196. package/src/utils/get-parent.ts +14 -0
  197. package/src/utils/get-scan-context.test.ts +85 -0
  198. package/src/utils/get-scan-context.ts +36 -0
  199. package/src/utils/get-scrollable-ancestors.ts +22 -0
  200. package/src/utils/is-node-in-scan-context.test.ts +70 -0
  201. package/src/utils/is-node-in-scan-context.ts +29 -0
  202. package/src/utils/is-non-empty.ts +3 -0
  203. package/src/utils/normalize-context.test.ts +105 -0
  204. package/src/utils/normalize-context.ts +65 -0
  205. package/src/utils/recalculate-positions.ts +27 -0
  206. package/src/utils/recalculate-scrollable-ancestors.ts +13 -0
  207. package/src/utils/shadow-dom-aware-mutation-observer.ts +75 -0
  208. package/src/utils/supports-anchor-positioning.ts +7 -0
  209. package/src/utils/transform-violations.test.ts +128 -0
  210. package/src/utils/transform-violations.ts +74 -0
  211. package/src/utils/update-elements-with-issues.test.ts +371 -0
  212. package/src/utils/update-elements-with-issues.ts +144 -0
  213. package/src/validate-options.ts +184 -0
  214. package/dist/utils/issuesToElements.d.ts +0 -3
  215. package/dist/utils/issuesToElements.d.ts.map +0 -1
  216. package/dist/utils/issuesToElements.js +0 -16
  217. package/dist/utils/issuesToElements.js.map +0 -1
package/NOTICE ADDED
@@ -0,0 +1,14 @@
1
+ NOTICE
2
+
3
+ This project, Accented, is licensed under the MIT License.
4
+
5
+ However, it depends on axe-core, which is licensed under the Mozilla Public License 2.0 (MPL-2.0). The source code for axe-core is available at:
6
+
7
+ https://github.com/dequelabs/axe-core
8
+
9
+ According to the MPL-2.0 requirements:
10
+ - Any modifications made to axe-core within this project will remain under the MPL-2.0 license.
11
+ - The original license and notices for axe-core are preserved.
12
+ - The full MPL-2.0 license can be found at: https://www.mozilla.org/MPL/2.0/
13
+
14
+ No changes have been made to axe-core within this project, beyond its use as a dependency.
package/README.md ADDED
@@ -0,0 +1,71 @@
1
+ <a href="https://www.accented.dev">
2
+ <img alt="Accented" src="https://www.accented.dev/images/logo.svg" width="100" />
3
+ </a>
4
+
5
+ # Accented
6
+
7
+ A frontend library for continuous accessibility testing and issue highlighting.
8
+
9
+ ## What is Accented?
10
+
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.
12
+
13
+ It adds interactive visual callouts for all accessibility issues that axe-core identifies.
14
+
15
+ Example — without Accented vs. with Accented:
16
+
17
+ ![Two screenshots of the same web application side by side. On the left, the regular state of the application. On the right, the same state but with bright outlines and buttons added to some page elements.](https://www.accented.dev/images/side-by-side.png)
18
+
19
+ [Try it out at the Playground (StackBlitz).](https://stackblitz.com/edit/accented-playground-react-ts?file=src%2Fmain.tsx)
20
+
21
+ Accented can complement other tools commonly used for accessibility testing:
22
+
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 issues can only be detected 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’d get a similar audit from [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, and the results are always up to date.
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.
26
+
27
+ Learn more about Accented at [accented.dev](https://www.accented.dev).
28
+
29
+ ## Installation and usage
30
+
31
+ Install:
32
+
33
+ ```bash
34
+ npm install --save-dev accented
35
+ ```
36
+
37
+ Import and run at any moment during your app’s initialization:
38
+
39
+ ```js
40
+ if (isDevelopment) {
41
+ const { accented } = await import("accented");
42
+ accented();
43
+ }
44
+ ```
45
+
46
+ ⚠️ **Heads up!**
47
+ Don’t expose Accented to your users.
48
+ It’s for development use only.
49
+
50
+ See the docs for your bundler or framework for how to run code only in the development environment.
51
+
52
+ - [More detailed installation and usage guide](https://www.accented.dev/getting-started)
53
+ - [Full API](https://www.accented.dev/api)
54
+
55
+ ## More info
56
+
57
+ - [Accessibility](https://www.accented.dev/about#accessibility) (how accessible is Accented itself?)
58
+ - [Performance](https://www.accented.dev/how-it-works#performance) (does Accented affect runtime performance of my app?)
59
+ - [Browser support](https://www.accented.dev/about#browser-support) (will Accented work for me and my teammates?)
60
+ - [Versioning policy](https://www.accented.dev/about#versioning) (Accented follows [SemVer](https://semver.org/))
61
+ - [Changelog](https://github.com/pomerantsev/accented/blob/main/packages/accented/CHANGELOG.md)
62
+
63
+ ## Contributing
64
+
65
+ Contributions are welcome!
66
+
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.
70
+
71
+ Have feedback or ideas? Contact Pavel at [hello@pavelpomerantsev.com](mailto:hello@pavelpomerantsev.com).
@@ -1,8 +1,29 @@
1
- type AccentedProps = {
2
- outputToConsole: boolean;
3
- initialDelay: number;
4
- throttleDelay: number;
5
- };
6
- export default function accented(props?: Partial<AccentedProps>): void;
7
- export {};
1
+ import type { AccentedOptions, DisableAccented } from './types.ts';
2
+ export type { AccentedOptions, DisableAccented };
3
+ /**
4
+ * Enables the continuous scanning and highlighting of accessibility issues on the page.
5
+ *
6
+ * @param {AccentedOptions} options - The options object (optional).
7
+ *
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
+ *
10
+ * @example
11
+ * accented();
12
+ *
13
+ * @example
14
+ * const disableAccented = accented({
15
+ * output: {
16
+ * console: false
17
+ * },
18
+ * throttle: {
19
+ * wait: 500,
20
+ * leading: false
21
+ * },
22
+ * callback: ({ elementsWithIssues, performance }) => {
23
+ * console.log('Elements with issues:', elementsWithIssues);
24
+ * console.log('Total blocking time:', performance.totalBlockingTime);
25
+ * }
26
+ * });
27
+ */
28
+ export declare function accented(options?: AccentedOptions): DisableAccented;
8
29
  //# sourceMappingURL=accented.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"accented.d.ts","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"AAKA,KAAK,aAAa,GAAG;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAA;CACtB,CAAC;AAQF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,GAAE,OAAO,CAAC,aAAa,CAAM,QA6ClE"}
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,CAsFvE"}
package/dist/accented.js CHANGED
@@ -1,46 +1,111 @@
1
- import axe from 'axe-core';
2
- import TaskQueue from './task-queue.js';
3
- import DomUpdater from './dom-updater.js';
4
- import issuesToElements from './utils/issuesToElements.js';
5
- const defaultProps = {
6
- outputToConsole: true,
7
- initialDelay: 0,
8
- throttleDelay: 1000
9
- };
10
- export default function accented(props = {}) {
11
- const { outputToConsole, initialDelay, throttleDelay } = { ...defaultProps, ...props };
12
- if (typeof window === 'undefined' || typeof document === 'undefined') {
13
- console.warn('Accented: this script can only run in the browser, and it’s likely running on the server now. Exiting.');
14
- console.trace();
15
- return;
16
- }
17
- const domUpdater = new DomUpdater();
18
- const taskQueue = new TaskQueue(async () => {
19
- performance.mark('axe-start');
20
- const result = await axe.run();
21
- const axeMeasure = performance.measure('axe', 'axe-start');
22
- const elements = issuesToElements(result.violations);
23
- domUpdater.update(elements);
24
- if (outputToConsole) {
25
- console.log('Result:', result);
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';
10
+ import { enabled, extendedElementsWithIssues } from './state.js';
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
+ /**
16
+ * Enables the continuous scanning and highlighting of accessibility issues on the page.
17
+ *
18
+ * @param {AccentedOptions} options - The options object (optional).
19
+ *
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
+ *
22
+ * @example
23
+ * accented();
24
+ *
25
+ * @example
26
+ * const disableAccented = accented({
27
+ * output: {
28
+ * console: false
29
+ * },
30
+ * throttle: {
31
+ * wait: 500,
32
+ * leading: false
33
+ * },
34
+ * callback: ({ elementsWithIssues, performance }) => {
35
+ * console.log('Elements with issues:', elementsWithIssues);
36
+ * console.log('Total blocking time:', performance.totalBlockingTime);
37
+ * }
38
+ * });
39
+ */
40
+ export function accented(options = {}) {
41
+ validateOptions(options);
42
+ try {
43
+ if (typeof window === 'undefined' || typeof document === 'undefined') {
44
+ console.warn('Accented: this script can only run in the browser, and it’s likely running on the server now. Exiting.');
45
+ console.trace();
46
+ return () => { };
26
47
  }
27
- console.log('Axe run duration:', Math.round(axeMeasure.duration), 'ms');
28
- }, { initialDelay, throttleDelay });
29
- taskQueue.add(document);
30
- const mutationObserver = new MutationObserver(mutationList => {
31
- // TODO: filter out irrelevant mutations
32
- for (const mutationRecord of mutationList) {
33
- if (mutationRecord.type === 'attributes' && mutationRecord.attributeName === 'data-accented') {
34
- continue;
35
- }
36
- taskQueue.add(mutationRecord.target);
48
+ const defaultOutput = {
49
+ console: true,
50
+ };
51
+ const defaultThrottle = {
52
+ wait: 1000,
53
+ leading: true,
54
+ };
55
+ // IMPORTANT: when changing any of the properties or values, also do the following:
56
+ // * update the default value in the type documentation accordingly;
57
+ // * update validations and validation tests if necessary;
58
+ // * update examples in the accented() function JSDoc;
59
+ // * update examples in the Readme.
60
+ const defaultOptions = {
61
+ context: document,
62
+ axeOptions: {},
63
+ name: 'accented',
64
+ output: defaultOutput,
65
+ throttle: defaultThrottle,
66
+ callback: () => { },
67
+ };
68
+ const { context, axeOptions, name, output, throttle, callback } = deepMerge(defaultOptions, options);
69
+ if (enabled.value) {
70
+ console.warn('You are trying to run the Accented library more than once, which may lead to errors. See https://www.accented.dev/getting-started#run-once-per-page');
71
+ console.trace();
37
72
  }
38
- });
39
- // TODO: read more about the params and decide which ones we need.
40
- mutationObserver.observe(document, {
41
- subtree: true,
42
- childList: true,
43
- attributes: true
44
- });
73
+ enabled.value = true;
74
+ initializeContainingBlockSupportSet();
75
+ registerElements(name);
76
+ const { disconnect: cleanupIntersectionObserver, intersectionObserver } = setupIntersectionObserver();
77
+ const cleanupScanner = createScanner(name, context, axeOptions, throttle, callback);
78
+ const cleanupDomUpdater = createDomUpdater(name, intersectionObserver);
79
+ const cleanupLogger = output.console ? createLogger() : () => { };
80
+ const cleanupScrollListeners = setupScrollListeners();
81
+ const cleanupResizeListener = supportsAnchorPositioning(window)
82
+ ? () => { }
83
+ : setupResizeListener();
84
+ const cleanupFullscreenListener = supportsAnchorPositioning(window)
85
+ ? () => { }
86
+ : setupFullscreenListener();
87
+ return () => {
88
+ try {
89
+ enabled.value = false;
90
+ extendedElementsWithIssues.value = [];
91
+ cleanupScanner();
92
+ cleanupDomUpdater();
93
+ cleanupLogger();
94
+ cleanupScrollListeners();
95
+ cleanupResizeListener();
96
+ cleanupFullscreenListener();
97
+ if (cleanupIntersectionObserver) {
98
+ cleanupIntersectionObserver();
99
+ }
100
+ }
101
+ catch (error) {
102
+ logAndRethrow(error);
103
+ }
104
+ };
105
+ }
106
+ catch (error) {
107
+ logAndRethrow(error);
108
+ return () => { };
109
+ }
45
110
  }
46
111
  //# sourceMappingURL=accented.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"accented.js","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,gBAAgB,MAAM,0BAA0B,CAAC;AAQxD,MAAM,YAAY,GAAkB;IAClC,eAAe,EAAE,IAAI;IACrB,YAAY,EAAE,CAAC;IACf,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,QAAgC,EAAE;IACjE,MAAM,EAAC,eAAe,EAAE,YAAY,EAAE,aAAa,EAAC,GAAG,EAAC,GAAG,YAAY,EAAE,GAAG,KAAK,EAAC,CAAC;IAEnF,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACrE,OAAO,CAAC,IAAI,CAAC,wGAAwG,CAAC,CAAC;QACvH,OAAO,CAAC,KAAK,EAAE,CAAC;QAChB,OAAO;IACT,CAAC;IAED,MAAM,UAAU,GAAG,IAAI,UAAU,EAAE,CAAC;IAEpC,MAAM,SAAS,GAAG,IAAI,SAAS,CAAO,KAAK,IAAI,EAAE;QAC/C,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE9B,MAAM,MAAM,GAAG,MAAM,GAAG,CAAC,GAAG,EAAE,CAAC;QAE/B,MAAM,UAAU,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;QAE3D,MAAM,QAAQ,GAAG,gBAAgB,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACrD,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAE5B,IAAI,eAAe,EAAE,CAAC;YACpB,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;QACjC,CAAC;QACD,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC;IAC1E,CAAC,EAAE,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC,CAAC;IAEpC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAExB,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,YAAY,CAAC,EAAE;QAC3D,wCAAwC;QACxC,KAAK,MAAM,cAAc,IAAI,YAAY,EAAE,CAAC;YAC1C,IAAI,cAAc,CAAC,IAAI,KAAK,YAAY,IAAI,cAAc,CAAC,aAAa,KAAK,eAAe,EAAE,CAAC;gBAC7F,SAAS;YACX,CAAC;YACD,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QACvC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,kEAAkE;IAClE,gBAAgB,CAAC,OAAO,CAAC,QAAQ,EAAE;QACjC,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,IAAI;QACf,UAAU,EAAE,IAAI;KACjB,CAAC,CAAC;AACL,CAAC"}
1
+ {"version":3,"file":"accented.js","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,7 @@
1
+ export declare const primaryColorDark = "oklch(0.5 0.3 0)";
2
+ export declare const primaryColorLight = "oklch(0.8 0.2 0)";
3
+ export declare const colorLight = "oklch(0.98 0 0)";
4
+ export declare const colorDark = "oklch(0.22 0 0)";
5
+ export declare const fontSystemSans = "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif";
6
+ export declare const fontSystemMono = "Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace";
7
+ //# sourceMappingURL=tokens.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/common/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,qBAAqB,CAAC;AACnD,eAAO,MAAM,iBAAiB,qBAAqB,CAAC;AACpD,eAAO,MAAM,UAAU,oBAAoB,CAAC;AAC5C,eAAO,MAAM,SAAS,oBAAoB,CAAC;AAG3C,eAAO,MAAM,cAAc,kKACsI,CAAC;AAClK,eAAO,MAAM,cAAc,sFAC0D,CAAC"}
@@ -0,0 +1,8 @@
1
+ export const primaryColorDark = 'oklch(0.5 0.3 0)';
2
+ export const primaryColorLight = 'oklch(0.8 0.2 0)';
3
+ export const colorLight = 'oklch(0.98 0 0)';
4
+ export const colorDark = 'oklch(0.22 0 0)';
5
+ /* https://systemfontstack.com/ */
6
+ export const fontSystemSans = '-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif';
7
+ export const fontSystemMono = 'Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace';
8
+ //# sourceMappingURL=tokens.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/common/tokens.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;AACnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AACpD,MAAM,CAAC,MAAM,UAAU,GAAG,iBAAiB,CAAC;AAC5C,MAAM,CAAC,MAAM,SAAS,GAAG,iBAAiB,CAAC;AAE3C,kCAAkC;AAClC,MAAM,CAAC,MAAM,cAAc,GACzB,+JAA+J,CAAC;AAClK,MAAM,CAAC,MAAM,cAAc,GACzB,mFAAmF,CAAC"}
@@ -0,0 +1,4 @@
1
+ export declare const accentedUrl = "https://www.accented.dev";
2
+ export declare const issuesUrl = "https://github.com/pomerantsev/accented/issues";
3
+ export declare const getAccentedElementNames: (name: string) => string[];
4
+ //# sourceMappingURL=constants.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,4 @@
1
+ export const accentedUrl = 'https://www.accented.dev';
2
+ export const issuesUrl = 'https://github.com/pomerantsev/accented/issues';
3
+ export const getAccentedElementNames = (name) => [`${name}-trigger`, `${name}-dialog`];
4
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
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"}
@@ -1,7 +1,2 @@
1
- export default class DomUpdater {
2
- #private;
3
- elements: Array<Element>;
4
- constructor();
5
- update(newElements: Array<Element>): void;
6
- }
1
+ export declare function createDomUpdater(name: string, intersectionObserver?: IntersectionObserver): () => void;
7
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":"AAEA,MAAM,CAAC,OAAO,OAAO,UAAU;;IAC7B,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAM;;IAM9B,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC;CAsBnC"}
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"}
@@ -1,29 +1,145 @@
1
- const attrName = 'data-accented';
2
- export default class DomUpdater {
3
- elements = [];
4
- constructor() {
5
- this.#addStylesheetToDocument();
1
+ import { effect } from '@preact/signals-core';
2
+ import { primaryColorDark } from './common/tokens.js';
3
+ import { extendedElementsWithIssues, rootNodes } from './state.js';
4
+ import { areElementsWithIssuesEqual } from './utils/are-elements-with-issues-equal.js';
5
+ import { isDocument, isDocumentFragment, isShadowRoot } from './utils/dom-helpers.js';
6
+ import { getParent } from './utils/get-parent.js';
7
+ import { supportsAnchorPositioning } from './utils/supports-anchor-positioning.js';
8
+ const shouldInsertTriggerInsideElement = (element) => {
9
+ /**
10
+ * No parent means that the element is a root node,
11
+ * which cannot have siblings.
12
+ */
13
+ const noParent = !getParent(element);
14
+ /**
15
+ * Table cells get a special treatment because if a sibling to a TH or TD is inserted,
16
+ * it alters the table layout, no matter how that sibling is positioned.
17
+ * We don't want tables to look broken, so we're inserting the trigger inside the table cell.
18
+ */
19
+ const isTableCell = element.nodeName === 'TH' || element.nodeName === 'TD';
20
+ /**
21
+ * We want to put the trigger inside the <summary> element,
22
+ * because otherwise it will be hidden by the browser when the <details> element is collapsed
23
+ * (since none of the siblings of <summary> are visible then).
24
+ */
25
+ const isSummary = element.nodeName === 'SUMMARY';
26
+ return noParent || isTableCell || isSummary;
27
+ };
28
+ export function createDomUpdater(name, intersectionObserver) {
29
+ const attrName = `data-${name}`;
30
+ function getAnchorNames(anchorNameValue) {
31
+ return anchorNameValue
32
+ .split(',')
33
+ .map((anchorName) => anchorName.trim())
34
+ .filter((anchorName) => anchorName.startsWith('--'));
6
35
  }
7
- update(newElements) {
8
- for (const element of this.elements) {
9
- element.removeAttribute(attrName);
36
+ function setAnchorName(elementWithIssues) {
37
+ const { element, id, anchorNameValue } = elementWithIssues;
38
+ const anchorNames = getAnchorNames(anchorNameValue);
39
+ if (anchorNames.length > 0) {
40
+ element.style.setProperty('anchor-name', `${anchorNameValue}, --${name}-anchor-${id}`);
10
41
  }
11
- this.elements = [...newElements];
12
- for (const element of this.elements) {
13
- element.setAttribute(attrName, '');
42
+ else {
43
+ element.style.setProperty('anchor-name', `--${name}-anchor-${id}`);
14
44
  }
15
45
  }
16
- #addStylesheetToDocument() {
17
- // TODO: is this the preferred way of adding a stylesheet?
18
- const styleElement = document.createElement('style');
19
- // FIX: looks like a bad idea, the stylesheet gets multiple <br> tags
20
- styleElement.innerText = `
46
+ function removeAnchorName(elementWithIssues) {
47
+ const { element, anchorNameValue } = elementWithIssues;
48
+ const anchorNames = getAnchorNames(anchorNameValue);
49
+ if (anchorNames.length > 0) {
50
+ element.style.setProperty('anchor-name', anchorNames.join(', '));
51
+ }
52
+ else {
53
+ element.style.removeProperty('anchor-name');
54
+ }
55
+ }
56
+ function setIssues(extendedElementsWithIssues) {
57
+ for (const elementWithIssues of extendedElementsWithIssues) {
58
+ if (elementWithIssues.skipRender) {
59
+ continue;
60
+ }
61
+ elementWithIssues.element.setAttribute(attrName, elementWithIssues.id.toString());
62
+ if (supportsAnchorPositioning(window)) {
63
+ setAnchorName(elementWithIssues);
64
+ }
65
+ if (shouldInsertTriggerInsideElement(elementWithIssues.element)) {
66
+ elementWithIssues.element.insertAdjacentElement('beforeend', elementWithIssues.trigger);
67
+ }
68
+ else {
69
+ elementWithIssues.element.insertAdjacentElement('afterend', elementWithIssues.trigger);
70
+ }
71
+ if (intersectionObserver) {
72
+ intersectionObserver.observe(elementWithIssues.element);
73
+ }
74
+ }
75
+ }
76
+ function removeIssues(extendedElementsWithIssues) {
77
+ for (const elementWithIssues of extendedElementsWithIssues) {
78
+ if (elementWithIssues.skipRender) {
79
+ continue;
80
+ }
81
+ elementWithIssues.element.removeAttribute(attrName);
82
+ if (supportsAnchorPositioning(window)) {
83
+ removeAnchorName(elementWithIssues);
84
+ }
85
+ elementWithIssues.trigger.remove();
86
+ if (intersectionObserver) {
87
+ intersectionObserver.unobserve(elementWithIssues.element);
88
+ }
89
+ }
90
+ }
91
+ const stylesheet = new CSSStyleSheet();
92
+ stylesheet.replaceSync(`
93
+ @layer ${name} {
94
+ :root {
95
+ /* Ensure that the primary / secondary color combination meets WCAG 1.4.3 Contrast (Minimum) */
96
+ /* OKLCH stuff: https://oklch.com/ */
97
+ --${name}-primary-color: ${primaryColorDark};
98
+ --${name}-secondary-color: oklch(0.98 0 0);
99
+ --${name}-outline-width: 2px;
100
+ --${name}-outline-style: solid;
101
+ }
102
+
21
103
  [${attrName}]:not(:focus-visible) {
22
- outline: 2px solid red !important;
23
- outline-offset: -2px;
104
+ outline-width: var(--${name}-outline-width) !important;
105
+ outline-offset: calc(-1 * var(--${name}-outline-width)) !important;
106
+ outline-color: var(--${name}-primary-color) !important;
107
+ outline-style: var(--${name}-outline-style) !important;
24
108
  }
25
- `;
26
- document.head.appendChild(styleElement);
27
109
  }
110
+ `);
111
+ let previousExtendedElementsWithIssues = [];
112
+ let previousRootNodes = new Set();
113
+ const disposeOfStyleSheetsEffect = effect(() => {
114
+ const newRootNodes = rootNodes.value;
115
+ const addedRootNodes = [...newRootNodes].filter((rootNode) => !previousRootNodes.has(rootNode));
116
+ const removedRootNodes = [...previousRootNodes].filter((rootNode) => !newRootNodes.has(rootNode));
117
+ for (const rootNode of addedRootNodes) {
118
+ if (isDocument(rootNode) || (isDocumentFragment(rootNode) && isShadowRoot(rootNode))) {
119
+ rootNode.adoptedStyleSheets.push(stylesheet);
120
+ }
121
+ }
122
+ for (const rootNode of removedRootNodes) {
123
+ if (isDocument(rootNode) || (isDocumentFragment(rootNode) && isShadowRoot(rootNode))) {
124
+ rootNode.adoptedStyleSheets.splice(rootNode.adoptedStyleSheets.indexOf(stylesheet), 1);
125
+ }
126
+ }
127
+ previousRootNodes = newRootNodes;
128
+ });
129
+ const disposeOfElementsEffect = effect(() => {
130
+ const added = extendedElementsWithIssues.value.filter((elementWithIssues) => {
131
+ return !previousExtendedElementsWithIssues.some((previousElementWithIssues) => areElementsWithIssuesEqual(previousElementWithIssues, elementWithIssues));
132
+ });
133
+ const removed = previousExtendedElementsWithIssues.filter((previousElementWithIssues) => {
134
+ return !extendedElementsWithIssues.value.some((elementWithIssues) => areElementsWithIssuesEqual(elementWithIssues, previousElementWithIssues));
135
+ });
136
+ removeIssues(removed);
137
+ setIssues(added);
138
+ previousExtendedElementsWithIssues = [...extendedElementsWithIssues.value];
139
+ });
140
+ return () => {
141
+ disposeOfStyleSheetsEffect();
142
+ disposeOfElementsEffect();
143
+ };
28
144
  }
29
145
  //# sourceMappingURL=dom-updater.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"dom-updater.js","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"AAAA,MAAM,QAAQ,GAAG,eAAe,CAAC;AAEjC,MAAM,CAAC,OAAO,OAAO,UAAU;IAC7B,QAAQ,GAAmB,EAAE,CAAC;IAE9B;QACE,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAClC,CAAC;IAED,MAAM,CAAC,WAA2B;QAChC,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACpC,OAAO,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QACpC,CAAC;QACD,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC;QACjC,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACpC,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAED,wBAAwB;QACtB,0DAA0D;QAC1D,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACrD,qEAAqE;QACrE,YAAY,CAAC,SAAS,GAAG;SACpB,QAAQ;;;;KAIZ,CAAC;QACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAC1C,CAAC;CACF"}
1
+ {"version":3,"file":"dom-updater.js","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"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"}