accented 1.0.0 → 1.1.0

package/src/utils/are-issues-equal.ts

@@ -0,0 +1,7 @@
+import type { Issue } from '../types.ts';
+
+const issueProps: Array<keyof Issue> = ['id', 'title', 'description', 'url', 'impact'];
+
+export function areIssuesEqual(issue1: Issue, issue2: Issue) {
+  return issueProps.every((prop) => issue2[prop] === issue1[prop]);
+}

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

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

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

@@ -1,8 +1,8 @@
 import assert from 'node:assert/strict';
 import { suite, test } from 'node:test';
+import type { AxeResults } from 'axe-core';
 import { transformViolations } from './transform-violations';
 
-import type { AxeResults } from 'axe-core';
 type Violation = AxeResults['violations'][number];
 type Node = Violation['nodes'][number];
 

package/src/utils/transform-violations.ts

@@ -1,4 +1,5 @@
-import type { AxeResults, ImpactValue } from 'axe-core';
+import type { AxeResults } from 'axe-core';
+import { issuesUrl, orderedImpacts } 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
@@ -20,9 +21,8 @@ function maybeCausedByAccented(violationId: string, element: HTMLElement, name:
   );
 }
 
-function impactCompare(a: ImpactValue, b: ImpactValue) {
-  const impactOrder = [null, 'minor', 'moderate', 'serious', 'critical'];
-  return impactOrder.indexOf(a) - impactOrder.indexOf(b);
+function impactCompare(a: Issue['impact'], b: Issue['impact']) {
+  return orderedImpacts.indexOf(a) - orderedImpacts.indexOf(b);
 }
 
 export function transformViolations(violations: typeof AxeResults.violations, name: string) {
@@ -41,12 +41,20 @@ export function transformViolations(violations: typeof AxeResults.violations, na
       const isInIframe = target.length > 1;
 
       if (element && !isInIframe && !maybeCausedByAccented(violation.id, element, name)) {
+        if (!violation.impact) {
+          console.warn(
+            `Accented: axe-core (the accessibility testing engine) returned a violation with an empty impact. This may be a bug in axe-core or in Accented. Please report it at ${issuesUrl}.`,
+            violation,
+          );
+          continue;
+        }
         const issue: Issue = {
           id: violation.id,
           title: violation.help,
+          // See https://github.com/pomerantsev/accented/issues/203
           description: node.failureSummary ?? violation.description,
           url: violation.helpUrl,
-          impact: violation.impact ?? null,
+          impact: violation.impact,
         };
         const existingElement = elementsWithIssues.find(
           (elementWithIssues) => elementWithIssues.element === element,

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

@@ -2,11 +2,11 @@ import assert from 'node:assert/strict';
 import { suite, test } from 'node:test';
 import type { Signal } from '@preact/signals-core';
 import { signal } from '@preact/signals-core';
+import type { AxeResults, ImpactValue } from 'axe-core';
+import type { AccentedTrigger } from '../elements/accented-trigger';
 import type { ExtendedElementWithIssues, Issue } from '../types';
 import { updateElementsWithIssues } from './update-elements-with-issues';
 
-import type { AxeResults, ImpactValue } from 'axe-core';
-import type { AccentedTrigger } from '../elements/accented-trigger';
 type Violation = AxeResults['violations'][number];
 type AxeNode = Violation['nodes'][number];
 
@@ -31,6 +31,10 @@ const win: Window & { CSS: typeof CSS } = {
   CSS: {
     supports: () => true,
   },
+  // @ts-expect-error we're missing a lot of properties
+  navigator: {
+    userAgent: '',
+  },
 };
 
 const getBoundingClientRect = () => ({});

package/src/validate-options.ts

@@ -149,6 +149,11 @@ export function validateOptions(options: AccentedOptions) {
         `Accented: invalid argument. \`output.console\` option is expected to be a boolean. It’s currently set to ${options.output.console}.`,
       );
     }
+    if (options.output.page !== undefined && typeof options.output.page !== 'boolean') {
+      console.warn(
+        `Accented: invalid argument. \`output.page\` option is expected to be a boolean. It’s currently set to ${options.output.page}.`,
+      );
+    }
   }
   if (options.callback !== undefined && typeof options.callback !== 'function') {
     throw new TypeError(