accented 0.0.2 → 1.0.1

package/src/utils/supports-anchor-positioning.ts

@@ -1,7 +1,23 @@
 type WindowWithCSS = Window & {
-  CSS: typeof CSS
+  CSS: typeof CSS;
+};
+
+/**
+ * We have to do browser sniffing now and explicitly turn off Anchor positioning in Safari
+ * since anchor positioning is not working correctly in Safari 26 Technology Preview.
+ */
+function isWebKit(win: Window) {
+  const ua = win.navigator.userAgent;
+  return (/AppleWebKit/.test(ua) && !/Chrome/.test(ua)) || /\b(iPad|iPhone|iPod)\b/.test(ua);
 }
 
-export default function supportsAnchorPositioning(win: WindowWithCSS) {
-  return win.CSS.supports('anchor-name: --foo') && win.CSS.supports('position-anchor: --foo');
+// ATTENTION: sync with the implementation in end-to-end tests.
+// I didn't find a way to sync this with automatically with the implementation of supportsAnchorPositioning
+// in end-to-end tests, so it has to be synced manually.
+export function supportsAnchorPositioning(win: WindowWithCSS) {
+  return (
+    win.CSS.supports('anchor-name: --foo') &&
+    win.CSS.supports('position-anchor: --foo') &&
+    !isWebKit(win)
+  );
 }

package/src/utils/transform-violations.test.ts

@@ -1,8 +1,8 @@
 import assert from 'node:assert/strict';
-import {suite, test} from 'node:test';
-import transformViolations from './transform-violations';
-
+import { suite, test } from 'node:test';
 import type { AxeResults } from 'axe-core';
+import { transformViolations } from './transform-violations';
+
 type Violation = AxeResults['violations'][number];
 type Node = Violation['nodes'][number];
 
@@ -12,7 +12,7 @@ const commonViolationProps1: Omit<Violation, 'nodes'> = {
   helpUrl: 'http://example.com',
   description: 'description1',
   tags: [],
-  impact: 'serious'
+  impact: 'serious',
 };
 
 const commonViolationProps2: Omit<Violation, 'nodes'> = {
@@ -21,51 +21,53 @@ const commonViolationProps2: Omit<Violation, 'nodes'> = {
   helpUrl: 'http://example.com',
   description: 'description2',
   tags: [],
-  impact: 'serious'
+  impact: 'serious',
 };
 
+const getRootNode = (): Node => ({}) as Node;
+
 // @ts-expect-error element is not HTMLElement
-const element1: HTMLElement = {};
+const element1: HTMLElement = { getRootNode };
 // @ts-expect-error element is not HTMLElement
-const element2: HTMLElement = {};
+const element2: HTMLElement = { getRootNode };
 // @ts-expect-error element is not HTMLElement
-const element3: HTMLElement = {};
+const element3: HTMLElement = { getRootNode };
 
 const commonNodeProps = {
   html: '<div></div>',
   any: [],
   all: [],
-  none: []
+  none: [],
 };
 
 const node1: Node = {
   ...commonNodeProps,
   element: element1,
   target: ['div'],
-  failureSummary: 'summary1'
+  failureSummary: 'summary1',
 };
 
 const node2: Node = {
   ...commonNodeProps,
   element: element2,
   target: ['div'],
-  failureSummary: 'summary2'
+  failureSummary: 'summary2',
 };
 
 const node3: Node = {
   ...commonNodeProps,
   element: element3,
   target: ['div'],
-  failureSummary: 'summary3'
+  failureSummary: 'summary3',
 };
 
 suite('transformViolations', () => {
   test('one violation, one element', () => {
     const violation: Violation = {
       ...commonViolationProps1,
-      nodes: [node1]
+      nodes: [node1],
     };
-    const elementsWithIssues = transformViolations([violation]);
+    const elementsWithIssues = transformViolations([violation], 'accented');
     assert.equal(elementsWithIssues.length, 1);
     assert.equal(elementsWithIssues[0]?.element, element1);
     assert.equal(elementsWithIssues[0].issues.length, 1);
@@ -76,15 +78,17 @@ suite('transformViolations', () => {
   test('two violations, two elements each', () => {
     const violation1: Violation = {
       ...commonViolationProps1,
-      nodes: [node1, node2]
+      nodes: [node1, node2],
     };
     const violation2: Violation = {
       ...commonViolationProps2,
-      nodes: [node1, node3]
+      nodes: [node1, node3],
     };
-    const elementsWithIssues = transformViolations([violation1, violation2]);
+    const elementsWithIssues = transformViolations([violation1, violation2], 'accented');
     assert.equal(elementsWithIssues.length, 3);
-    const elementWithTwoIssues = elementsWithIssues.find(elementWithIssues => elementWithIssues.element === element1);
+    const elementWithTwoIssues = elementsWithIssues.find(
+      (elementWithIssues) => elementWithIssues.element === element1,
+    );
     assert.equal(elementWithTwoIssues?.issues.length, 2);
   });
 
@@ -94,14 +98,14 @@ suite('transformViolations', () => {
       element: element1,
       // A target array whose length is > 1 signifies an element in an iframe
       target: ['iframe', 'div'],
-      failureSummary: 'summary1'
+      failureSummary: 'summary1',
     };
     const violation: Violation = {
       ...commonViolationProps1,
-      nodes: [node]
+      nodes: [node],
     };
 
-    const elementsWithIssues = transformViolations([violation]);
+    const elementsWithIssues = transformViolations([violation], 'accented');
     assert.equal(elementsWithIssues.length, 0);
   });
 
@@ -111,14 +115,14 @@ suite('transformViolations', () => {
       element: element1,
       // A target that contains an array within the outer array signifies an element in shadow DOM
       target: [['div', 'div']],
-      failureSummary: 'summary1'
+      failureSummary: 'summary1',
     };
     const violation: Violation = {
       ...commonViolationProps1,
-      nodes: [node]
+      nodes: [node],
     };
 
-    const elementsWithIssues = transformViolations([violation]);
-    assert.equal(elementsWithIssues.length, 0);
+    const elementsWithIssues = transformViolations([violation], 'accented');
+    assert.equal(elementsWithIssues.length, 1);
   });
 });

package/src/utils/transform-violations.ts

@@ -1,12 +1,31 @@
 import type { AxeResults, ImpactValue } from 'axe-core';
-import type { Issue, ElementWithIssues } from '../types';
+import type { ElementWithIssues, Issue } from '../types.ts';
+
+// This is a list of axe-core violations (their ids) that may be flagged by axe-core
+// as false positives if an Accented trigger is a descendant of the element with the issue.
+const violationsAffectedByAccentedTriggers = [
+  'aria-hidden-focus',
+  'aria-text',
+  'definition-list',
+  'label-content-name-mismatch',
+  'list',
+  'nested-interactive',
+  'scrollable-region-focusable', // The Accented trigger might make the content grow such that scrolling is required.
+];
+
+function maybeCausedByAccented(violationId: string, element: HTMLElement, name: string) {
+  return (
+    violationsAffectedByAccentedTriggers.includes(violationId) &&
+    Boolean(element.querySelector(`${name}-trigger`))
+  );
+}
 
 function impactCompare(a: ImpactValue, b: ImpactValue) {
   const impactOrder = [null, 'minor', 'moderate', 'serious', 'critical'];
   return impactOrder.indexOf(a) - impactOrder.indexOf(b);
 }
 
-export default function transformViolations(violations: typeof AxeResults.violations) {
+export function transformViolations(violations: typeof AxeResults.violations, name: string) {
   const elementsWithIssues: Array<ElementWithIssues> = [];
 
   for (const violation of violations) {
@@ -21,26 +40,27 @@ export default function transformViolations(violations: typeof AxeResults.violat
       // A consumer of Accented can instead scan the iframed document by calling Accented initialization from that document.
       const isInIframe = target.length > 1;
 
-      // Highlighting elements in shadow DOM is not yet supported, see https://github.com/pomerantsev/accented/issues/25
-      // Until then, we don’t want such elements to be added to the set.
-      const isInShadowDOM = Array.isArray(target[0]);
-
-      if (element && !isInIframe && !isInShadowDOM) {
+      if (element && !isInIframe && !maybeCausedByAccented(violation.id, element, name)) {
         const issue: Issue = {
           id: violation.id,
           title: violation.help,
+          // See https://github.com/pomerantsev/accented/issues/203
           description: node.failureSummary ?? violation.description,
           url: violation.helpUrl,
-          impact: violation.impact ?? null
+          // See https://github.com/pomerantsev/accented/issues/203
+          impact: violation.impact ?? null,
         };
-        const existingElementIndex = elementsWithIssues.findIndex(elementWithIssues => elementWithIssues.element === element);
-        if (existingElementIndex === -1) {
+        const existingElement = elementsWithIssues.find(
+          (elementWithIssues) => elementWithIssues.element === element,
+        );
+        if (existingElement === undefined) {
           elementsWithIssues.push({
             element,
-            issues: [issue]
+            rootNode: element.getRootNode(),
+            issues: [issue],
           });
         } else {
-          elementsWithIssues[existingElementIndex]!.issues.push(issue);
+          existingElement.issues.push(issue);
         }
       }
     }

package/src/utils/update-elements-with-issues.test.ts

@@ -1,51 +1,72 @@
-import {suite, test} from 'node:test';
 import assert from 'node:assert/strict';
+import { suite, test } from 'node:test';
 import type { Signal } from '@preact/signals-core';
 import { signal } from '@preact/signals-core';
-import type { ExtendedElementWithIssues, Issue } from '../types';
-import updateElementsWithIssues from './update-elements-with-issues';
-
 import type { AxeResults, ImpactValue } from 'axe-core';
 import type { AccentedTrigger } from '../elements/accented-trigger';
+import type { ExtendedElementWithIssues, Issue } from '../types';
+import { updateElementsWithIssues } from './update-elements-with-issues';
+
 type Violation = AxeResults['violations'][number];
-type Node = Violation['nodes'][number];
+type AxeNode = Violation['nodes'][number];
 
 const win: Window & { CSS: typeof CSS } = {
   document: {
     // @ts-expect-error the return value is of incorrect type.
     createElement: () => ({
       style: {
-        setProperty: () => {}
+        setProperty: () => {},
       },
-      dataset: {}
-    })
+      dataset: {},
+    }),
+    contains: () => true,
   },
   // @ts-expect-error we're missing a lot of properties
   getComputedStyle: () => ({
     zIndex: '',
-    direction: 'ltr'
+    direction: 'ltr',
+    getPropertyValue: () => 'none',
   }),
   // @ts-expect-error we're missing a lot of properties
   CSS: {
-    supports: () => true
-  }
-}
+    supports: () => true,
+  },
+  // @ts-expect-error we're missing a lot of properties
+  navigator: {
+    userAgent: '',
+  },
+};
 
 const getBoundingClientRect = () => ({});
 
+const getRootNode = (): Node => ({}) as Node;
+
+const baseElement = {
+  getBoundingClientRect,
+  getRootNode,
+  style: {
+    getPropertyValue: () => '',
+  },
+  closest: () => null,
+};
+
 // @ts-expect-error element is not HTMLElement
-const element1: HTMLElement = {getBoundingClientRect, isConnected: true};
+const element1: HTMLElement = { ...baseElement, isConnected: true };
 // @ts-expect-error element is not HTMLElement
-const element2: HTMLElement = {getBoundingClientRect, isConnected: true};
+const element2: HTMLElement = { ...baseElement, isConnected: true };
 // @ts-expect-error element is not HTMLElement
-const element3: HTMLElement = {getBoundingClientRect, isConnected: false};
+const element3: HTMLElement = { ...baseElement, isConnected: false };
+
+// @ts-expect-error rootNode is not Node
+const rootNode: Node = {};
 
 const trigger = win.document.createElement('accented-trigger') as AccentedTrigger;
 
 const position = signal({
-  inlineEndLeft: 0,
-  blockStartTop: 0,
-  direction: 'ltr' as const
+  left: 0,
+  width: 100,
+  top: 0,
+  height: 100,
 });
 
 const visible = signal(true);
@@ -57,20 +78,20 @@ const commonNodeProps = {
   any: [],
   all: [],
   none: [],
-  target: ['div']
+  target: ['div'],
 };
 
-const node1: Node = {
+const node1: AxeNode = {
   ...commonNodeProps,
   element: element1,
 };
 
-const node2: Node = {
+const node2: AxeNode = {
   ...commonNodeProps,
   element: element2,
 };
 
-const node3: Node = {
+const node3: AxeNode = {
   ...commonNodeProps,
   element: element3,
 };
@@ -80,53 +101,58 @@ const commonViolationProps = {
   helpUrl: 'http://example.com',
   description: 'description',
   tags: [],
-  impact: 'serious' as ImpactValue
+  impact: 'serious' as ImpactValue,
 };
 
 const violation1: Violation = {
   ...commonViolationProps,
   id: 'id1',
-  nodes: [node1]
+  nodes: [node1],
 };
 
 const violation2: Violation = {
   ...commonViolationProps,
   id: 'id2',
-  nodes: [node2]
+  nodes: [node2],
 };
 
 const violation3: Violation = {
   ...commonViolationProps,
   id: 'id3',
-  nodes: [node2]
+  nodes: [node2],
 };
 
 const violation4: Violation = {
   ...commonViolationProps,
   id: 'id4',
-  nodes: [node3]
+  nodes: [node3],
 };
 
 const commonIssueProps = {
   title: 'help',
   description: 'description',
   url: 'http://example.com',
-  impact: 'serious'
+  impact: 'serious',
 } as const;
 
 const issue1: Issue = {
   id: 'id1',
-  ...commonIssueProps
+  ...commonIssueProps,
 };
 
 const issue2: Issue = {
   id: 'id2',
-  ...commonIssueProps
+  ...commonIssueProps,
 };
 
 const issue3: Issue = {
   id: 'id3',
-  ...commonIssueProps
+  ...commonIssueProps,
+};
+
+const scanContext = {
+  include: [win.document],
+  exclude: [],
 };
 
 suite('updateElementsWithIssues', () => {
@@ -135,23 +161,35 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
+        issues: signal([issue1]),
       },
       {
         id: 2,
         element: element2,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue2])
-      }
+        issues: signal([issue2]),
+      },
     ]);
-    updateElementsWithIssues(extendedElementsWithIssues, [violation1, violation2], win, 'accented');
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      scanContext,
+      violations: [violation1, violation2],
+      win,
+      name: 'accented',
+    });
     assert.equal(extendedElementsWithIssues.value.length, 2);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
     assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);
@@ -164,23 +202,35 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
+        issues: signal([issue1]),
       },
       {
         id: 2,
         element: element2,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue2])
-      }
+        issues: signal([issue2]),
+      },
     ]);
-    updateElementsWithIssues(extendedElementsWithIssues, [violation1, violation2, violation3], win, 'accented');
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      scanContext,
+      violations: [violation1, violation2, violation3],
+      win,
+      name: 'accented',
+    });
     assert.equal(extendedElementsWithIssues.value.length, 2);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
     assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);
@@ -193,23 +243,35 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
+        issues: signal([issue1]),
       },
       {
         id: 2,
         element: element2,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue2, issue3])
-      }
+        issues: signal([issue2, issue3]),
+      },
     ]);
-    updateElementsWithIssues(extendedElementsWithIssues, [violation1, violation2], win, 'accented');
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      scanContext,
+      violations: [violation1, violation2],
+      win,
+      name: 'accented',
+    });
     assert.equal(extendedElementsWithIssues.value.length, 2);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
     assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);
@@ -222,14 +284,23 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
-      }
+        issues: signal([issue1]),
+      },
     ]);
-    updateElementsWithIssues(extendedElementsWithIssues, [violation1, violation2], win, 'accented');
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      scanContext,
+      violations: [violation1, violation2],
+      win,
+      name: 'accented',
+    });
     assert.equal(extendedElementsWithIssues.value.length, 2);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
     assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);
@@ -242,14 +313,23 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
-      }
+        issues: signal([issue1]),
+      },
     ]);
-    updateElementsWithIssues(extendedElementsWithIssues, [violation1, violation4], win, 'accented');
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      scanContext,
+      violations: [violation1, violation4],
+      win,
+      name: 'accented',
+    });
     assert.equal(extendedElementsWithIssues.value.length, 1);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
   });
@@ -259,23 +339,35 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
+        issues: signal([issue1]),
       },
       {
         id: 2,
         element: element2,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue2])
-      }
+        issues: signal([issue2]),
+      },
     ]);
-    updateElementsWithIssues(extendedElementsWithIssues, [violation1], win, 'accented');
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      scanContext,
+      violations: [violation1],
+      win,
+      name: 'accented',
+    });
     assert.equal(extendedElementsWithIssues.value.length, 1);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
     assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);