accented 0.0.2 → 1.0.1

package/dist/validate-options.js

@@ -1,9 +1,91 @@
 import { allowedAxeOptions } from './types.js';
+import { isNode, isNodeList } from './utils/dom-helpers.js';
+function isSelector(contextFragment) {
+    return (typeof contextFragment === 'string' ||
+        isNode(contextFragment) ||
+        'fromShadowDom' in contextFragment);
+}
+function validateSelector(selector) {
+    if (typeof selector === 'string') {
+        return;
+    }
+    if (isNode(selector)) {
+        return;
+    }
+    if ('fromShadowDom' in selector) {
+        if (!Array.isArray(selector.fromShadowDom) ||
+            selector.fromShadowDom.length < 2 ||
+            !selector.fromShadowDom.every((item) => typeof item === 'string')) {
+            throw new TypeError(`Accented: invalid argument. \`fromShadowDom\` must be an array of strings with at least 2 elements. It’s currently set to ${selector.fromShadowDom}.`);
+        }
+        return;
+    }
+    const neverSelector = selector;
+    throw new TypeError(`Accented: invalid argument. The selector must be one of: string, Node, or an object with a \`fromShadowDom\` property. It’s currently set to ${neverSelector}.`);
+}
+function isSelectorList(contextFragment) {
+    return ((typeof contextFragment === 'object' && isNodeList(contextFragment)) ||
+        (Array.isArray(contextFragment) && contextFragment.every((item) => isSelector(item))));
+}
+function validateSelectorList(selectorList) {
+    if (isNodeList(selectorList)) {
+        return;
+    }
+    if (Array.isArray(selectorList)) {
+        for (const selector of selectorList) {
+            validateSelector(selector);
+        }
+    }
+    else {
+        const neverSelectorList = selectorList;
+        throw new TypeError(`Accented: invalid argument. The selector list must either be a NodeList or an array. It’s currently set to ${neverSelectorList}.`);
+    }
+}
+function isContextProp(contextFragment) {
+    return isSelector(contextFragment) || isSelectorList(contextFragment);
+}
+function validateContextProp(context) {
+    if (isSelector(context)) {
+        validateSelector(context);
+    }
+    else if (isSelectorList(context)) {
+        validateSelectorList(context);
+    }
+    else {
+        const neverContext = context;
+        throw new TypeError(`Accented: invalid argument. The context property must either be a selector or a selector list. It’s currently set to ${neverContext}.`);
+    }
+}
+function isContextObject(contextFragment) {
+    return (typeof contextFragment === 'object' &&
+        contextFragment !== null &&
+        ('include' in contextFragment || 'exclude' in contextFragment));
+}
+function validateContextObject(contextObject) {
+    if ('include' in contextObject && contextObject.include !== undefined) {
+        validateContextProp(contextObject.include);
+    }
+    if ('exclude' in contextObject && contextObject.exclude !== undefined) {
+        validateContextProp(contextObject.exclude);
+    }
+}
+function validateContext(context) {
+    if (isContextProp(context)) {
+        validateContextProp(context);
+    }
+    else if (isContextObject(context)) {
+        validateContextObject(context);
+    }
+    else {
+        const neverContext = context;
+        throw new TypeError(`Accented: invalid context argument. It’s currently set to ${neverContext}.`);
+    }
+}
 // The space of valid CSS and HTML names is wider than this,
 // but with Unicode it gets complicated quickly, so I'm sticking to only allowing
 // lowercase alphanumeric names that possibly contain dashes that start with a letter.
 const nameRegex = /^[a-z]([a-z0-9]|-)+$/;
-export default function validateOptions(options) {
+export function validateOptions(options) {
     if (typeof options !== 'object' || options === null) {
         throw new TypeError(`Accented: invalid argument. The options parameter must be an object if provided. It’s currently set to ${options}.`);
     }
@@ -11,7 +93,8 @@ export default function validateOptions(options) {
         if (typeof options.throttle !== 'object' || options.throttle === null) {
             throw new TypeError(`Accented: invalid argument. \`throttle\` option must be an object if provided. It’s currently set to ${options.throttle}.`);
         }
-        if (options.throttle.wait !== undefined && (typeof options.throttle.wait !== 'number' || options.throttle.wait < 0)) {
+        if (options.throttle.wait !== undefined &&
+            (typeof options.throttle.wait !== 'number' || options.throttle.wait < 0)) {
             throw new TypeError(`Accented: invalid argument. \`throttle.wait\` option must be a non-negative number if provided. It’s currently set to ${options.throttle.wait}.`);
         }
     }
@@ -26,17 +109,21 @@ export default function validateOptions(options) {
     if (options.callback !== undefined && typeof options.callback !== 'function') {
         throw new TypeError(`Accented: invalid argument. \`callback\` option must be a function if provided. It’s currently set to ${options.callback}.`);
     }
-    if (options.name !== undefined && (typeof options.name !== 'string' || !options.name.match(nameRegex))) {
+    if (options.name !== undefined &&
+        (typeof options.name !== 'string' || !options.name.match(nameRegex))) {
         throw new TypeError(`Accented: invalid argument. \`name\` option must be a string that starts with a lowercase letter and only contains lowercase alphanumeric characters and dashes. It’s currently set to ${options.name}.`);
     }
     if (options.axeOptions !== undefined) {
         if (typeof options.axeOptions !== 'object' || options.axeOptions === null) {
             throw new TypeError(`Accented: invalid argument. \`axeOptions\` option must be an object if provided. It’s currently set to ${options.axeOptions}.`);
         }
-        const unsupportedKeys = Object.keys(options.axeOptions).filter(key => !allowedAxeOptions.includes(key));
+        const unsupportedKeys = Object.keys(options.axeOptions).filter((key) => !allowedAxeOptions.includes(key));
         if (unsupportedKeys.length > 0) {
             throw new TypeError(`Accented: invalid argument. \`axeOptions\` contains the following unsupported keys: ${unsupportedKeys.join(', ')}. Valid options are: ${allowedAxeOptions.join(', ')}.`);
         }
     }
+    if (options.context !== undefined) {
+        validateContext(options.context);
+    }
 }
 //# sourceMappingURL=validate-options.js.map

package/dist/validate-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"validate-options.js","sourceRoot":"","sources":["../src/validate-options.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"validate-options.js","sourceRoot":"","sources":["../src/validate-options.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "accented",
-  "version": "0.0.2",
-  "description": "Continuous accessibility testing and issue highlighting for web development",
+  "version": "1.0.1",
+  "description": "A frontend library for continuous accessibility testing and issue highlighting",
   "type": "module",
   "main": "dist/accented.js",
   "files": [
     "dist",
-    "src"
+    "src",
+    "NOTICE"
   ],
   "repository": {
     "type": "git",
@@ -15,6 +16,7 @@
   "keywords": [
     "accessibility",
     "a11y",
+    "a11y-testing",
     "axe",
     "axe-core"
   ],
@@ -23,17 +25,23 @@
   "bugs": {
     "url": "https://github.com/pomerantsev/accented/issues"
   },
-  "homepage": "https://github.com/pomerantsev/accented#readme",
+  "homepage": "https://accented.dev",
   "dependencies": {
-    "@preact/signals-core": "^1.8.0",
-    "axe-core": "^4.10.2"
+    "@preact/signals-core": "^1.11.0",
+    "axe-core": "^4.10.3"
+  },
+  "devDependencies": {
+    "@types/jsdom": "^21.1.7",
+    "jsdom": "^26.1.0"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "pnpm copyCommon && tsc",
+    "copyCommon": "node --import tsx ./scripts/copy-common.ts",
+    "watchCommon": "node --import tsx ./scripts/watch-common.ts",
     "checkBuiltFiles": "node --import tsx ./scripts/check-built-files.ts",
     "checkImportsInBuiltFiles": "node ./dist/accented.js",
     "typecheckTests": "tsc -p ./tsconfig.test.json",
-    "watch": "tsc --watch",
+    "watch": "pnpm copyCommon && (pnpm watchCommon & tsc --watch)",
     "test": "node --test --import tsx \"./**/*.test.ts\""
   }
 }

package/src/accented.test.ts

@@ -1,8 +1,8 @@
 import assert from 'node:assert/strict';
-import {suite, test} from 'node:test';
 import type { Mock } from 'node:test';
+import { suite, test } from 'node:test';
 
-import accented from './accented.js';
+import { accented } from './accented';
 
 suite('Accented', () => {
   test('runs without errors in NodeJS and issues a warning and a trace (it’s meant to be a no-op on the server side)', (t) => {

package/src/accented.ts

@@ -1,26 +1,27 @@
-
-import registerElements from './register-elements.js';
-import createDomUpdater from './dom-updater.js';
-import createLogger from './logger.js';
-import createScanner from './scanner.js';
-import setupScrollListeners from './scroll-listeners.js';
-import setupResizeListener from './resize-listener.js';
-import setupIntersectionObserver from './intersection-observer.js';
+import { createDomUpdater } from './dom-updater.js';
+import { setupResizeListener as setupFullscreenListener } from './fullscreen-listener.js';
+import { setupIntersectionObserver } from './intersection-observer.js';
+import { logAndRethrow } from './log-and-rethrow.js';
+import { createLogger } from './logger.js';
+import { registerElements } from './register-elements.js';
+import { setupResizeListener } from './resize-listener.js';
+import { createScanner } from './scanner.js';
+import { setupScrollListeners } from './scroll-listeners.js';
 import { enabled, extendedElementsWithIssues } from './state.js';
-import deepMerge from './utils/deep-merge.js';
-import type { AccentedOptions, DisableAccented } from './types';
-import validateOptions from './validate-options.js';
-import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
-import logAndRethrow from './log-and-rethrow.js';
+import type { AccentedOptions, DisableAccented } from './types.ts';
+import { initializeContainingBlockSupportSet } from './utils/containing-blocks.js';
+import { deepMerge } from './utils/deep-merge.js';
+import { supportsAnchorPositioning } from './utils/supports-anchor-positioning.js';
+import { validateOptions } from './validate-options.js';
 
 export type { AccentedOptions, DisableAccented };
 
 /**
- * Enables highlighting of elements with accessibility issues.
+ * Enables the continuous scanning and highlighting of accessibility issues on the page.
  *
- * @param {AccentedOptions} options - The options object.
+ * @param {AccentedOptions} options - The options object (optional).
  *
- * @returns A `disable` function that can be called to stop the scanning and highlighting.
+ * @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.
  *
  * @example
  * accented();
@@ -34,30 +35,31 @@ export type { AccentedOptions, DisableAccented };
  *     wait: 500,
  *     leading: false
  *   },
- *   callback: ({ elementsWithIssues, scanDuration }) => {
- *    console.log('Elements with issues:', elementsWithIssues);
- *    console.log('Scan duration:', scanDuration);
+ *   callback: ({ elementsWithIssues, performance }) => {
+ *     console.log('Elements with issues:', elementsWithIssues);
+ *     console.log('Total blocking time:', performance.totalBlockingTime);
  *   }
  * });
  */
-export default function accented(options: AccentedOptions = {}): DisableAccented {
-
+export function accented(options: AccentedOptions = {}): DisableAccented {
   validateOptions(options);
 
   try {
     if (typeof window === 'undefined' || typeof document === 'undefined') {
-      console.warn('Accented: this script can only run in the browser, and it’s likely running on the server now. Exiting.');
+      console.warn(
+        'Accented: this script can only run in the browser, and it’s likely running on the server now. Exiting.',
+      );
       console.trace();
       return () => {};
     }
 
     const defaultOutput: Required<AccentedOptions['output']> = {
-      console: true
+      console: true,
     };
 
     const defaultThrottle: Required<AccentedOptions['throttle']> = {
       wait: 1000,
-      leading: true
+      leading: true,
     };
 
     // IMPORTANT: when changing any of the properties or values, also do the following:
@@ -66,35 +68,43 @@ export default function accented(options: AccentedOptions = {}): DisableAccented
     // * update examples in the accented() function JSDoc;
     // * update examples in the Readme.
     const defaultOptions: Required<AccentedOptions> = {
-      axeContext: document,
+      context: document,
       axeOptions: {},
       name: 'accented',
       output: defaultOutput,
       throttle: defaultThrottle,
-      callback: () => {}
+      callback: () => {},
     };
 
-    const {axeContext, axeOptions, name, output, throttle, callback} = deepMerge(defaultOptions, options);
+    const { context, axeOptions, name, output, throttle, callback } = deepMerge(
+      defaultOptions,
+      options,
+    );
 
     if (enabled.value) {
-      // Add link to the recipes section of the docs (#56).
       console.warn(
-        'You are trying to run the Accented library more than once. ' +
-        'This will likely lead to errors.'
+        'You are trying to run the Accented library more than once, which may lead to errors. See https://accented.dev/getting-started#run-once-per-page',
       );
       console.trace();
     }
 
     enabled.value = true;
 
+    initializeContainingBlockSupportSet();
     registerElements(name);
 
-    const {disconnect: cleanupIntersectionObserver, intersectionObserver } = supportsAnchorPositioning(window) ? {} : setupIntersectionObserver();
-    const cleanupScanner = createScanner(name, axeContext, axeOptions, throttle, callback);
+    const { disconnect: cleanupIntersectionObserver, intersectionObserver } =
+      setupIntersectionObserver();
+    const cleanupScanner = createScanner(name, context, axeOptions, throttle, callback);
     const cleanupDomUpdater = createDomUpdater(name, intersectionObserver);
     const cleanupLogger = output.console ? createLogger() : () => {};
-    const cleanupScrollListeners = supportsAnchorPositioning(window) ? () => {} : setupScrollListeners();
-    const cleanupResizeListener = supportsAnchorPositioning(window) ? () => {} : setupResizeListener();
+    const cleanupScrollListeners = setupScrollListeners();
+    const cleanupResizeListener = supportsAnchorPositioning(window)
+      ? () => {}
+      : setupResizeListener();
+    const cleanupFullscreenListener = supportsAnchorPositioning(window)
+      ? () => {}
+      : setupFullscreenListener();
 
     return () => {
       try {
@@ -105,6 +115,7 @@ export default function accented(options: AccentedOptions = {}): DisableAccented
         cleanupLogger();
         cleanupScrollListeners();
         cleanupResizeListener();
+        cleanupFullscreenListener();
         if (cleanupIntersectionObserver) {
           cleanupIntersectionObserver();
         }

package/src/common/strings.ts

@@ -0,0 +1,2 @@
+export const description =
+  'A frontend library for continuous accessibility testing and issue highlighting';

package/src/common/tokens.ts

@@ -0,0 +1,10 @@
+export const primaryColorDark = 'oklch(0.5 0.3 0)';
+export const primaryColorLight = 'oklch(0.8 0.2 0)';
+export const colorLight = 'oklch(0.98 0 0)';
+export const colorDark = 'oklch(0.22 0 0)';
+
+/* https://systemfontstack.com/ */
+export const fontSystemSans =
+  '-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif';
+export const fontSystemMono =
+  'Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace';

package/src/constants.ts

@@ -1,2 +1,3 @@
-export const accentedUrl = 'https://www.npmjs.com/package/accented';
+export const accentedUrl = 'https://accented.dev';
 export const issuesUrl = 'https://github.com/pomerantsev/accented/issues';
+export const getAccentedElementNames = (name: string) => [`${name}-trigger`, `${name}-dialog`];

package/src/dom-updater.ts

@@ -1,20 +1,48 @@
 import { effect } from '@preact/signals-core';
-import { extendedElementsWithIssues } from './state.js';
-import type { ExtendedElementWithIssues } from './types';
-import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
+import { primaryColorDark } from './common/tokens.js';
+import { extendedElementsWithIssues, rootNodes } from './state.js';
+import type { ExtendedElementWithIssues } from './types.ts';
+import { areElementsWithIssuesEqual } from './utils/are-elements-with-issues-equal.js';
+import { isDocument, isDocumentFragment, isShadowRoot } from './utils/dom-helpers.js';
+import { getParent } from './utils/get-parent.js';
+import { supportsAnchorPositioning } from './utils/supports-anchor-positioning.js';
 
-export default function createDomUpdater(name: string, intersectionObserver?: IntersectionObserver) {
+const shouldInsertTriggerInsideElement = (element: Element): boolean => {
+  /**
+   * No parent means that the element is a root node,
+   * which cannot have siblings.
+   */
+  const noParent = !getParent(element);
+
+  /**
+   * Table cells get a special treatment because if a sibling to a TH or TD is inserted,
+   * it alters the table layout, no matter how that sibling is positioned.
+   * We don't want tables to look broken, so we're inserting the trigger inside the table cell.
+   */
+  const isTableCell = element.nodeName === 'TH' || element.nodeName === 'TD';
+
+  /**
+   * We want to put the trigger inside the <summary> element,
+   * because otherwise it will be hidden by the browser when the <details> element is collapsed
+   * (since none of the siblings of <summary> are visible then).
+   */
+  const isSummary = element.nodeName === 'SUMMARY';
+
+  return noParent || isTableCell || isSummary;
+};
+
+export function createDomUpdater(name: string, intersectionObserver?: IntersectionObserver) {
   const attrName = `data-${name}`;
 
-  function getAnchorNames (anchorNameValue: string) {
+  function getAnchorNames(anchorNameValue: string) {
     return anchorNameValue
       .split(',')
-      .map(anchorName => anchorName.trim())
-      .filter(anchorName => anchorName.startsWith('--'));
+      .map((anchorName) => anchorName.trim())
+      .filter((anchorName) => anchorName.startsWith('--'));
   }
 
-  function setAnchorName (element: HTMLElement, id: number) {
-    const anchorNameValue = element.style.getPropertyValue('anchor-name') || window.getComputedStyle(element).getPropertyValue('anchor-name');
+  function setAnchorName(elementWithIssues: ExtendedElementWithIssues) {
+    const { element, id, anchorNameValue } = elementWithIssues;
     const anchorNames = getAnchorNames(anchorNameValue);
     if (anchorNames.length > 0) {
       element.style.setProperty('anchor-name', `${anchorNameValue}, --${name}-anchor-${id}`);
@@ -23,28 +51,30 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
     }
   }
 
-  function removeAnchorName (element: HTMLElement, id: number) {
-    const anchorNameValue = element.style.getPropertyValue('anchor-name');
+  function removeAnchorName(elementWithIssues: ExtendedElementWithIssues) {
+    const { element, anchorNameValue } = elementWithIssues;
     const anchorNames = getAnchorNames(anchorNameValue);
-    const index = anchorNames.indexOf(`--${name}-anchor-${id}`);
-    if (anchorNames.length === 1 && index === 0) {
+    if (anchorNames.length > 0) {
+      element.style.setProperty('anchor-name', anchorNames.join(', '));
+    } else {
       element.style.removeProperty('anchor-name');
-    } else if (anchorNames.length > 1 && index > -1) {
-      element.style.setProperty('anchor-name', anchorNames.filter((_, i) => i !== index).join(', '));
     }
   }
 
-  function setIssues (extendedElementsWithIssues: Array<ExtendedElementWithIssues>) {
+  function setIssues(extendedElementsWithIssues: Array<ExtendedElementWithIssues>) {
     for (const elementWithIssues of extendedElementsWithIssues) {
+      if (elementWithIssues.skipRender) {
+        continue;
+      }
       elementWithIssues.element.setAttribute(attrName, elementWithIssues.id.toString());
       if (supportsAnchorPositioning(window)) {
-        setAnchorName(elementWithIssues.element, elementWithIssues.id);
+        setAnchorName(elementWithIssues);
       }
 
-      if (elementWithIssues.element.parentElement) {
-        elementWithIssues.element.insertAdjacentElement('afterend', elementWithIssues.trigger);
-      } else {
+      if (shouldInsertTriggerInsideElement(elementWithIssues.element)) {
         elementWithIssues.element.insertAdjacentElement('beforeend', elementWithIssues.trigger);
+      } else {
+        elementWithIssues.element.insertAdjacentElement('afterend', elementWithIssues.trigger);
       }
       if (intersectionObserver) {
         intersectionObserver.observe(elementWithIssues.element);
@@ -52,11 +82,14 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
     }
   }
 
-  function removeIssues (extendedElementsWithIssues: Array<ExtendedElementWithIssues>) {
+  function removeIssues(extendedElementsWithIssues: Array<ExtendedElementWithIssues>) {
     for (const elementWithIssues of extendedElementsWithIssues) {
+      if (elementWithIssues.skipRender) {
+        continue;
+      }
       elementWithIssues.element.removeAttribute(attrName);
       if (supportsAnchorPositioning(window)) {
-        removeAnchorName(elementWithIssues.element, elementWithIssues.id);
+        removeAnchorName(elementWithIssues);
       }
       elementWithIssues.trigger.remove();
       if (intersectionObserver) {
@@ -69,8 +102,10 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
   stylesheet.replaceSync(`
     @layer ${name} {
       :root {
-        --${name}-primary-color: red;
-        --${name}-secondary-color: white;
+        /* Ensure that the primary / secondary color combination meets WCAG 1.4.3 Contrast (Minimum) */
+        /* OKLCH stuff: https://oklch.com/ */
+        --${name}-primary-color: ${primaryColorDark};
+        --${name}-secondary-color: oklch(0.98 0 0);
         --${name}-outline-width: 2px;
         --${name}-outline-style: solid;
       }
@@ -86,19 +121,37 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
 
   let previousExtendedElementsWithIssues: Array<ExtendedElementWithIssues> = [];
 
-  document.adoptedStyleSheets.push(stylesheet);
-  const removeStylesheet = () => {
-    if (document.adoptedStyleSheets.includes(stylesheet)) {
-      document.adoptedStyleSheets.splice(document.adoptedStyleSheets.indexOf(stylesheet), 1);
+  let previousRootNodes: Set<Node> = new Set();
+
+  const disposeOfStyleSheetsEffect = effect(() => {
+    const newRootNodes = rootNodes.value;
+    const addedRootNodes = [...newRootNodes].filter((rootNode) => !previousRootNodes.has(rootNode));
+    const removedRootNodes = [...previousRootNodes].filter(
+      (rootNode) => !newRootNodes.has(rootNode),
+    );
+    for (const rootNode of addedRootNodes) {
+      if (isDocument(rootNode) || (isDocumentFragment(rootNode) && isShadowRoot(rootNode))) {
+        rootNode.adoptedStyleSheets.push(stylesheet);
+      }
     }
-  };
+    for (const rootNode of removedRootNodes) {
+      if (isDocument(rootNode) || (isDocumentFragment(rootNode) && isShadowRoot(rootNode))) {
+        rootNode.adoptedStyleSheets.splice(rootNode.adoptedStyleSheets.indexOf(stylesheet), 1);
+      }
+    }
+    previousRootNodes = newRootNodes;
+  });
 
   const disposeOfElementsEffect = effect(() => {
-    const added = extendedElementsWithIssues.value.filter(elementWithIssues => {
-      return !previousExtendedElementsWithIssues.some(previousElementWithIssues => previousElementWithIssues.element === elementWithIssues.element);
+    const added = extendedElementsWithIssues.value.filter((elementWithIssues) => {
+      return !previousExtendedElementsWithIssues.some((previousElementWithIssues) =>
+        areElementsWithIssuesEqual(previousElementWithIssues, elementWithIssues),
+      );
     });
-    const removed = previousExtendedElementsWithIssues.filter(previousElementWithIssues => {
-      return !extendedElementsWithIssues.value.some(elementWithIssues => elementWithIssues.element === previousElementWithIssues.element);
+    const removed = previousExtendedElementsWithIssues.filter((previousElementWithIssues) => {
+      return !extendedElementsWithIssues.value.some((elementWithIssues) =>
+        areElementsWithIssuesEqual(elementWithIssues, previousElementWithIssues),
+      );
     });
     removeIssues(removed);
     setIssues(added);
@@ -106,7 +159,7 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
   });
 
   return () => {
-    removeStylesheet();
+    disposeOfStyleSheetsEffect();
     disposeOfElementsEffect();
   };
 }