accented 1.2.6 → 1.3.0

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":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "accented",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "description": "A frontend library for continuous accessibility testing and issue highlighting",
   "type": "module",
   "main": "dist/accented.js",
@@ -28,11 +28,11 @@
   "homepage": "https://accented.dev",
   "dependencies": {
     "@preact/signals-core": "^1.14.1",
-    "axe-core": "^4.11.2"
+    "axe-core": "^4.11.3"
   },
   "devDependencies": {
-    "@types/jsdom": "^27.0.0",
-    "jsdom": "^29.0.1"
+    "@types/jsdom": "^28.0.1",
+    "jsdom": "^29.0.2"
   },
   "scripts": {
     "build": "pnpm copyCommon && tsc",

package/src/constants.ts

@@ -5,3 +5,37 @@ export const issuesUrl = 'https://github.com/pomerantsev/accented/issues';
 export const getAccentedElementNames = (name: string) => [`${name}-trigger`, `${name}-dialog`];
 
 export const orderedImpacts: Array<Issue['impact']> = ['minor', 'moderate', 'serious', 'critical'];
+
+/**
+ * axe-core rules whose pass/fail depends on the presence or absence of specific descendants
+ * (not just direct children). When any DOM mutation occurs, these rules must be re-evaluated
+ * against the full scan context, because the mutated node may be deep inside the element
+ * that the violation is reported on — and therefore outside the limited scan context.
+ */
+export const descendantDependentRules = new Set([
+  'aria-hidden-focus',
+  'aria-required-children',
+  'aria-text',
+  'document-title',
+  'landmark-no-duplicate-banner',
+  'landmark-no-duplicate-contentinfo',
+  'landmark-no-duplicate-main',
+  'landmark-one-main',
+  'nested-interactive',
+  'page-has-heading-one',
+  'scrollable-region-focusable',
+]);
+
+/**
+ * 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.
+ */
+export const violationsAffectedByAccentedTriggers = new Set([
+  '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.
+]);

package/src/scanner.ts

@@ -1,9 +1,10 @@
 import axe from 'axe-core';
-import { getAccentedElementNames, issuesUrl } from './constants.js';
+import { descendantDependentRules, getAccentedElementNames, issuesUrl } from './constants.js';
 import { logAndRethrow } from './log-and-rethrow.js';
 import { elementsWithIssues, enabled, extendedElementsWithIssues } from './state.js';
 import { TaskQueue } from './task-queue.js';
 import type { AxeOptions, Callback, Context, Throttle } from './types.ts';
+import { getAllRulesFromAxeOptions } from './utils/get-all-rules-from-axe-options.js';
 import { getScanContext } from './utils/get-scan-context.js';
 import { recalculatePositions } from './utils/recalculate-positions.js';
 import { recalculateScrollableAncestors } from './utils/recalculate-scrollable-ancestors.js';
@@ -18,10 +19,70 @@ export function createScanner(
   throttle: Required<Throttle>,
   callback: Callback,
 ) {
+  const allRules = getAllRulesFromAxeOptions(axeOptions);
+
+  /**
+   * Rules that only look at the element itself — safe to run
+   * against only the nodes affected by the current mutation.
+   */
+  const limitedContextRules = new Set(
+    [...allRules].filter((rule) => !descendantDependentRules.has(rule)),
+  );
+
+  /**
+   * Rules whose pass/fail depends on descendants anywhere in the subtree.
+   * A mutation deep inside an element can change the outcome for the ancestor,
+   * so these must always run against the full scan context.
+   */
+  const fullContextRules = new Set(
+    [...allRules].filter((rule) => descendantDependentRules.has(rule)),
+  );
+
+  /**
+   * Options shared by both axe.run() calls. The user's runOnly and rules are
+   * consumed by getAllRulesFromAxeOptions above and replaced by explicit rule
+   * sets, so they are not forwarded here.
+   */
+  const baseAxeOptions: axe.RunOptions = {
+    /**
+     * By default, axe-core doesn't include element refs
+     * in the violations array,
+     * and we need those element refs.
+     */
+    elementRef: true,
+
+    /**
+     * Although axe-core can perform iframe scanning, I haven't succeeded in it,
+     * and the docs suggest that the axe-core script should be explicitly included
+     * in each of the iframed documents anyway.
+     * It seems preferable to disallow iframe scanning and not report issues in elements within iframes
+     * in the case that such issues are for some reason reported by axe-core.
+     * A consumer of Accented can instead scan the iframed document by calling Accented initialization from that document.
+     */
+    iframes: false,
+
+    /**
+     * The `preload` docs are not clear to me,
+     * but when it's set to `true` by default,
+     * axe-core tries to fetch cross-origin CSS,
+     * which fails in the absence of CORS headers.
+     * I'm not sure why axe-core needs to preload
+     * those resources in the first place,
+     * so disabling it seems to be the safe option.
+     */
+    preload: false,
+
+    /**
+     * We're only interested in violations,
+     * not in passes or incomplete results.
+     */
+    resultTypes: ['violations'],
+  };
+
   const axeRunningWindowProp = `__${name}_axe_running__`;
   const win = window as unknown as Record<string, boolean>;
   const taskQueue = new TaskQueue<Node>(async (nodes) => {
-    // We may see errors coming from axe-core when Accented is toggled off and on in qiuck succession,
+    // We may see errors coming from axe-core when Accented is toggled off and on in quick succession,
     // which I've seen happen with hot reloading of a React application.
     // This window property serves as a circuit breaker for that particular case.
     if (win[axeRunningWindowProp]) {
@@ -33,48 +94,32 @@ export function createScanner(
 
       win[axeRunningWindowProp] = true;
 
-      const scanContext = getScanContext(nodes, context);
+      const limitedContext = getScanContext(nodes, context);
 
-      let result: axe.AxeResults | undefined;
+      let limitedContextResult: axe.AxeResults | undefined;
+      let fullContextResult: axe.AxeResults | undefined;
 
       try {
-        result = await axe.run(scanContext, {
-          /**
-           * By default, axe-core doesn't include element refs
-           * in the violations array,
-           * and we need those element refs.
-           */
-          elementRef: true,
-
-          /**
-           * Although axe-core can perform iframe scanning, I haven't succeeded in it,
-           * and the docs suggest that the axe-core script should be explicitly included
-           * in each of the iframed documents anyway.
-           * It seems preferable to disallow iframe scanning and not report issues in elements within iframes
-           * in the case that such issues are for some reason reported by axe-core.
-           * A consumer of Accented can instead scan the iframed document by calling Accented initialization from that document.
-           */
-          iframes: false,
-
-          /**
-           * The `preload` docs are not clear to me,
-           * but when it's set to `true` by default,
-           * axe-core tries to fetch cross-origin CSS,
-           * which fails in the absence of CORS headers.
-           * I'm not sure why axe-core needs to preload
-           * those resources in the first place,
-           * so disabling it seems to be the safe option.
-           */
-          preload: false,
-
-          /**
-           * We're only interested in violations,
-           * not in passes or incomplete results.
-           */
-          resultTypes: ['violations'],
-
-          ...axeOptions,
-        });
+        // Run the scan against the limited context (only the mutated
+        // nodes, filtered to those within the user-provided context). Skip if no
+        // limited-context rules are active.
+        limitedContextResult =
+          limitedContextRules.size > 0
+            ? await axe.run(limitedContext, {
+                ...baseAxeOptions,
+                runOnly: { type: 'rule', values: [...limitedContextRules] },
+              })
+            : undefined;
+
+        // Run the supplemental scan against the full context so that ancestor-
+        // dependent rules always see the complete DOM. Skip if none are active.
+        fullContextResult =
+          fullContextRules.size > 0
+            ? await axe.run(context, {
+                ...baseAxeOptions,
+                runOnly: { type: 'rule', values: [...fullContextRules] },
+              })
+            : undefined;
       } catch (error) {
         console.error(
           `Accented: axe-core (the accessibility testing engine) threw an error. Check the \`axeOptions\` property (https://accented.dev/api#axeoptions) that you’re passing to Accented. If you still think it’s a bug in Accented, file an issue at ${issuesUrl}.\n`,
@@ -86,7 +131,7 @@ export function createScanner(
       const scanMeasure = performance.measure('scan', 'scan-start');
       const scanDuration = Math.round(scanMeasure.duration);
 
-      if (!enabled.value || !result) {
+      if (!enabled.value || (!limitedContextResult && !fullContextResult)) {
         return;
       }
 
@@ -94,8 +139,9 @@ export function createScanner(
 
       updateElementsWithIssues({
         extendedElementsWithIssues,
-        scanContext,
-        violations: result.violations,
+        limitedContext,
+        limitedContextViolations: limitedContextResult?.violations ?? [],
+        fullContextViolations: fullContextResult?.violations ?? [],
         name,
       });
 
@@ -106,7 +152,7 @@ export function createScanner(
         // Assuming that the {include, exclude} shape of the context object will be used less often
         // than other variants, we'll output just the `include` array in case nothing is excluded
         // in the scan.
-        scanContext: scanContext.exclude.length > 0 ? scanContext : scanContext.include,
+        scanContext: limitedContext.exclude.length > 0 ? limitedContext : limitedContext.include,
         elementsWithIssues: elementsWithIssues.value,
         performance: {
           totalBlockingTime: scanDuration + domUpdateDuration,

package/src/utils/create-extended-element-with-issues.ts

@@ -0,0 +1,67 @@
+import { signal } from '@preact/signals-core';
+import type { AccentedDialog } from '../elements/accented-dialog.ts';
+import type { AccentedTrigger } from '../elements/accented-trigger.ts';
+import type { ElementWithIssues, ExtendedElementWithIssues } from '../types.ts';
+import { isSvgElement } from './dom-helpers.js';
+import { getElementPosition } from './get-element-position.js';
+import { getParent } from './get-parent.js';
+import { getScrollableAncestors } from './get-scrollable-ancestors.js';
+import { supportsAnchorPositioning } from './supports-anchor-positioning.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 function createExtendedElementWithIssues(
+  elementWithIssues: ElementWithIssues,
+  name: string,
+): ExtendedElementWithIssues {
+  const id = count++;
+  const trigger = document.createElement(`${name}-trigger`) as AccentedTrigger;
+  const elementZIndex = Number.parseInt(getComputedStyle(elementWithIssues.element).zIndex, 10);
+  if (!Number.isNaN(elementZIndex)) {
+    trigger.style.setProperty('z-index', (elementZIndex + 1).toString(), 'important');
+  }
+  trigger.style.setProperty('position-anchor', `--${name}-anchor-${id}`, 'important');
+  trigger.dataset.id = id.toString();
+  const accentedDialog = document.createElement(`${name}-dialog`) as AccentedDialog;
+  trigger.dialog = accentedDialog;
+  const position = getElementPosition(elementWithIssues.element);
+  trigger.position = signal(position);
+  trigger.visible = signal(true);
+  trigger.element = elementWithIssues.element;
+  const scrollableAncestors = supportsAnchorPositioning()
+    ? new Set<HTMLElement>()
+    : getScrollableAncestors(elementWithIssues.element);
+  const issues = signal(elementWithIssues.issues);
+  accentedDialog.issues = issues;
+  accentedDialog.element = elementWithIssues.element;
+  return {
+    id,
+    element: elementWithIssues.element,
+    skipRender: shouldSkipRender(elementWithIssues.element),
+    rootNode: elementWithIssues.rootNode,
+    visible: trigger.visible,
+    position: trigger.position,
+    scrollableAncestors: signal(scrollableAncestors),
+    anchorNameValue:
+      elementWithIssues.element.style.getPropertyValue('anchor-name') ||
+      getComputedStyle(elementWithIssues.element).getPropertyValue('anchor-name'),
+    trigger,
+    issues,
+  };
+}

package/src/utils/get-all-rules-from-axe-options.test.ts

@@ -0,0 +1,169 @@
+/**
+ * The tests in this test suite have e2e counterparts in axe-options.spec.ts.
+ * If we ever change this file, we should make sure axe-options.spec.ts
+ * doesn't diverge.
+ * That way, we can be sure that our reimplementation of runOnly / rules
+ * is in sync with that in axe-core.
+ */
+
+import assert from 'node:assert/strict';
+import { suite, test } from 'node:test';
+import { getAllRulesFromAxeOptions } from './get-all-rules-from-axe-options';
+
+suite('getAllRulesFromAxeOptions', () => {
+  test('with no options, returns all rules', () => {
+    const rules = getAllRulesFromAxeOptions({});
+    assert.ok(rules.size > 90);
+    assert.ok(rules.has('page-has-heading-one'));
+    assert.ok(rules.has('color-contrast'));
+  });
+
+  test('with no options, excludes disabled-by-default rules', () => {
+    const rules = getAllRulesFromAxeOptions({});
+    // axe-core disables some rules by default
+    assert.equal(rules.has('color-contrast-enhanced'), false);
+    assert.equal(rules.has('target-size'), false);
+    assert.equal(rules.has('audio-caption'), false);
+  });
+
+  test('with runOnly type rule, returns exactly the specified rules', () => {
+    const rules = getAllRulesFromAxeOptions({
+      runOnly: { type: 'rule', values: ['color-contrast', 'button-name'] },
+    });
+    assert.equal(rules.size, 2);
+    assert.ok(rules.has('color-contrast'));
+    assert.ok(rules.has('button-name'));
+  });
+
+  test('with runOnly type rule, ignores rules.enabled: true for a rule not in runOnly', () => {
+    const rules = getAllRulesFromAxeOptions({
+      runOnly: { type: 'rule', values: ['button-name'] },
+      rules: { 'color-contrast': { enabled: true } },
+    });
+    assert.equal(rules.size, 1);
+    assert.equal(rules.has('color-contrast'), false);
+  });
+
+  test('with runOnly type rule, ignores rules.enabled: false', () => {
+    const rules = getAllRulesFromAxeOptions({
+      runOnly: { type: 'rule', values: ['color-contrast'] },
+      rules: { 'color-contrast': { enabled: false } },
+    });
+    assert.equal(rules.size, 1);
+    assert.ok(rules.has('color-contrast'));
+  });
+
+  test("with runOnly type 'rules' (plural), behaves the same as 'rule'", () => {
+    const rules = getAllRulesFromAxeOptions({
+      runOnly: { type: 'rules', values: ['button-name'] },
+      rules: { 'color-contrast': { enabled: true } },
+    });
+    assert.equal(rules.size, 1);
+    assert.ok(rules.has('button-name'));
+    assert.equal(rules.has('color-contrast'), false); // rules ignored, same as type 'rule'
+  });
+
+  test('with runOnly type tag, returns rules matching those tags', () => {
+    const rules = getAllRulesFromAxeOptions({
+      runOnly: { type: 'tag', values: ['best-practice'] },
+    });
+    assert.ok(rules.has('page-has-heading-one'));
+    assert.equal(rules.has('color-contrast'), false);
+  });
+
+  test('with runOnly type tag and multiple tags, returns rules from all specified tags', () => {
+    const rules = getAllRulesFromAxeOptions({
+      runOnly: { type: 'tag', values: ['best-practice', 'wcag2aa'] },
+    });
+    assert.ok(rules.has('page-has-heading-one'));
+    assert.ok(rules.has('color-contrast'));
+    assert.equal(rules.has('button-name'), false); // wcag2a only, not in either tag
+  });
+
+  test('with runOnly type tag, rules.enabled: false removes a matching rule', () => {
+    const rules = getAllRulesFromAxeOptions({
+      runOnly: { type: 'tag', values: ['wcag2aa'] },
+      rules: { 'color-contrast': { enabled: false } },
+    });
+    assert.ok(rules.has('meta-viewport')); // another wcag2aa rule, still included
+    assert.equal(rules.has('color-contrast'), false);
+  });
+
+  test('with runOnly type tag, rules.enabled: true adds a non-matching rule', () => {
+    const rules = getAllRulesFromAxeOptions({
+      runOnly: { type: 'tag', values: ['best-practice'] },
+      rules: { 'color-contrast': { enabled: true } },
+    });
+    assert.ok(rules.has('page-has-heading-one'));
+    assert.ok(rules.has('color-contrast'));
+    assert.equal(rules.has('button-name'), false); // not in best-practice and not explicitly enabled
+  });
+
+  test("with runOnly type 'tags' (plural), behaves the same as 'tag'", () => {
+    const rules = getAllRulesFromAxeOptions({
+      runOnly: { type: 'tags', values: ['best-practice'] },
+      rules: { 'color-contrast': { enabled: true } },
+    });
+    assert.ok(rules.has('page-has-heading-one'));
+    assert.ok(rules.has('color-contrast')); // rules applied, same as type 'tag'
+    assert.equal(rules.has('button-name'), false);
+  });
+
+  test('with no runOnly and rules overrides, still excludes disabled-by-default rules', () => {
+    const rules = getAllRulesFromAxeOptions({
+      rules: { 'color-contrast': { enabled: false }, 'button-name': { enabled: true } },
+    });
+    assert.equal(rules.has('color-contrast'), false); // explicitly disabled
+    assert.ok(rules.has('button-name')); // explicitly enabled
+    assert.equal(rules.has('color-contrast-enhanced'), false); // disabled by default, no override
+  });
+
+  test('with no runOnly, rules.enabled: false removes a rule', () => {
+    const rules = getAllRulesFromAxeOptions({
+      rules: { 'color-contrast': { enabled: false } },
+    });
+    assert.ok(rules.size > 90);
+    assert.equal(rules.has('color-contrast'), false);
+  });
+
+  test('with runOnly as a tag array shorthand, treats it as tag values', () => {
+    const rules = getAllRulesFromAxeOptions({ runOnly: ['best-practice'] });
+    assert.ok(rules.has('page-has-heading-one'));
+    assert.equal(rules.has('color-contrast'), false);
+  });
+
+  test('with runOnly as a single tag string, treats it as a tag value', () => {
+    const rules = getAllRulesFromAxeOptions({ runOnly: 'best-practice' });
+    assert.ok(rules.has('page-has-heading-one'));
+    assert.equal(rules.has('color-contrast'), false);
+  });
+
+  test('with runOnly as a rule ID string shorthand, returns that rule', () => {
+    const rules = getAllRulesFromAxeOptions({ runOnly: 'color-contrast' });
+    assert.equal(rules.size, 1);
+    assert.ok(rules.has('color-contrast'));
+  });
+
+  test('with runOnly as a rule ID array shorthand, returns exactly those rules', () => {
+    const rules = getAllRulesFromAxeOptions({ runOnly: ['color-contrast', 'button-name'] });
+    assert.equal(rules.size, 2);
+    assert.ok(rules.has('color-contrast'));
+    assert.ok(rules.has('button-name'));
+  });
+
+  test('with runOnly as a rule ID array shorthand, ignores rules overrides', () => {
+    const rules = getAllRulesFromAxeOptions({
+      runOnly: ['color-contrast', 'button-name'],
+      rules: { 'color-contrast': { enabled: false }, 'aria-label': { enabled: true } },
+    });
+    assert.equal(rules.size, 2);
+    assert.ok(rules.has('color-contrast'));
+    assert.ok(rules.has('button-name'));
+  });
+
+  test('with runOnly as a mixed shorthand array (tag + rule ID), throws', () => {
+    assert.throws(() =>
+      getAllRulesFromAxeOptions({ runOnly: ['best-practice', 'color-contrast'] }),
+    );
+  });
+});

package/src/utils/get-all-rules-from-axe-options.ts

@@ -0,0 +1,54 @@
+/* Adapts two axe-core behaviors:
+   - shorthand string/array runOnly normalization from normalizeOptions:
+     https://github.com/dequelabs/axe-core/blob/9261d074b60527a84f4dce5a64a6d5a5843a0772/lib/core/base/audit.js#L408-L428
+   - which rules to include for a given runOnly/rules combination, from ruleShouldRun (lines 65–80,
+     omitting the rule.pageLevel check — axe applies that itself when we call axe.run):
+     https://github.com/dequelabs/axe-core/blob/9261d074b60527a84f4dce5a64a6d5a5843a0772/lib/core/utils/rule-should-run.js */
+import axe from 'axe-core';
+import type { AxeOptions } from '../types.ts';
+
+function getRuleIds(tags?: Array<string>): Set<string> {
+  return new Set(axe.getRules(tags).map((r) => r.ruleId));
+}
+
+function applyOverrides(ruleSet: Set<string>, rules: AxeOptions['rules']): Set<string> {
+  if (!rules) return ruleSet;
+  for (const [ruleId, ruleConfig] of Object.entries(rules)) {
+    if (ruleConfig.enabled === false) ruleSet.delete(ruleId);
+    else if (ruleConfig.enabled === true) ruleSet.add(ruleId);
+  }
+  return ruleSet;
+}
+
+// Normalizes the string/array shorthands of runOnly into the { type, values } object form.
+function normalizeRunOnly(
+  runOnly: Exclude<AxeOptions['runOnly'], undefined>,
+  allRuleIds: Set<string>,
+): { type: string; values: string[] } {
+  if (typeof runOnly !== 'string' && !Array.isArray(runOnly)) return runOnly;
+  const values = typeof runOnly === 'string' ? [runOnly] : runOnly;
+  const isRulePath = values.every((v) => allRuleIds.has(v));
+  const isTagPath = values.every((v) => !allRuleIds.has(v));
+  if (!isRulePath && !isTagPath)
+    throw new Error(`runOnly mixes rule IDs and tag values: ${values.join(', ')}`);
+  return { type: isRulePath ? 'rule' : 'tag', values };
+}
+
+export function getAllRulesFromAxeOptions(axeOptions: AxeOptions): Set<string> {
+  const allRuleIds = getRuleIds();
+  const { rules, runOnly } = axeOptions;
+
+  if (runOnly === undefined) {
+    // axe.getRules() includes rules disabled by default; axe skips them via rule.enabled !== false.
+    // Replicate that here using the internal _audit.rules, which exposes the enabled flag.
+    // @ts-expect-error: _audit is an undocumented internal axe-core API not present in its type definitions
+    for (const rule of axe._audit.rules) {
+      if (rule.enabled === false) allRuleIds.delete(rule.id);
+    }
+    return applyOverrides(allRuleIds, rules);
+  }
+
+  const { type, values } = normalizeRunOnly(runOnly, allRuleIds);
+  if (type === 'rule' || type === 'rules') return new Set(values);
+  return applyOverrides(getRuleIds(values), rules);
+}

package/src/utils/transform-violations.ts

@@ -1,22 +1,10 @@
 import type { AxeResults } from 'axe-core';
-import { issuesUrl, orderedImpacts } from '../constants.js';
+import { issuesUrl, orderedImpacts, violationsAffectedByAccentedTriggers } from '../constants.js';
 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) &&
+    violationsAffectedByAccentedTriggers.has(violationId) &&
     Boolean(element.querySelector(`${name}-trigger`))
   );
 }