accented 0.0.0-20250223121749 → 0.0.0-20250404114312

package/dist/utils/transform-violations.js.map

@@ -1 +1 @@
-{"version":3,"file":"transform-violations.js","sourceRoot":"","sources":["../../src/utils/transform-violations.ts"],"names":[],"mappings":"AAGA,SAAS,aAAa,CAAC,CAAc,EAAE,CAAc;IACnD,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;IACvE,OAAO,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,UAAwC;IAClF,MAAM,kBAAkB,GAA6B,EAAE,CAAC;IAExD,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;QACnC,KAAK,MAAM,IAAI,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;YACnC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;YAEjC,4EAA4E;YAC5E,8EAA8E;YAC9E,2CAA2C;YAC3C,mGAAmG;YACnG,yEAAyE;YACzE,sHAAsH;YACtH,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;YAErC,kHAAkH;YAClH,kEAAkE;YAClE,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;YAE/C,IAAI,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,aAAa,EAAE,CAAC;gBAC7C,MAAM,KAAK,GAAU;oBACnB,EAAE,EAAE,SAAS,CAAC,EAAE;oBAChB,KAAK,EAAE,SAAS,CAAC,IAAI;oBACrB,WAAW,EAAE,IAAI,CAAC,cAAc,IAAI,SAAS,CAAC,WAAW;oBACzD,GAAG,EAAE,SAAS,CAAC,OAAO;oBACtB,MAAM,EAAE,SAAS,CAAC,MAAM,IAAI,IAAI;iBACjC,CAAC;gBACF,MAAM,oBAAoB,GAAG,kBAAkB,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,CAAC,iBAAiB,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC;gBACtH,IAAI,oBAAoB,KAAK,CAAC,CAAC,EAAE,CAAC;oBAChC,kBAAkB,CAAC,IAAI,CAAC;wBACtB,OAAO;wBACP,MAAM,EAAE,CAAC,KAAK,CAAC;qBAChB,CAAC,CAAC;gBACL,CAAC;qBAAM,CAAC;oBACN,kBAAkB,CAAC,oBAAoB,CAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC/D,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,KAAK,MAAM,iBAAiB,IAAI,kBAAkB,EAAE,CAAC;QACnD,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACrC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACxE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,kBAAkB,CAAC;AAC5B,CAAC"}
+{"version":3,"file":"transform-violations.js","sourceRoot":"","sources":["../../src/utils/transform-violations.ts"],"names":[],"mappings":"AAGA,oFAAoF;AACpF,2FAA2F;AAC3F,MAAM,oCAAoC,GAAG;IAC3C,mBAAmB;IACnB,WAAW;IACX,iBAAiB;IACjB,6BAA6B;IAC7B,MAAM;IACN,oBAAoB;IACpB,6BAA6B,CAAC,oFAAoF;CACnH,CAAC;AAEF,SAAS,qBAAqB,CAAC,WAAmB,EAAE,OAAoB,EAAE,IAAY;IACpF,OAAO,oCAAoC,CAAC,QAAQ,CAAC,WAAW,CAAC;WAC5D,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,UAAU,CAAC,CAAC,CAAC;AACzD,CAAC;AAED,SAAS,aAAa,CAAC,CAAc,EAAE,CAAc;IACnD,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;IACvE,OAAO,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,UAAwC,EAAE,IAAY;IAChG,MAAM,kBAAkB,GAA6B,EAAE,CAAC;IAExD,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;QACnC,KAAK,MAAM,IAAI,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;YACnC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;YAEjC,4EAA4E;YAC5E,8EAA8E;YAC9E,2CAA2C;YAC3C,mGAAmG;YACnG,yEAAyE;YACzE,sHAAsH;YACtH,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;YAErC,IAAI,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC;gBAClF,MAAM,KAAK,GAAU;oBACnB,EAAE,EAAE,SAAS,CAAC,EAAE;oBAChB,KAAK,EAAE,SAAS,CAAC,IAAI;oBACrB,WAAW,EAAE,IAAI,CAAC,cAAc,IAAI,SAAS,CAAC,WAAW;oBACzD,GAAG,EAAE,SAAS,CAAC,OAAO;oBACtB,MAAM,EAAE,SAAS,CAAC,MAAM,IAAI,IAAI;iBACjC,CAAC;gBACF,MAAM,oBAAoB,GAAG,kBAAkB,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,CAAC,iBAAiB,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC;gBACtH,IAAI,oBAAoB,KAAK,CAAC,CAAC,EAAE,CAAC;oBAChC,kBAAkB,CAAC,IAAI,CAAC;wBACtB,OAAO;wBACP,QAAQ,EAAE,OAAO,CAAC,WAAW,EAAE;wBAC/B,MAAM,EAAE,CAAC,KAAK,CAAC;qBAChB,CAAC,CAAC;gBACL,CAAC;qBAAM,CAAC;oBACN,kBAAkB,CAAC,oBAAoB,CAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC/D,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,KAAK,MAAM,iBAAiB,IAAI,kBAAkB,EAAE,CAAC;QACnD,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACrC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACxE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,kBAAkB,CAAC;AAC5B,CAAC"}

package/dist/utils/update-elements-with-issues.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"update-elements-with-issues.d.ts","sourceRoot":"","sources":["../../src/utils/update-elements-with-issues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAW1D,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,0BAA0B,EAAE,MAAM,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,UAAU,CAAC,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG;IAAE,GAAG,EAAE,OAAO,GAAG,CAAA;CAAE,EAAE,IAAI,EAAE,MAAM,QA4D/M"}
+{"version":3,"file":"update-elements-with-issues.d.ts","sourceRoot":"","sources":["../../src/utils/update-elements-with-issues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAY1D,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,0BAA0B,EAAE,MAAM,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,UAAU,CAAC,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG;IAAE,GAAG,EAAE,OAAO,GAAG,CAAA;CAAE,EAAE,IAAI,EAAE,MAAM,QAgE/M"}

package/dist/utils/update-elements-with-issues.js

@@ -1,29 +1,30 @@
 import { batch, signal } from '@preact/signals-core';
 import transformViolations from './transform-violations.js';
+import areElementsWithIssuesEqual from './are-elements-with-issues-equal.js';
 import areIssueSetsEqual from './are-issue-sets-equal.js';
 import getElementPosition from './get-element-position.js';
 import getScrollableAncestors from './get-scrollable-ancestors.js';
 import supportsAnchorPositioning from './supports-anchor-positioning.js';
 let count = 0;
 export default function updateElementsWithIssues(extendedElementsWithIssues, violations, win, name) {
-    const updatedElementsWithIssues = transformViolations(violations);
+    const updatedElementsWithIssues = transformViolations(violations, name);
     batch(() => {
         for (const updatedElementWithIssues of updatedElementsWithIssues) {
-            const existingElementIndex = extendedElementsWithIssues.value.findIndex(extendedElementWithIssues => extendedElementWithIssues.element === updatedElementWithIssues.element);
+            const existingElementIndex = extendedElementsWithIssues.value.findIndex(extendedElementWithIssues => areElementsWithIssuesEqual(extendedElementWithIssues, updatedElementWithIssues));
             if (existingElementIndex > -1 && extendedElementsWithIssues.value[existingElementIndex] && !areIssueSetsEqual(extendedElementsWithIssues.value[existingElementIndex].issues.value, updatedElementWithIssues.issues)) {
                 extendedElementsWithIssues.value[existingElementIndex].issues.value = updatedElementWithIssues.issues;
             }
         }
         const addedElementsWithIssues = updatedElementsWithIssues.filter(updatedElementWithIssues => {
-            return !extendedElementsWithIssues.value.some(extendedElementWithIssues => extendedElementWithIssues.element === updatedElementWithIssues.element);
+            return !extendedElementsWithIssues.value.some(extendedElementWithIssues => areElementsWithIssuesEqual(extendedElementWithIssues, updatedElementWithIssues));
         });
         const removedElementsWithIssues = extendedElementsWithIssues.value.filter(extendedElementWithIssues => {
-            return !updatedElementsWithIssues.some(updatedElementWithIssues => updatedElementWithIssues.element === extendedElementWithIssues.element);
+            return !updatedElementsWithIssues.some(updatedElementWithIssues => areElementsWithIssuesEqual(updatedElementWithIssues, extendedElementWithIssues));
         });
         if (addedElementsWithIssues.length > 0 || removedElementsWithIssues.length > 0) {
             extendedElementsWithIssues.value = [...extendedElementsWithIssues.value]
                 .filter(extendedElementWithIssues => {
-                return !removedElementsWithIssues.some(removedElementWithIssues => removedElementWithIssues.element === extendedElementWithIssues.element);
+                return !removedElementsWithIssues.some(removedElementWithIssues => areElementsWithIssuesEqual(removedElementWithIssues, extendedElementWithIssues));
             })
                 .concat(addedElementsWithIssues
                 .filter(addedElementWithIssues => addedElementWithIssues.element.isConnected)
@@ -51,9 +52,12 @@ export default function updateElementsWithIssues(extendedElementsWithIssues, vio
                 return {
                     id,
                     element: addedElementWithIssues.element,
+                    rootNode: addedElementWithIssues.rootNode,
                     visible: trigger.visible,
                     position: trigger.position,
                     scrollableAncestors: signal(scrollableAncestors),
+                    anchorNameValue: addedElementWithIssues.element.style.getPropertyValue('anchor-name')
+                        || win.getComputedStyle(addedElementWithIssues.element).getPropertyValue('anchor-name'),
                     trigger,
                     issues
                 };

package/dist/utils/update-elements-with-issues.js.map

@@ -1 +1 @@
-{"version":3,"file":"update-elements-with-issues.js","sourceRoot":"","sources":["../../src/utils/update-elements-with-issues.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"update-elements-with-issues.js","sourceRoot":"","sources":["../../src/utils/update-elements-with-issues.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,mBAAmB,MAAM,2BAA2B,CAAC;AAC5D,OAAO,0BAA0B,MAAM,qCAAqC,CAAC;AAC7E,OAAO,iBAAiB,MAAM,2BAA2B,CAAC;AAG1D,OAAO,kBAAkB,MAAM,2BAA2B,CAAC;AAC3D,OAAO,sBAAsB,MAAM,+BAA+B,CAAC;AACnE,OAAO,yBAAyB,MAAM,kCAAkC,CAAC;AAEzE,IAAI,KAAK,GAAG,CAAC,CAAC;AAEd,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,0BAAoE,EAAE,UAAwC,EAAE,GAAiC,EAAE,IAAY;IAC9M,MAAM,yBAAyB,GAAG,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IAExE,KAAK,CAAC,GAAG,EAAE;QACT,KAAK,MAAM,wBAAwB,IAAI,yBAAyB,EAAE,CAAC;YACjE,MAAM,oBAAoB,GAAG,0BAA0B,CAAC,KAAK,CAAC,SAAS,CAAC,yBAAyB,CAAC,EAAE,CAAC,0BAA0B,CAAC,yBAAyB,EAAE,wBAAwB,CAAC,CAAC,CAAC;YACtL,IAAI,oBAAoB,GAAG,CAAC,CAAC,IAAI,0BAA0B,CAAC,KAAK,CAAC,oBAAoB,CAAC,IAAI,CAAC,iBAAiB,CAAC,0BAA0B,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,wBAAwB,CAAC,MAAM,CAAC,EAAE,CAAC;gBACpN,0BAA0B,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,wBAAwB,CAAC,MAAM,CAAC;YACxG,CAAC;QACH,CAAC;QAED,MAAM,uBAAuB,GAAG,yBAAyB,CAAC,MAAM,CAAC,wBAAwB,CAAC,EAAE;YAC1F,OAAO,CAAC,0BAA0B,CAAC,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC,EAAE,CAAC,0BAA0B,CAAC,yBAAyB,EAAE,wBAAwB,CAAC,CAAC,CAAC;QAC9J,CAAC,CAAC,CAAC;QAEH,MAAM,yBAAyB,GAAG,0BAA0B,CAAC,KAAK,CAAC,MAAM,CAAC,yBAAyB,CAAC,EAAE;YACpG,OAAO,CAAC,yBAAyB,CAAC,IAAI,CAAC,wBAAwB,CAAC,EAAE,CAAC,0BAA0B,CAAC,wBAAwB,EAAE,yBAAyB,CAAC,CAAC,CAAC;QACtJ,CAAC,CAAC,CAAC;QAEH,IAAI,uBAAuB,CAAC,MAAM,GAAG,CAAC,IAAI,yBAAyB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC/E,0BAA0B,CAAC,KAAK,GAAG,CAAC,GAAG,0BAA0B,CAAC,KAAK,CAAC;iBACrE,MAAM,CAAC,yBAAyB,CAAC,EAAE;gBAClC,OAAO,CAAC,yBAAyB,CAAC,IAAI,CAAC,wBAAwB,CAAC,EAAE,CAAC,0BAA0B,CAAC,wBAAwB,EAAE,yBAAyB,CAAC,CAAC,CAAC;YACtJ,CAAC,CAAC;iBACD,MAAM,CAAC,uBAAuB;iBAC5B,MAAM,CAAC,sBAAsB,CAAC,EAAE,CAAC,sBAAsB,CAAC,OAAO,CAAC,WAAW,CAAC;iBAC5E,GAAG,CAAC,sBAAsB,CAAC,EAAE;gBAC5B,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;gBACnB,MAAM,OAAO,GAAG,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,IAAI,UAAU,CAAoB,CAAC;gBACjF,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;gBAChG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC;oBAC1B,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,WAAW,CAAC,CAAC;gBACpF,CAAC;gBACD,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,KAAK,IAAI,WAAW,EAAE,EAAE,EAAE,WAAW,CAAC,CAAC;gBACpF,OAAO,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC;gBACnC,MAAM,cAAc,GAAG,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,IAAI,SAAS,CAAmB,CAAC;gBACtF,OAAO,CAAC,MAAM,GAAG,cAAc,CAAC;gBAChC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,sBAAsB,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;gBACzE,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;gBACpC,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;gBAC/B,OAAO,CAAC,OAAO,GAAG,sBAAsB,CAAC,OAAO,CAAC;gBACjD,MAAM,mBAAmB,GAAG,yBAAyB,CAAC,GAAG,CAAC,CAAC,CAAC;oBAC1D,IAAI,GAAG,EAAe,CAAC,CAAC;oBACxB,sBAAsB,CAAC,sBAAsB,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;gBAC9D,MAAM,MAAM,GAAG,MAAM,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC;gBACrD,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC;gBAC/B,cAAc,CAAC,OAAO,GAAG,sBAAsB,CAAC,OAAO,CAAC;gBACxD,OAAO;oBACL,EAAE;oBACF,OAAO,EAAE,sBAAsB,CAAC,OAAO;oBACvC,QAAQ,EAAE,sBAAsB,CAAC,QAAQ;oBACzC,OAAO,EAAE,OAAO,CAAC,OAAO;oBACxB,QAAQ,EAAE,OAAO,CAAC,QAAQ;oBAC1B,mBAAmB,EAAE,MAAM,CAAC,mBAAmB,CAAC;oBAChD,eAAe,EACb,sBAAsB,CAAC,OAAO,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;2BACjE,GAAG,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,aAAa,CAAC;oBACzF,OAAO;oBACP,MAAM;iBACP,CAAC;YACJ,CAAC,CAAC,CACH,CAAC;QACN,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "accented",
-  "version": "0.0.0-20250223121749",
+  "version": "0.0.0-20250404114312",
   "description": "Continuous accessibility testing and issue highlighting for web development",
   "type": "module",
   "main": "dist/accented.js",
   "files": [
     "dist",
-    "src"
+    "src",
+    "NOTICE"
   ],
   "repository": {
     "type": "git",
@@ -19,7 +20,7 @@
     "axe-core"
   ],
   "author": "Pavel Pomerantsev",
-  "license": "MIT",
+  "license": "MIT AND MPL-2.0",
   "bugs": {
     "url": "https://github.com/pomerantsev/accented/issues"
   },

package/src/accented.ts

@@ -5,6 +5,7 @@ import createLogger from './logger.js';
 import createScanner from './scanner.js';
 import setupScrollListeners from './scroll-listeners.js';
 import setupResizeListener from './resize-listener.js';
+import setupFullscreenListener from './fullscreen-listener.js';
 import setupIntersectionObserver from './intersection-observer.js';
 import { enabled, extendedElementsWithIssues } from './state.js';
 import deepMerge from './utils/deep-merge.js';
@@ -34,9 +35,9 @@ export type { AccentedOptions, DisableAccented };
  *     wait: 500,
  *     leading: false
  *   },
- *   callback: ({ elementsWithIssues, scanDuration }) => {
+ *   callback: ({ elementsWithIssues, performance }) => {
  *    console.log('Elements with issues:', elementsWithIssues);
- *    console.log('Scan duration:', scanDuration);
+ *    console.log('Total blocking time:', performance.totalBlockingTime);
  *   }
  * });
  */
@@ -95,6 +96,7 @@ export default function accented(options: AccentedOptions = {}): DisableAccented
     const cleanupLogger = output.console ? createLogger() : () => {};
     const cleanupScrollListeners = supportsAnchorPositioning(window) ? () => {} : setupScrollListeners();
     const cleanupResizeListener = supportsAnchorPositioning(window) ? () => {} : setupResizeListener();
+    const cleanupFullscreenListener = supportsAnchorPositioning(window) ? () => {} : setupFullscreenListener();
 
     return () => {
       try {
@@ -105,6 +107,7 @@ export default function accented(options: AccentedOptions = {}): DisableAccented
         cleanupLogger();
         cleanupScrollListeners();
         cleanupResizeListener();
+        cleanupFullscreenListener();
         if (cleanupIntersectionObserver) {
           cleanupIntersectionObserver();
         }

package/src/constants.ts

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

package/src/dom-updater.ts

@@ -1,7 +1,10 @@
 import { effect } from '@preact/signals-core';
-import { extendedElementsWithIssues } from './state.js';
+import { extendedElementsWithIssues, rootNodes } from './state.js';
 import type { ExtendedElementWithIssues } from './types';
+import areElementsWithIssuesEqual from './utils/are-elements-with-issues-equal.js';
 import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
+import { isDocument, isDocumentFragment, isShadowRoot } from './utils/dom-helpers.js';
+import getParent from './utils/get-parent.js';
 
 export default function createDomUpdater(name: string, intersectionObserver?: IntersectionObserver) {
   const attrName = `data-${name}`;
@@ -13,8 +16,8 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
       .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,14 +26,13 @@ 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(', '));
     }
   }
 
@@ -38,10 +40,10 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
     for (const elementWithIssues of extendedElementsWithIssues) {
       elementWithIssues.element.setAttribute(attrName, elementWithIssues.id.toString());
       if (supportsAnchorPositioning(window)) {
-        setAnchorName(elementWithIssues.element, elementWithIssues.id);
+        setAnchorName(elementWithIssues);
       }
 
-      if (elementWithIssues.element.parentElement) {
+      if (getParent(elementWithIssues.element)) {
         elementWithIssues.element.insertAdjacentElement('afterend', elementWithIssues.trigger);
       } else {
         elementWithIssues.element.insertAdjacentElement('beforeend', elementWithIssues.trigger);
@@ -56,7 +58,7 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
     for (const elementWithIssues of extendedElementsWithIssues) {
       elementWithIssues.element.removeAttribute(attrName);
       if (supportsAnchorPositioning(window)) {
-        removeAnchorName(elementWithIssues.element, elementWithIssues.id);
+        removeAnchorName(elementWithIssues);
       }
       elementWithIssues.trigger.remove();
       if (intersectionObserver) {
@@ -69,8 +71,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: oklch(0.5 0.3 0);
+        --${name}-secondary-color: oklch(0.98 0 0);
         --${name}-outline-width: 2px;
         --${name}-outline-style: solid;
       }
@@ -86,19 +90,31 @@ 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);
+      return !previousExtendedElementsWithIssues.some(previousElementWithIssues => areElementsWithIssuesEqual(previousElementWithIssues, elementWithIssues));
     });
     const removed = previousExtendedElementsWithIssues.filter(previousElementWithIssues => {
-      return !extendedElementsWithIssues.value.some(elementWithIssues => elementWithIssues.element === previousElementWithIssues.element);
+      return !extendedElementsWithIssues.value.some(elementWithIssues => areElementsWithIssuesEqual(elementWithIssues, previousElementWithIssues));
     });
     removeIssues(removed);
     setIssues(added);
@@ -106,7 +122,7 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
   });
 
   return () => {
-    removeStylesheet();
+    disposeOfStyleSheetsEffect();
     disposeOfElementsEffect();
   };
 }

package/src/elements/accented-dialog.ts

@@ -56,20 +56,45 @@ export default () => {
     :host {
       all: initial !important;
 
-      --light-color: white;
-      --dark-color: black;
-      --focus-color: #0078d4; /* Contrasts with both white and black. */
+      /* OKLCH stuff: https://oklch.com/ */
+      --light-color: oklch(0.98 0 0);
+      --dark-color: oklch(0.22 0 0);
+
+      --background-color: light-dark(var(--light-color), var(--dark-color));
+      --text-color: light-dark(var(--dark-color), var(--light-color));
+
+      --impact-lightness: 0.80;
+      --focus-lightness: 0.45;
+      @media (prefers-color-scheme: dark) {
+        --impact-lightness: 0.45;
+        --focus-lightness: 0.80;
+      }
+
+      --blue-hue: 230;
+      --gold-hue: 90;
+      --red-hue: 0;
+
+      /* Contrasts with background. */
+      --focus-color: oklch(var(--focus-lightness) 0.25 var(--blue-hue));
+
+      --impact-chroma: 0.16;
 
-      --impact-minor-color: lightgray;
-      --impact-moderate-color: gold;
-      --impact-serious-color: #ff9e00;
-      --impact-critical-color: #f883ec;
+      --impact-moderate-hue: var(--blue-hue);
+      --impact-serious-hue: var(--gold-hue);
+      --impact-critical-hue: var(--red-hue);
+
+      --impact-minor-color: oklch(var(--impact-lightness) 0 0);
+      --impact-moderate-color: oklch(var(--impact-lightness) var(--impact-chroma) var(--impact-moderate-hue));
+      --impact-serious-color: oklch(var(--impact-lightness) var(--impact-chroma) var(--impact-serious-hue));
+      --impact-critical-color: oklch(var(--impact-lightness) var(--impact-chroma) var(--impact-critical-hue));
+
+      --base-size: max(1rem, 16px);
 
       /* Spacing and typography custom props, inspired by https://utopia.fyi (simplified). */
 
       /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,16,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
       --ratio: 1.2;
-      --step-0: 1rem;
+      --step-0: var(--base-size);
       --step-1: calc(var(--step-0) * var(--ratio));
       --step-2: calc(var(--step-1) * var(--ratio));
       --step-3: calc(var(--step-2) * var(--ratio));
@@ -77,15 +102,15 @@ export default () => {
       --step--1: calc(var(--step-0) / var(--ratio));
 
       /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,16,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
-      --space-3xs: 0.25rem;
-      --space-2xs: 0.5rem;
-      --space-xs: 0.75rem;
-      --space-s: 1rem;
-      --space-m: 1.5rem;
-      --space-l: 2rem;
-      --space-xl: 3rem;
-      --space-2xl: 4rem;
-      --space-3xl: 6rem;
+      --space-3xs: calc(0.25 * var(--base-size));
+      --space-2xs: calc(0.5 * var(--base-size));
+      --space-xs: calc(0.75 * var(--base-size));
+      --space-s: var(--base-size);
+      --space-m: calc(1.5 * var(--base-size));
+      --space-l: calc(2 * var(--base-size));
+      --space-xl: calc(3 * var(--base-size));
+      --space-2xl: calc(4 * var(--base-size));
+      --space-3xl: calc(6 * var(--base-size));
     }
 
     a[href], button {
@@ -116,12 +141,15 @@ export default () => {
       overflow-wrap: break-word;
       font-family: system-ui;
       line-height: 1.5;
-      background-color: var(--light-color);
-      color: var(--dark-color);
+      text-wrap: pretty;
+      background-color: var(--background-color);
+      color: var(--text-color);
       border: 2px solid currentColor;
       padding: var(--space-l);
       inline-size: min(90ch, calc(100% - var(--space-s)* 2));
       max-block-size: calc(100% - var(--space-s) * 2);
+
+      color-scheme: light dark;
     }
 
     #button-container {
@@ -129,8 +157,8 @@ export default () => {
     }
 
     #close {
-      background-color: var(--light-color);
-      color: var(--dark-color);
+      background-color: var(--background-color);
+      color: var(--text-color);
       border: 2px solid currentColor;
       padding-inline: var(--space-2xs);
       aspect-ratio: 1 / 1;
@@ -167,7 +195,7 @@ export default () => {
       }
 
       a {
-        font-weight: bold;
+        font-weight: 500;
       }
     }
 
@@ -260,6 +288,16 @@ export default () => {
             }
           }, { signal: this.#abortController.signal });
 
+          dialog?.addEventListener('keydown', (event) => {
+            try {
+              if (event.key === 'Escape') {
+                event.stopPropagation();
+              }
+            } catch (error) {
+              logAndRethrow(error);
+            }
+          }, { signal: this.#abortController.signal });
+
           this.#disposeOfEffect = effect(() => {
             if (this.issues) {
               const issues = this.issues.value;

package/src/elements/accented-trigger.ts

@@ -12,8 +12,6 @@ export interface AccentedTrigger extends HTMLElement {
   visible: Signal<boolean> | undefined;
 }
 
-const triggerSize = 'max(32px, 2rem)';
-
 // We want Accented to not throw an error in Node, and use static imports,
 // so we can't export `class extends HTMLElement` because HTMLElement is not available in Node.
 export default (name: string) => {
@@ -27,21 +25,37 @@ export default (name: string) => {
   template.innerHTML = `
     <style>
       :host {
+        --ratio: 1.2;
+        --base-size: max(1rem, 16px);
         position: fixed !important;
+        inset-inline-start: anchor(self-start) !important;
         inset-inline-end: anchor(self-end) !important;
         inset-block-start: anchor(self-start) !important;
+        inset-block-end: anchor(self-end) !important;
 
         position-visibility: anchors-visible !important;
 
         /* Revert potential effects of white-space: pre; set on a trigger's ancestor. */
         white-space: normal !important;
+
+        pointer-events: none !important;
       }
 
       #trigger {
+        pointer-events: auto;
+
+        position: absolute;
+        inset-block-start: 4px;
+        inset-inline-end: 4px;
+
         box-sizing: border-box;
-        font-size: 1rem;
-        inline-size: ${triggerSize};
-        block-size: ${triggerSize};
+        font-size: calc(var(--ratio) * var(--ratio) * var(--base-size));
+        inline-size: calc(2 * var(--base-size));
+        block-size: calc(2 * var(--base-size));
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         /* Make it look better in forced-colors mode. */
         border: 2px solid transparent;
@@ -49,6 +63,10 @@ export default (name: string) => {
         background-color: var(--${name}-primary-color);
         color: var(--${name}-secondary-color);
 
+        padding: 0;
+
+        border-radius: calc(0.25 * var(--base-size));
+
         outline-offset: -4px;
         outline-color: currentColor;
         outline-width: 2px;
@@ -63,7 +81,7 @@ export default (name: string) => {
         }
       }
     </style>
-    <button id="trigger" lang="en">⚠</button>
+    <button id="trigger" lang="en">!</button>
   `;
 
   return class extends HTMLElement implements AccentedTrigger {
@@ -75,6 +93,8 @@ export default (name: string) => {
 
     #disposeOfVisibilityEffect: (() => void) | undefined;
 
+    #elementMutationObserver: MutationObserver | undefined;
+
     element: Element | undefined;
 
     dialog: AccentedDialog | undefined;
@@ -104,11 +124,34 @@ export default (name: string) => {
           if (trigger && this.element) {
             trigger.ariaLabel = `Accessibility issues in ${this.element.nodeName.toLowerCase()}`;
           }
+
+          this.#setTransform();
+
+          this.#elementMutationObserver = new MutationObserver(() => {
+            try {
+              this.#setTransform();
+            } catch (error) {
+              logAndRethrow(error);
+            }
+          });
+
+          if (this.element) {
+            this.#elementMutationObserver.observe(this.element, {
+              attributes: true
+            });
+          }
+
           this.#abortController = new AbortController();
           trigger?.addEventListener('click', (event) => {
             try {
+              // event.preventDefault() ensures that if the issue is within a link,
+              // the link's default behavior (following the URL) is prevented.
               event.preventDefault();
 
+              // event.stopPropagation() ensures that if there's a click handler on the trigger's ancestor
+              // (a link, or a button, or anything else), it doesn't get triggered.
+              event.stopPropagation();
+
               // We append the dialog when the button is clicked,
               // and remove it from the DOM when the dialog is closed.
               // This gives us a performance improvement since Axe
@@ -135,12 +178,10 @@ export default (name: string) => {
             this.#disposeOfPositionEffect = effect(() => {
               if (this.position && trigger) {
                 const position = this.position.value;
-                this.style.setProperty('top', `${position.blockStartTop}px`, 'important');
-                if (position.direction === 'ltr') {
-                  this.style.setProperty('left', `calc(${position.inlineEndLeft}px - ${triggerSize})`, 'important');
-                } else if (this.position.value.direction === 'rtl') {
-                  this.style.setProperty('left', `${position.inlineEndLeft}px`, 'important');
-                }
+                this.style.setProperty('top', `${position.top}px`, 'important');
+                this.style.setProperty('left', `${position.left}px`, 'important');
+                this.style.setProperty('width', `${position.width}px`, 'important');
+                this.style.setProperty('height', `${position.height}px`, 'important');
               }
             });
 
@@ -171,9 +212,26 @@ export default (name: string) => {
           this.#disposeOfVisibilityEffect();
           this.#disposeOfVisibilityEffect = undefined;
         }
+        if (this.#elementMutationObserver) {
+          this.#elementMutationObserver.disconnect();
+        }
       } catch (error) {
         logAndRethrow(error);
       }
     }
+
+    #setTransform() {
+      // We read and write values in separate animation frames to avoid layout thrashing.
+      window.requestAnimationFrame(() => {
+        if (this.element) {
+          const transform = window.getComputedStyle(this.element).getPropertyValue('transform');
+          if (transform !== 'none') {
+            window.requestAnimationFrame(() => {
+              this.style.setProperty('transform', transform, 'important');
+            });
+          }
+        }
+      });
+    }
   };
 };

package/src/fullscreen-listener.ts

@@ -0,0 +1,17 @@
+import logAndRethrow from './log-and-rethrow.js';
+import recalculatePositions from './utils/recalculate-positions.js';
+
+export default function setupResizeListener() {
+  const abortController = new AbortController();
+  window.addEventListener('fullscreenchange', () => {
+    try {
+      recalculatePositions();
+    } catch (error) {
+      logAndRethrow(error);
+    }
+  }, { signal: abortController.signal });
+
+  return () => {
+    abortController.abort();
+  };
+};

package/src/scanner.ts

@@ -6,8 +6,9 @@ import updateElementsWithIssues from './utils/update-elements-with-issues.js';
 import recalculatePositions from './utils/recalculate-positions.js';
 import recalculateScrollableAncestors from './utils/recalculate-scrollable-ancestors.js';
 import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
-import { issuesUrl } from './constants.js';
+import { getAccentedElementNames, issuesUrl } from './constants.js';
 import logAndRethrow from './log-and-rethrow.js';
+import createShadowDOMAwareMutationObserver from './utils/shadow-dom-aware-mutation-observer.js';
 
 export default function createScanner(name: string, axeContext: AxeContext, axeOptions: AxeOptions, throttle: Required<Throttle>, callback: Callback) {
   const axeRunningWindowProp = `__${name}_axe_running__`;
@@ -22,7 +23,7 @@ export default function createScanner(name: string, axeContext: AxeContext, axeO
 
     try {
 
-      performance.mark('axe-start');
+      performance.mark('scan-start');
 
       win[axeRunningWindowProp] = true;
 
@@ -54,17 +55,27 @@ export default function createScanner(name: string, axeContext: AxeContext, axeO
       }
       win[axeRunningWindowProp] = false;
 
-      const axeMeasure = performance.measure('axe', 'axe-start');
+      const scanMeasure = performance.measure('scan', 'scan-start');
+      const scanDuration = Math.round(scanMeasure.duration);
 
       if (!enabled.value) {
         return;
       }
 
+      performance.mark('dom-update-start');
+
       updateElementsWithIssues(extendedElementsWithIssues, result.violations, window, name);
 
+      const domUpdateMeasure = performance.measure('dom-update', 'dom-update-start');
+      const domUpdateDuration = Math.round(domUpdateMeasure.duration);
+
       callback({
         elementsWithIssues: elementsWithIssues.value,
-        scanDuration: Math.round(axeMeasure.duration)
+        performance: {
+          totalBlockingTime: scanDuration + domUpdateDuration,
+          scan: scanDuration,
+          domUpdate: domUpdateDuration
+        }
       });
     } catch (error) {
       win[axeRunningWindowProp] = false;
@@ -77,8 +88,8 @@ export default function createScanner(name: string, axeContext: AxeContext, axeO
   // if that's an element or array of elements (not a selector).
   taskQueue.add(document);
 
-  const accentedElementNames = [`${name}-trigger`, `${name}-dialog`];
-  const mutationObserver = new MutationObserver(mutationList => {
+  const accentedElementNames = getAccentedElementNames(name);
+  const mutationObserver = createShadowDOMAwareMutationObserver(name, mutationList => {
     try {
       // We're not interested in mutations that are caused exclusively by the custom elements
       // introduced by Accented.