accented 1.2.6 → 1.3.1

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`))
   );
 }

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

@@ -77,6 +77,11 @@ const node3: AxeNode = {
   element: element3,
 };
 
+const htmlNode: AxeNode = {
+  ...commonNodeProps,
+  element: document.documentElement,
+};
+
 const commonViolationProps = {
   help: 'help',
   helpUrl: 'http://example.com',
@@ -109,6 +114,18 @@ const violation4: Violation = {
   nodes: [node3],
 };
 
+const headingViolation: Violation = {
+  ...commonViolationProps,
+  id: 'page-has-heading-one',
+  nodes: [htmlNode],
+};
+
+const langViolation: Violation = {
+  ...commonViolationProps,
+  id: 'html-has-lang',
+  nodes: [htmlNode],
+};
+
 const commonIssueProps = {
   title: 'help',
   description: 'description',
@@ -131,43 +148,56 @@ const issue3: Issue = {
   ...commonIssueProps,
 };
 
-const scanContext = {
+const headingIssue: Issue = {
+  id: 'page-has-heading-one',
+  ...commonIssueProps,
+};
+
+const langIssue: Issue = {
+  id: 'html-has-lang',
+  ...commonIssueProps,
+};
+
+const fullDocumentContext = {
   include: [document],
   exclude: [],
 };
 
+const narrowContext = {
+  include: [element1],
+  exclude: [],
+};
+
+function createElementsWithIssues(
+  items: Array<{ id: number; element: HTMLElement; issues: Array<Issue> }>,
+): Signal<Array<ExtendedElementWithIssues>> {
+  return signal(
+    items.map(({ id, element, issues }) => ({
+      id,
+      element,
+      rootNode,
+      skipRender: false,
+      position,
+      visible,
+      trigger,
+      anchorNameValue: 'none',
+      scrollableAncestors,
+      issues: signal(issues),
+    })),
+  );
+}
+
 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]),
-      },
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: element1, issues: [issue1] },
+      { id: 2, element: element2, issues: [issue2] },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
-      scanContext,
-      violations: [violation1, violation2],
+      limitedContext: fullDocumentContext,
+      limitedContextViolations: [violation1, violation2],
+      fullContextViolations: [],
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 2);
@@ -178,36 +208,15 @@ suite('updateElementsWithIssues', () => {
   });
 
   test('one issue added', () => {
-    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]),
-      },
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: element1, issues: [issue1] },
+      { id: 2, element: element2, issues: [issue2] },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
-      scanContext,
-      violations: [violation1, violation2, violation3],
+      limitedContext: fullDocumentContext,
+      limitedContextViolations: [violation1, violation2, violation3],
+      fullContextViolations: [],
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 2);
@@ -218,36 +227,15 @@ suite('updateElementsWithIssues', () => {
   });
 
   test('one issue removed', () => {
-    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, issue3]),
-      },
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: element1, issues: [issue1] },
+      { id: 2, element: element2, issues: [issue2, issue3] },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
-      scanContext,
-      violations: [violation1, violation2],
+      limitedContext: fullDocumentContext,
+      limitedContextViolations: [violation1, violation2],
+      fullContextViolations: [],
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 2);
@@ -258,24 +246,14 @@ suite('updateElementsWithIssues', () => {
   });
 
   test('one element added', () => {
-    const extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>> = signal([
-      {
-        id: 1,
-        element: element1,
-        rootNode,
-        skipRender: false,
-        position,
-        visible,
-        trigger,
-        anchorNameValue: 'none',
-        scrollableAncestors,
-        issues: signal([issue1]),
-      },
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: element1, issues: [issue1] },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
-      scanContext,
-      violations: [violation1, violation2],
+      limitedContext: fullDocumentContext,
+      limitedContextViolations: [violation1, violation2],
+      fullContextViolations: [],
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 2);
@@ -286,24 +264,14 @@ suite('updateElementsWithIssues', () => {
   });
 
   test('one disconnected element added', () => {
-    const extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>> = signal([
-      {
-        id: 1,
-        element: element1,
-        rootNode,
-        skipRender: false,
-        position,
-        visible,
-        trigger,
-        anchorNameValue: 'none',
-        scrollableAncestors,
-        issues: signal([issue1]),
-      },
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: element1, issues: [issue1] },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
-      scanContext,
-      violations: [violation1, violation4],
+      limitedContext: fullDocumentContext,
+      limitedContextViolations: [violation1, violation4],
+      fullContextViolations: [],
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 1);
@@ -311,40 +279,156 @@ suite('updateElementsWithIssues', () => {
   });
 
   test('one element removed', () => {
-    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]),
-      },
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: element1, issues: [issue1] },
+      { id: 2, element: element2, issues: [issue2] },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
-      scanContext,
-      violations: [violation1],
+      limitedContext: fullDocumentContext,
+      limitedContextViolations: [violation1],
+      fullContextViolations: [],
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 1);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
     assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);
   });
+
+  test('strips descendant-dependent issue from element outside limited context when full context no longer reports it', () => {
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: document.documentElement, issues: [headingIssue] },
+    ]);
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      limitedContext: narrowContext,
+      limitedContextViolations: [],
+      fullContextViolations: [],
+      name: 'accented',
+    });
+    assert.equal(extendedElementsWithIssues.value.length, 0);
+  });
+
+  test('keeps descendant-dependent issue on element outside limited context when full context still reports it', () => {
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: document.documentElement, issues: [headingIssue] },
+    ]);
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      limitedContext: narrowContext,
+      limitedContextViolations: [],
+      fullContextViolations: [headingViolation],
+      name: 'accented',
+    });
+    assert.equal(extendedElementsWithIssues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.element, document.documentElement);
+    assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.issues.value[0]?.id, 'page-has-heading-one');
+  });
+
+  test('keeps non-descendant-dependent issue on element outside limited context', () => {
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: document.documentElement, issues: [langIssue] },
+    ]);
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      limitedContext: narrowContext,
+      limitedContextViolations: [],
+      fullContextViolations: [],
+      name: 'accented',
+    });
+    assert.equal(extendedElementsWithIssues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.element, document.documentElement);
+    assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.issues.value[0]?.id, 'html-has-lang');
+  });
+
+  test('adds a new element reported only by full context violations', () => {
+    const extendedElementsWithIssues = createElementsWithIssues([]);
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      limitedContext: narrowContext,
+      limitedContextViolations: [],
+      fullContextViolations: [headingViolation],
+      name: 'accented',
+    });
+    assert.equal(extendedElementsWithIssues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.element, document.documentElement);
+    assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.issues.value[0]?.id, 'page-has-heading-one');
+  });
+
+  test('adds a new element with merged issues from limited and full context violations', () => {
+    const extendedElementsWithIssues = createElementsWithIssues([]);
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      limitedContext: fullDocumentContext,
+      limitedContextViolations: [langViolation],
+      fullContextViolations: [headingViolation],
+      name: 'accented',
+    });
+    assert.equal(extendedElementsWithIssues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.element, document.documentElement);
+    assert.deepEqual(
+      extendedElementsWithIssues.value[0]?.issues.value.map((issue) => issue.id),
+      ['html-has-lang', 'page-has-heading-one'],
+    );
+  });
+
+  test('merges limited and full context violations onto an existing element', () => {
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: document.documentElement, issues: [langIssue] },
+    ]);
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      limitedContext: fullDocumentContext,
+      limitedContextViolations: [langViolation],
+      fullContextViolations: [headingViolation],
+      name: 'accented',
+    });
+    assert.equal(extendedElementsWithIssues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.element, document.documentElement);
+    assert.deepEqual(
+      extendedElementsWithIssues.value[0]?.issues.value.map((issue) => issue.id),
+      ['html-has-lang', 'page-has-heading-one'],
+    );
+  });
+
+  test('strips only descendant-dependent issues from an element outside limited context with mixed issues', () => {
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: document.documentElement, issues: [langIssue, headingIssue] },
+    ]);
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      limitedContext: narrowContext,
+      limitedContextViolations: [],
+      fullContextViolations: [],
+      name: 'accented',
+    });
+    assert.equal(extendedElementsWithIssues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.element, document.documentElement);
+    assert.deepEqual(
+      extendedElementsWithIssues.value[0]?.issues.value.map((issue) => issue.id),
+      ['html-has-lang'],
+    );
+  });
+
+  test('keeps existing issue on element outside limited context and adds a new full context issue', () => {
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: document.documentElement, issues: [langIssue] },
+    ]);
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      limitedContext: narrowContext,
+      limitedContextViolations: [],
+      fullContextViolations: [headingViolation],
+      name: 'accented',
+    });
+    assert.equal(extendedElementsWithIssues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.element, document.documentElement);
+    assert.deepEqual(
+      extendedElementsWithIssues.value[0]?.issues.value.map((issue) => issue.id),
+      ['html-has-lang', 'page-has-heading-one'],
+    );
+  });
 });