npm - accented - Versions diffs - 0.0.2 → 1.0.1 - Mend

accented 0.0.2 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (217) hide show

package/NOTICE +14 -0
package/README.md +44 -187
package/dist/accented.d.ts +8 -8
package/dist/accented.d.ts.map +1 -1
package/dist/accented.js +37 -30
package/dist/accented.js.map +1 -1
package/dist/common/strings.d.ts +2 -0
package/dist/common/strings.d.ts.map +1 -0
package/dist/common/strings.js +2 -0
package/dist/common/strings.js.map +1 -0
package/dist/common/tokens.d.ts +7 -0
package/dist/common/tokens.d.ts.map +1 -0
package/dist/common/tokens.js +8 -0
package/dist/common/tokens.js.map +1 -0
package/dist/constants.d.ts +2 -1
package/dist/constants.d.ts.map +1 -1
package/dist/constants.js +2 -1
package/dist/constants.js.map +1 -1
package/dist/dom-updater.d.ts +1 -1
package/dist/dom-updater.d.ts.map +1 -1
package/dist/dom-updater.js +73 -31
package/dist/dom-updater.js.map +1 -1
package/dist/elements/accented-dialog.d.ts +18 -10
package/dist/elements/accented-dialog.d.ts.map +1 -1
package/dist/elements/accented-dialog.js +116 -95
package/dist/elements/accented-dialog.js.map +1 -1
package/dist/elements/accented-trigger.d.ts +14 -9
package/dist/elements/accented-trigger.d.ts.map +1 -1
package/dist/elements/accented-trigger.js +83 -24
package/dist/elements/accented-trigger.js.map +1 -1
package/dist/fullscreen-listener.d.ts +2 -0
package/dist/fullscreen-listener.d.ts.map +1 -0
package/dist/fullscreen-listener.js +17 -0
package/dist/fullscreen-listener.js.map +1 -0
package/dist/intersection-observer.d.ts +1 -1
package/dist/intersection-observer.d.ts.map +1 -1
package/dist/intersection-observer.js +12 -6
package/dist/intersection-observer.js.map +1 -1
package/dist/log-and-rethrow.d.ts +1 -1
package/dist/log-and-rethrow.d.ts.map +1 -1
package/dist/log-and-rethrow.js +2 -3
package/dist/log-and-rethrow.js.map +1 -1
package/dist/logger.d.ts +4 -1
package/dist/logger.d.ts.map +1 -1
package/dist/logger.js +6 -3
package/dist/logger.js.map +1 -1
package/dist/register-elements.d.ts +1 -1
package/dist/register-elements.d.ts.map +1 -1
package/dist/register-elements.js +6 -7
package/dist/register-elements.js.map +1 -1
package/dist/resize-listener.d.ts +1 -1
package/dist/resize-listener.d.ts.map +1 -1
package/dist/resize-listener.js +3 -4
package/dist/resize-listener.js.map +1 -1
package/dist/scanner.d.ts +2 -2
package/dist/scanner.d.ts.map +1 -1
package/dist/scanner.js +76 -43
package/dist/scanner.js.map +1 -1
package/dist/scroll-listeners.d.ts +1 -1
package/dist/scroll-listeners.d.ts.map +1 -1
package/dist/scroll-listeners.js +3 -4
package/dist/scroll-listeners.js.map +1 -1
package/dist/state.d.ts +3 -2
package/dist/state.d.ts.map +1 -1
package/dist/state.js +5 -3
package/dist/state.js.map +1 -1
package/dist/task-queue.d.ts +4 -4
package/dist/task-queue.d.ts.map +1 -1
package/dist/task-queue.js +3 -2
package/dist/task-queue.js.map +1 -1
package/dist/types.d.ts +140 -49
package/dist/types.d.ts.map +1 -1
package/dist/types.js.map +1 -1
package/dist/utils/are-elements-with-issues-equal.d.ts +3 -0
package/dist/utils/are-elements-with-issues-equal.d.ts.map +1 -0
package/dist/utils/are-elements-with-issues-equal.js +5 -0
package/dist/utils/are-elements-with-issues-equal.js.map +1 -0
package/dist/utils/are-issue-sets-equal.d.ts +2 -2
package/dist/utils/are-issue-sets-equal.d.ts.map +1 -1
package/dist/utils/are-issue-sets-equal.js +3 -3
package/dist/utils/are-issue-sets-equal.js.map +1 -1
package/dist/utils/containing-blocks.d.ts +3 -0
package/dist/utils/containing-blocks.d.ts.map +1 -0
package/dist/utils/containing-blocks.js +46 -0
package/dist/utils/containing-blocks.js.map +1 -0
package/dist/utils/contains.d.ts +2 -0
package/dist/utils/contains.d.ts.map +1 -0
package/dist/utils/contains.js +19 -0
package/dist/utils/contains.js.map +1 -0
package/dist/utils/deduplicate-nodes.d.ts +2 -0
package/dist/utils/deduplicate-nodes.d.ts.map +1 -0
package/dist/utils/deduplicate-nodes.js +4 -0
package/dist/utils/deduplicate-nodes.js.map +1 -0
package/dist/utils/deep-merge.d.ts +1 -1
package/dist/utils/deep-merge.d.ts.map +1 -1
package/dist/utils/deep-merge.js +8 -5
package/dist/utils/deep-merge.js.map +1 -1
package/dist/utils/dom-helpers.d.ts +9 -0
package/dist/utils/dom-helpers.d.ts.map +1 -0
package/dist/utils/dom-helpers.js +34 -0
package/dist/utils/dom-helpers.js.map +1 -0
package/dist/utils/ensure-non-empty.d.ts +2 -0
package/dist/utils/ensure-non-empty.d.ts.map +1 -0
package/dist/utils/ensure-non-empty.js +7 -0
package/dist/utils/ensure-non-empty.js.map +1 -0
package/dist/utils/get-element-html.d.ts +1 -1
package/dist/utils/get-element-html.d.ts.map +1 -1
package/dist/utils/get-element-html.js +4 -2
package/dist/utils/get-element-html.js.map +1 -1
package/dist/utils/get-element-position.d.ts +10 -2
package/dist/utils/get-element-position.d.ts.map +1 -1
package/dist/utils/get-element-position.js +64 -16
package/dist/utils/get-element-position.js.map +1 -1
package/dist/utils/get-parent.d.ts +2 -0
package/dist/utils/get-parent.d.ts.map +1 -0
package/dist/utils/get-parent.js +12 -0
package/dist/utils/get-parent.js.map +1 -0
package/dist/utils/get-scan-context.d.ts +3 -0
package/dist/utils/get-scan-context.d.ts.map +1 -0
package/dist/utils/get-scan-context.js +28 -0
package/dist/utils/get-scan-context.js.map +1 -0
package/dist/utils/get-scrollable-ancestors.d.ts +1 -1
package/dist/utils/get-scrollable-ancestors.d.ts.map +1 -1
package/dist/utils/get-scrollable-ancestors.js +10 -6
package/dist/utils/get-scrollable-ancestors.js.map +1 -1
package/dist/utils/is-node-in-scan-context.d.ts +3 -0
package/dist/utils/is-node-in-scan-context.d.ts.map +1 -0
package/dist/utils/is-node-in-scan-context.js +26 -0
package/dist/utils/is-node-in-scan-context.js.map +1 -0
package/dist/utils/is-non-empty.d.ts +2 -0
package/dist/utils/is-non-empty.d.ts.map +1 -0
package/dist/utils/is-non-empty.js +4 -0
package/dist/utils/is-non-empty.js.map +1 -0
package/dist/utils/normalize-context.d.ts +3 -0
package/dist/utils/normalize-context.d.ts.map +1 -0
package/dist/utils/normalize-context.js +59 -0
package/dist/utils/normalize-context.js.map +1 -0
package/dist/utils/recalculate-positions.d.ts +1 -1
package/dist/utils/recalculate-positions.d.ts.map +1 -1
package/dist/utils/recalculate-positions.js +5 -5
package/dist/utils/recalculate-positions.js.map +1 -1
package/dist/utils/recalculate-scrollable-ancestors.d.ts +1 -1
package/dist/utils/recalculate-scrollable-ancestors.d.ts.map +1 -1
package/dist/utils/recalculate-scrollable-ancestors.js +4 -4
package/dist/utils/recalculate-scrollable-ancestors.js.map +1 -1
package/dist/utils/shadow-dom-aware-mutation-observer.d.ts +10 -0
package/dist/utils/shadow-dom-aware-mutation-observer.d.ts.map +1 -0
package/dist/utils/shadow-dom-aware-mutation-observer.js +61 -0
package/dist/utils/shadow-dom-aware-mutation-observer.js.map +1 -0
package/dist/utils/supports-anchor-positioning.d.ts +1 -1
package/dist/utils/supports-anchor-positioning.d.ts.map +1 -1
package/dist/utils/supports-anchor-positioning.js +15 -2
package/dist/utils/supports-anchor-positioning.js.map +1 -1
package/dist/utils/transform-violations.d.ts +2 -2
package/dist/utils/transform-violations.d.ts.map +1 -1
package/dist/utils/transform-violations.js +25 -10
package/dist/utils/transform-violations.js.map +1 -1
package/dist/utils/update-elements-with-issues.d.ts +11 -5
package/dist/utils/update-elements-with-issues.d.ts.map +1 -1
package/dist/utils/update-elements-with-issues.js +56 -24
package/dist/utils/update-elements-with-issues.js.map +1 -1
package/dist/validate-options.d.ts +2 -2
package/dist/validate-options.d.ts.map +1 -1
package/dist/validate-options.js +91 -4
package/dist/validate-options.js.map +1 -1
package/package.json +16 -8
package/src/accented.test.ts +2 -2
package/src/accented.ts +45 -34
package/src/common/strings.ts +2 -0
package/src/common/tokens.ts +10 -0
package/src/constants.ts +2 -1
package/src/dom-updater.ts +87 -34
package/src/elements/accented-dialog.ts +163 -123
package/src/elements/accented-trigger.ts +128 -50
package/src/fullscreen-listener.ts +21 -0
package/src/intersection-observer.ts +27 -16
package/src/log-and-rethrow.ts +2 -3
package/src/logger.ts +14 -4
package/src/register-elements.ts +7 -7
package/src/resize-listener.ts +15 -11
package/src/scanner.ts +113 -57
package/src/scroll-listeners.ts +27 -19
package/src/state.ts +27 -16
package/src/task-queue.test.ts +5 -4
package/src/task-queue.ts +8 -6
package/src/types.ts +179 -76
package/src/utils/are-elements-with-issues-equal.ts +11 -0
package/src/utils/are-issue-sets-equal.test.ts +6 -7
package/src/utils/are-issue-sets-equal.ts +8 -6
package/src/utils/containing-blocks.ts +60 -0
package/src/utils/contains.test.ts +54 -0
package/src/utils/contains.ts +19 -0
package/src/utils/deduplicate-nodes.ts +3 -0
package/src/utils/deep-merge.test.ts +8 -1
package/src/utils/deep-merge.ts +14 -8
package/src/utils/dom-helpers.ts +42 -0
package/src/utils/ensure-non-empty.ts +6 -0
package/src/utils/get-element-html.ts +4 -2
package/src/utils/get-element-position.ts +84 -16
package/src/utils/get-parent.ts +14 -0
package/src/utils/get-scan-context.test.ts +85 -0
package/src/utils/get-scan-context.ts +36 -0
package/src/utils/get-scrollable-ancestors.ts +15 -7
package/src/utils/is-node-in-scan-context.test.ts +70 -0
package/src/utils/is-node-in-scan-context.ts +29 -0
package/src/utils/is-non-empty.ts +3 -0
package/src/utils/normalize-context.test.ts +105 -0
package/src/utils/normalize-context.ts +65 -0
package/src/utils/recalculate-positions.ts +5 -5
package/src/utils/recalculate-scrollable-ancestors.ts +4 -4
package/src/utils/shadow-dom-aware-mutation-observer.ts +75 -0
package/src/utils/supports-anchor-positioning.ts +19 -3
package/src/utils/transform-violations.test.ts +29 -25
package/src/utils/transform-violations.ts +32 -12
package/src/utils/update-elements-with-issues.test.ts +145 -53
package/src/utils/update-elements-with-issues.ts +123 -54
package/src/validate-options.ts +154 -14

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

@@ -1,74 +1,143 @@
-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 transformViolations from './transform-violations.js';
-import areIssueSetsEqual from './are-issue-sets-equal.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 type { AxeResults } from 'axe-core';
+import type { AccentedDialog } from '../elements/accented-dialog.ts';
+import type { AccentedTrigger } from '../elements/accented-trigger.ts';
+import type { ExtendedElementWithIssues, ScanContext } from '../types.ts';
+import { areElementsWithIssuesEqual } from './are-elements-with-issues-equal.js';
+import { areIssueSetsEqual } from './are-issue-sets-equal.js';
+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 { isNodeInScanContext } from './is-node-in-scan-context.js';
+import { supportsAnchorPositioning } from './supports-anchor-positioning.js';
+import { transformViolations } from './transform-violations.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 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);
-      if (existingElementIndex > -1 && extendedElementsWithIssues.value[existingElementIndex] && !areIssueSetsEqual(extendedElementsWithIssues.value[existingElementIndex].issues.value, updatedElementWithIssues.issues)) {
-        extendedElementsWithIssues.value[existingElementIndex].issues.value = updatedElementWithIssues.issues;
+      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);
+    const addedElementsWithIssues = updatedElementsWithIssues.filter((updatedElementWithIssues) => {
+      return !extendedElementsWithIssues.value.some((extendedElementWithIssues) =>
+        areElementsWithIssuesEqual(extendedElementWithIssues, updatedElementWithIssues),
+      );
     });
-    const removedElementsWithIssues = extendedElementsWithIssues.value.filter(extendedElementWithIssues => {
-      return !updatedElementsWithIssues.some(updatedElementWithIssues => updatedElementWithIssues.element === extendedElementWithIssues.element);
-    });
+    // 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) => {
+        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);
+        .filter((extendedElementWithIssues) => {
+          return !removedElementsWithIssues.some((removedElementWithIssues) =>
+            areElementsWithIssuesEqual(removedElementWithIssues, extendedElementWithIssues),
+          );
         })
-        .concat(addedElementsWithIssues
-          .filter(addedElementWithIssues => addedElementWithIssues.element.isConnected)
-          .map(addedElementWithIssues => {
-            const id = count++;
-            const trigger = win.document.createElement(`${name}-trigger`) as AccentedTrigger;
-            const elementZIndex = parseInt(win.getComputedStyle(addedElementWithIssues.element).zIndex, 10);
-            if (!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 = win.document.createElement(`${name}-dialog`) as AccentedDialog;
-            trigger.dialog = accentedDialog;
-            const position = getElementPosition(addedElementWithIssues.element, win);
-            trigger.position = signal(position);
-            trigger.visible = signal(true);
-            trigger.element = addedElementWithIssues.element;
-            const scrollableAncestors = supportsAnchorPositioning(win) ?
-              new Set<HTMLElement>() :
-              getScrollableAncestors(addedElementWithIssues.element, win);
-            const issues = signal(addedElementWithIssues.issues);
-            accentedDialog.issues = issues;
-            accentedDialog.element = addedElementWithIssues.element;
-            return {
-              id,
-              element: addedElementWithIssues.element,
-              visible: trigger.visible,
-              position: trigger.position,
-              scrollableAncestors: signal(scrollableAncestors),
-              trigger,
-              issues
-            };
-          })
+        .concat(
+          addedElementsWithIssues
+            .filter((addedElementWithIssues) => addedElementWithIssues.element.isConnected)
+            .map((addedElementWithIssues) => {
+              const id = count++;
+              const trigger = win.document.createElement(`${name}-trigger`) as AccentedTrigger;
+              const elementZIndex = Number.parseInt(
+                win.getComputedStyle(addedElementWithIssues.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 = win.document.createElement(`${name}-dialog`) as AccentedDialog;
+              trigger.dialog = accentedDialog;
+              const position = getElementPosition(addedElementWithIssues.element, win);
+              trigger.position = signal(position);
+              trigger.visible = signal(true);
+              trigger.element = addedElementWithIssues.element;
+              const scrollableAncestors = supportsAnchorPositioning(win)
+                ? new Set<HTMLElement>()
+                : getScrollableAncestors(addedElementWithIssues.element, win);
+              const issues = signal(addedElementWithIssues.issues);
+              accentedDialog.issues = issues;
+              accentedDialog.element = addedElementWithIssues.element;
+              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 CHANGED Viewed

@@ -1,44 +1,184 @@
-import type { AccentedOptions } from './types';
 import { allowedAxeOptions } from './types.js';
+import type {
+  AccentedOptions,
+  Context,
+  ContextObject,
+  ContextProp,
+  Selector,
+  SelectorList,
+} from './types.ts';
+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;
+  }
+  if (isNode(selector)) {
+    return;
+  }
+  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;
+  }
+  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;
+  }
+  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 && contextObject.include !== undefined) {
+    validateContextProp(contextObject.include);
+  }
+  if ('exclude' in contextObject && contextObject.exclude !== undefined) {
+    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
 // lowercase alphanumeric names that possibly contain dashes that start with a letter.
 const nameRegex = /^[a-z]([a-z0-9]|-)+$/;
-export default function validateOptions(options: AccentedOptions) {
+export function validateOptions(options: AccentedOptions) {
   if (typeof options !== 'object' || options === null) {
-    throw new TypeError(`Accented: invalid argument. The options parameter must be an object if provided. It’s currently set to ${options}.`);
+    throw new TypeError(
+      `Accented: invalid argument. The options parameter must be an object if provided. It’s currently set to ${options}.`,
+    );
   }
   if (options.throttle !== undefined) {
     if (typeof options.throttle !== 'object' || options.throttle === null) {
-      throw new TypeError(`Accented: invalid argument. \`throttle\` option must be an object if provided. It’s currently set to ${options.throttle}.`);
+      throw new TypeError(
+        `Accented: invalid argument. \`throttle\` option must be an object if provided. It’s currently set to ${options.throttle}.`,
+      );
     }
-    if (options.throttle.wait !== undefined && (typeof options.throttle.wait !== 'number' || options.throttle.wait < 0)) {
-      throw new TypeError(`Accented: invalid argument. \`throttle.wait\` option must be a non-negative number if provided. It’s currently set to ${options.throttle.wait}.`);
+    if (
+      options.throttle.wait !== undefined &&
+      (typeof options.throttle.wait !== 'number' || options.throttle.wait < 0)
+    ) {
+      throw new TypeError(
+        `Accented: invalid argument. \`throttle.wait\` option must be a non-negative number if provided. It’s currently set to ${options.throttle.wait}.`,
+      );
     }
   }
   if (options.output !== undefined) {
     if (typeof options.output !== 'object' || options.output === null) {
-      throw new TypeError(`Accented: invalid argument. \`output\` option must be an object if provided. It’s currently set to ${options.output}.`);
+      throw new TypeError(
+        `Accented: invalid argument. \`output\` option must be an object if provided. It’s currently set to ${options.output}.`,
+      );
     }
     if (options.output.console !== undefined && typeof options.output.console !== 'boolean') {
-      console.warn(`Accented: invalid argument. \`output.console\` option is expected to be a boolean. It’s currently set to ${options.output.console}.`);
+      console.warn(
+        `Accented: invalid argument. \`output.console\` option is expected to be a boolean. It’s currently set to ${options.output.console}.`,
+      );
     }
   }
   if (options.callback !== undefined && typeof options.callback !== 'function') {
-    throw new TypeError(`Accented: invalid argument. \`callback\` option must be a function if provided. It’s currently set to ${options.callback}.`);
+    throw new TypeError(
+      `Accented: invalid argument. \`callback\` option must be a function if provided. It’s currently set to ${options.callback}.`,
+    );
   }
-  if (options.name !== undefined && (typeof options.name !== 'string' || !options.name.match(nameRegex))) {
-    throw new TypeError(`Accented: invalid argument. \`name\` option must be a string that starts with a lowercase letter and only contains lowercase alphanumeric characters and dashes. It’s currently set to ${options.name}.`);
+  if (
+    options.name !== undefined &&
+    (typeof options.name !== 'string' || !options.name.match(nameRegex))
+  ) {
+    throw new TypeError(
+      `Accented: invalid argument. \`name\` option must be a string that starts with a lowercase letter and only contains lowercase alphanumeric characters and dashes. It’s currently set to ${options.name}.`,
+    );
   }
   if (options.axeOptions !== undefined) {
     if (typeof options.axeOptions !== 'object' || options.axeOptions === null) {
-      throw new TypeError(`Accented: invalid argument. \`axeOptions\` option must be an object if provided. It’s currently set to ${options.axeOptions}.`);
+      throw new TypeError(
+        `Accented: invalid argument. \`axeOptions\` option must be an object if provided. It’s currently set to ${options.axeOptions}.`,
+      );
     }
-    const unsupportedKeys = Object.keys(options.axeOptions).filter(key => !(allowedAxeOptions as unknown as Array<string>).includes(key));
+    const unsupportedKeys = Object.keys(options.axeOptions).filter(
+      (key) => !(allowedAxeOptions as unknown as Array<string>).includes(key),
+    );
     if (unsupportedKeys.length > 0) {
-      throw new TypeError(`Accented: invalid argument. \`axeOptions\` contains the following unsupported keys: ${unsupportedKeys.join(', ')}. Valid options are: ${allowedAxeOptions.join(', ')}.`);
+      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);
+  }
 }