accented 0.0.0-20250303013509 → 0.0.0-20250424114613

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

@@ -8,7 +8,7 @@ import updateElementsWithIssues from './update-elements-with-issues';
 import type { AxeResults, ImpactValue } from 'axe-core';
 import type { AccentedTrigger } from '../elements/accented-trigger';
 type Violation = AxeResults['violations'][number];
-type Node = Violation['nodes'][number];
+type AxeNode = Violation['nodes'][number];
 
 const win: Window & { CSS: typeof CSS } = {
   document: {
@@ -18,12 +18,14 @@ const win: Window & { CSS: typeof CSS } = {
         setProperty: () => {}
       },
       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: {
@@ -33,12 +35,26 @@ const win: Window & { CSS: typeof CSS } = {
 
 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;
 
@@ -61,17 +77,17 @@ const commonNodeProps = {
   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,
 };
@@ -130,29 +146,46 @@ const issue3: Issue = {
   ...commonIssueProps
 };
 
+const scanContext = {
+  include: [win.document],
+  exclude: []
+}
+
 suite('updateElementsWithIssues', () => {
   test('no changes', () => {
     const extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>> = signal([
       {
         id: 1,
         element: element1,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         issues: signal([issue1])
       },
       {
         id: 2,
         element: element2,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         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);
@@ -165,23 +198,35 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         issues: signal([issue1])
       },
       {
         id: 2,
         element: element2,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         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);
@@ -194,23 +239,35 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         issues: signal([issue1])
       },
       {
         id: 2,
         element: element2,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         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);
@@ -223,14 +280,23 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         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);
@@ -243,14 +309,23 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         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);
   });
@@ -260,23 +335,35 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         issues: signal([issue1])
       },
       {
         id: 2,
         element: element2,
+        rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         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);

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

@@ -1,40 +1,79 @@
 import type { AxeResults } from 'axe-core';
 import type { Signal } from '@preact/signals-core';
 import { batch, signal } from '@preact/signals-core';
-import type { ExtendedElementWithIssues } from '../types';
+import type { ExtendedElementWithIssues, ScanContext } from '../types';
 import transformViolations from './transform-violations.js';
+import areElementsWithIssuesEqual from './are-elements-with-issues-equal.js';
 import areIssueSetsEqual from './are-issue-sets-equal.js';
+import isNodeInScanContext from './is-node-in-scan-context.js';
 import type { AccentedTrigger } from '../elements/accented-trigger';
 import type { AccentedDialog } from '../elements/accented-dialog';
 import getElementPosition from './get-element-position.js';
 import getScrollableAncestors from './get-scrollable-ancestors.js';
 import supportsAnchorPositioning from './supports-anchor-positioning.js';
+import { isSvgElement } from './dom-helpers.js';
+import getParent from './get-parent.js';
+
+function shouldSkipRender(element: Element): boolean {
+
+  // Skip rendering if the element is inside an SVG:
+  // https://github.com/pomerantsev/accented/issues/62
+  const parent = getParent(element);
+  const isInsideSvg = Boolean(parent && isSvgElement(parent));
+
+  // Some issues, such as meta-viewport, are on <head> descendants,
+  // but since <head> is never rendered, we don't want to output anything
+  // for those in the DOM.
+  // We're not anticipating the use of shadow DOM in <head>,
+  // so the use of .closest() should be fine.
+  const isInsideHead = element.closest('head') !== null;
+
+  return isInsideSvg || isInsideHead;
+}
 
 let count = 0;
 
-export default function updateElementsWithIssues(extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>>, violations: typeof AxeResults.violations, win: Window & { CSS: typeof CSS }, name: string) {
-  const updatedElementsWithIssues = transformViolations(violations);
+export default function updateElementsWithIssues({
+  extendedElementsWithIssues,
+  scanContext,
+  violations,
+  win,
+  name
+}: {
+  extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>>,
+  scanContext: ScanContext,
+  violations: typeof AxeResults.violations,
+  win: Window & { CSS: typeof CSS },
+  name: string
+}) {
+  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));
     });
 
+    // Only consider an element to be removed in two cases:
+    // 1. It has been removed from the DOM.
+    // 2. It is within the scan context, but not among updatedElementsWithIssues.
     const removedElementsWithIssues = extendedElementsWithIssues.value.filter(extendedElementWithIssues => {
-      return !updatedElementsWithIssues.some(updatedElementWithIssues => updatedElementWithIssues.element === extendedElementWithIssues.element);
+      const isConnected = extendedElementWithIssues.element.isConnected;
+      const hasNoMoreIssues = isNodeInScanContext(extendedElementWithIssues.element, scanContext)
+        && !updatedElementsWithIssues.some(updatedElementWithIssues => areElementsWithIssuesEqual(updatedElementWithIssues, extendedElementWithIssues));
+      return !isConnected || hasNoMoreIssues;
     });
 
     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)
@@ -62,9 +101,14 @@ export default function updateElementsWithIssues(extendedElementsWithIssues: Sig
             return {
               id,
               element: addedElementWithIssues.element,
+              skipRender: shouldSkipRender(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/src/validate-options.ts

@@ -1,5 +1,89 @@
-import type { AccentedOptions } from './types';
+import type { Selector, SelectorList, ContextProp, ContextObject, AccentedOptions, Context } from './types';
 import { allowedAxeOptions } from './types.js';
+import { isNode, isNodeList } from './utils/dom-helpers.js';
+
+function isSelector(contextFragment: Context): contextFragment is Selector {
+  return typeof contextFragment === 'string'
+    || isNode(contextFragment)
+    || 'fromShadowDom' in contextFragment;
+}
+
+function validateSelector(selector: Selector) {
+  if (typeof selector === 'string') {
+    return;
+  } else if (isNode(selector)) {
+    return;
+  } else 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;
+  } else {
+    const neverSelector: never = 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: Context): contextFragment is SelectorList {
+  return (typeof contextFragment === 'object' && isNodeList(contextFragment))
+    || (Array.isArray(contextFragment) && contextFragment.every(item => isSelector(item)));
+}
+
+function validateSelectorList(selectorList: SelectorList) {
+  if (isNodeList(selectorList)) {
+    return;
+  } else if (Array.isArray(selectorList)) {
+    for (const selector of selectorList) {
+      validateSelector(selector);
+    }
+  } else {
+    const neverSelectorList: never = 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: Context): contextFragment is ContextProp {
+  return isSelector(contextFragment) || isSelectorList(contextFragment);
+}
+
+function validateContextProp(context: Selector | SelectorList) {
+  if (isSelector(context)) {
+    validateSelector(context);
+  } else if (isSelectorList(context)) {
+    validateSelectorList(context);
+  } else {
+    const neverContext: never = 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: Context): contextFragment is ContextObject {
+  return typeof contextFragment === 'object' && contextFragment !== null
+    && ('include' in contextFragment || 'exclude' in contextFragment);
+}
+
+function validateContextObject(contextObject: ContextObject) {
+  if ('include' in contextObject) {
+    validateContextProp(contextObject.include!);
+  }
+  if ('exclude' in contextObject) {
+    validateContextProp(contextObject.exclude!);
+  }
+}
+
+function validateContext(context: Context) {
+  if (isContextProp(context)) {
+    validateContextProp(context);
+  } else if (isContextObject(context)) {
+    validateContextObject(context);
+  } else {
+    const neverContext: never = 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
@@ -41,4 +125,7 @@ export default function validateOptions(options: AccentedOptions) {
       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);
+  }
 }

package/dist/utils/is-html-element.d.ts

@@ -1,2 +0,0 @@
-export default function isHtmlElement(element: Element): element is HTMLElement;
-//# sourceMappingURL=is-html-element.d.ts.map

package/dist/utils/is-html-element.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"is-html-element.d.ts","sourceRoot":"","sources":["../../src/utils/is-html-element.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,WAAW,CAK9E"}

package/dist/utils/is-html-element.js

@@ -1,7 +0,0 @@
-export default function isHtmlElement(element) {
-    // We can't use instanceof because it may not work across contexts
-    // (such as when an element is moved from an iframe).
-    // This heuristic seems to be the most robust and fastest that I could think of.
-    return element.constructor.name.startsWith('HTML');
-}
-//# sourceMappingURL=is-html-element.js.map

package/dist/utils/is-html-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"is-html-element.js","sourceRoot":"","sources":["../../src/utils/is-html-element.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,OAAgB;IACpD,kEAAkE;IAClE,qDAAqD;IACrD,gFAAgF;IAChF,OAAO,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;AACrD,CAAC"}

package/src/utils/is-html-element.ts

@@ -1,6 +0,0 @@
-export default function isHtmlElement(element: Element): element is HTMLElement {
-  // We can't use instanceof because it may not work across contexts
-  // (such as when an element is moved from an iframe).
-  // This heuristic seems to be the most robust and fastest that I could think of.
-  return element.constructor.name.startsWith('HTML');
-}