@motion-proto/live-tokens 0.98.2 → 0.99.0

package/src/editor/ui/a11y/A11yOverview.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
-  import { issueTotals, issuesLabel, type A11yComponentRow, type A11yIssueTotals } from './a11yView';
+  import { issueTotals, type A11yComponentRow, type A11yIssueTotals } from './a11yView';
 
   interface Props {
     rows: A11yComponentRow[];
     onjump: (component: string) => void;
+    /** Scrolls to the By eye list. */
+    onreview?: () => void;
   }
 
-  let { rows, onjump }: Props = $props();
+  let { rows, onjump, onreview }: Props = $props();
 
   const KINDS: { key: keyof A11yIssueTotals; label: string; column: string }[] = [
     { key: 'property', label: 'Fix with a property', column: 'Property' },
@@ -14,15 +16,25 @@
     { key: 'review', label: 'Check by eye', column: 'By eye' },
   ];
 
-  let tallies = $derived(rows.map((row) => ({ row, totals: issueTotals(row.issues) })));
+  let tallies = $derived(
+    rows
+      .map((row) => ({ row, totals: issueTotals(row.issues) }))
+      .sort(
+        (a, b) =>
+          b.totals.property - a.totals.property ||
+          b.totals.code - a.totals.code ||
+          a.row.label.localeCompare(b.row.label),
+      ),
+  );
   let sums = $derived(
     tallies.reduce(
       (acc, { totals }) => ({ property: acc.property + totals.property, code: acc.code + totals.code, review: acc.review + totals.review }),
       { property: 0, code: 0, review: 0 },
     ),
   );
-  let total = $derived(sums.property + sums.code + sums.review);
-  let widest = $derived(Math.max(1, ...rows.map((row) => row.count)));
+  let total = $derived(sums.property + sums.code);
+  let withIssues = $derived(rows.filter((row) => row.count > 0).length);
+  let fixed = $derived(rows.reduce((sum, row) => sum + row.issues.fixed.length, 0));
 </script>
 
 <section class="editor-section-card a11y-overview" aria-label="Overview">
@@ -30,17 +42,30 @@
     <div class="a11y-stat a11y-stat-total">
       <span class="a11y-stat-value">{total}</span>
       <span class="a11y-stat-label">
-        {total === 1 ? 'issue' : 'issues'} in {rows.length} {rows.length === 1 ? 'component' : 'components'}
+        {total === 1 ? 'issue' : 'issues'} in {withIssues} {withIssues === 1 ? 'component' : 'components'}
       </span>
     </div>
     {#each KINDS as kind (kind.key)}
-      <div class="a11y-stat">
-        <span class="a11y-stat-value" class:zero={sums[kind.key] === 0}>{sums[kind.key]}</span>
+      {#if kind.key === 'review' && onreview}
+        <button type="button" class="a11y-stat a11y-stat-jump" onclick={onreview}>
+          <span class="a11y-stat-value" class:zero={sums[kind.key] === 0}>{sums[kind.key]}</span>
+          <span class="a11y-stat-label">{kind.label} <i class="fas fa-arrow-down" aria-hidden="true"></i></span>
+        </button>
+      {:else}
+        <div class="a11y-stat">
+          <span class="a11y-stat-value" class:zero={sums[kind.key] === 0}>{sums[kind.key]}</span>
+          <span class="a11y-stat-label">{kind.label}</span>
+        </div>
+      {/if}
+    {/each}
+    {#if fixed > 0}
+      <div class="a11y-stat a11y-stat-fixed">
+        <span class="a11y-stat-value">{fixed}</span>
         <span class="a11y-stat-label">
-          <span class="a11y-swatch {kind.key}" aria-hidden="true"></span>{kind.label}
+          <i class="fa-solid fa-check" aria-hidden="true"></i>Fixed since the run
         </span>
       </div>
-    {/each}
+    {/if}
   </div>
 
   <table class="a11y-table">
@@ -50,7 +75,9 @@
         {#each KINDS as kind (kind.key)}
           <th scope="col" class="num">{kind.column}</th>
         {/each}
-        <th scope="col" class="bar-col"><span class="a11y-hidden">Issues</span></th>
+        {#if fixed > 0}
+          <th scope="col" class="num">Fixed</th>
+        {/if}
       </tr>
     </thead>
     <tbody>
@@ -64,15 +91,9 @@
           {#each KINDS as kind (kind.key)}
             <td class="num" class:zero={totals[kind.key] === 0}>{totals[kind.key]}</td>
           {/each}
-          <td class="bar-col">
-            <span class="a11y-bar" style:width={`${(row.count / widest) * 100}%`} title={issuesLabel(row.count)}>
-              {#each KINDS as kind (kind.key)}
-                {#if totals[kind.key] > 0}
-                  <span class="a11y-bar-part {kind.key}" style:flex-grow={totals[kind.key]}></span>
-                {/if}
-              {/each}
-            </span>
-          </td>
+          {#if fixed > 0}
+            <td class="num fixed" class:zero={row.issues.fixed.length === 0}>{row.issues.fixed.length}</td>
+          {/if}
         </tr>
       {/each}
     </tbody>
@@ -98,6 +119,33 @@
     border-left: 1px solid var(--ui-border-low);
   }
 
+  .a11y-stat-jump {
+    margin: 0;
+    background: none;
+    border-top: none;
+    border-right: none;
+    border-bottom: none;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .a11y-stat-jump i {
+    font-size: var(--ui-font-size-xs);
+    opacity: 0;
+    transition: opacity var(--ui-transition-fast);
+  }
+
+  .a11y-stat-jump:hover .a11y-stat-label,
+  .a11y-stat-jump:focus-visible .a11y-stat-label {
+    color: var(--ui-text-primary);
+  }
+
+  .a11y-stat-jump:hover i,
+  .a11y-stat-jump:focus-visible i {
+    opacity: 1;
+  }
+
   .a11y-stat-total {
     padding-left: 0;
     border-left: none;
@@ -127,23 +175,10 @@
     color: var(--ui-text-muted);
   }
 
-  .a11y-swatch {
-    flex: none;
-    width: var(--ui-space-8);
-    height: var(--ui-space-8);
-    border-radius: var(--ui-radius-full);
-  }
-
-  .property {
-    background: var(--ui-text-primary);
-  }
-
-  .code {
-    background: var(--ui-border-high);
-  }
-
-  .review {
-    border: 1px solid var(--ui-border-high);
+  .a11y-stat-fixed .a11y-stat-value,
+  .a11y-stat-fixed i,
+  .a11y-table td.fixed:not(.zero) {
+    color: var(--ui-fixed);
   }
 
   .a11y-table {
@@ -185,10 +220,6 @@
     color: var(--ui-text-muted);
   }
 
-  .bar-col {
-    width: 40%;
-  }
-
   .a11y-jump {
     display: inline-flex;
     align-items: center;
@@ -212,31 +243,4 @@
     text-decoration: underline;
     text-underline-offset: var(--ui-space-2);
   }
-
-  .a11y-bar {
-    display: flex;
-    gap: var(--ui-space-2);
-    height: var(--ui-space-8);
-    min-width: var(--ui-space-8);
-  }
-
-  .a11y-bar-part {
-    flex-basis: 0;
-    border-radius: var(--ui-radius-full);
-  }
-
-  .a11y-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
-
-  @media (max-width: 600px) {
-    .bar-col {
-      display: none;
-    }
-  }
 </style>

package/src/editor/ui/a11y/A11yPanel.svelte

@@ -4,7 +4,14 @@
   import { FLASH_DURATION_MS } from '../../core/flashStatus';
   import { getEditorContext, type RevealRequest } from '../../component-editor/scaffolding/editorContext';
   import A11yComponentIssues from './A11yComponentIssues.svelte';
-  import { accessibilityIssuesLabel, formatRunTime, issueCount, pendingA11yReveal } from './a11yView';
+  import {
+    accessibilityIssuesLabel,
+    fixedLabel,
+    formatRunTime,
+    issueCount,
+    pendingA11yReveal,
+    reviewLabel,
+  } from './a11yView';
 
   let { component }: { component: string } = $props();
   const titleId = $props.id();
@@ -14,6 +21,8 @@
   let panel: HTMLElement | undefined = $state();
   let issues = $derived($a11yIssues[component]);
   let count = $derived(issues ? issueCount(issues) : 0);
+  let fixedCount = $derived(issues?.fixed.length ?? 0);
+  let reviewCount = $derived(issues?.review.length ?? 0);
 
   /** Rendered rows for `variable`. The linked block can repeat a variant's row, so the variant's own row comes first. */
   function renderedRows(variable: string): HTMLElement[] {
@@ -70,11 +79,19 @@
   });
 </script>
 
-{#if issues && count > 0 && $a11yFinishedReport}
+{#if issues && count + fixedCount + reviewCount > 0 && $a11yFinishedReport}
   <section class="editor-section-card a11y-panel" aria-labelledby={titleId} bind:this={panel}>
     <header class="a11y-panel-head">
-      <i class="fa-solid fa-triangle-exclamation a11y-panel-mark" aria-hidden="true"></i>
-      <h3 id={titleId} class="a11y-panel-title">{accessibilityIssuesLabel(count)}</h3>
+      {#if count > 0}
+        <i class="fa-solid fa-triangle-exclamation a11y-panel-mark" aria-hidden="true"></i>
+        <h3 id={titleId} class="a11y-panel-title">{accessibilityIssuesLabel(count)}</h3>
+      {:else if reviewCount > 0}
+        <i class="fa-solid fa-eye a11y-panel-mark review" aria-hidden="true"></i>
+        <h3 id={titleId} class="a11y-panel-title">{reviewLabel(reviewCount)}</h3>
+      {:else}
+        <i class="fa-solid fa-check a11y-panel-mark fixed" aria-hidden="true"></i>
+        <h3 id={titleId} class="a11y-panel-title">{fixedLabel(fixedCount)}</h3>
+      {/if}
       <span class="a11y-panel-run">Last run {formatRunTime($a11yFinishedReport.finishedAt)}</span>
     </header>
     <A11yComponentIssues {component} {issues} withReview onreveal={reveal} />
@@ -113,6 +130,14 @@
     color: var(--ui-highlight);
   }
 
+  .a11y-panel-mark.fixed {
+    color: var(--ui-fixed);
+  }
+
+  .a11y-panel-mark.review {
+    color: var(--ui-text-tertiary);
+  }
+
   .a11y-panel-title {
     margin: 0;
     font-size: var(--ui-font-size-lg);

package/src/editor/ui/a11y/A11yPropertyMark.svelte

@@ -13,8 +13,12 @@
   let { variables, placement = 'inline' }: Props = $props();
 
   let findings = $derived([...new Set(variables.flatMap((variable) => $a11yPropertyFindings.get(variable) ?? []))]);
-  let review = $derived(findings.every((finding) => finding.rule === 'a11y-review'));
-  let label = $derived(review ? reviewLabel(findings.length) : accessibilityIssuesLabel(findings.length));
+  let reviewCount = $derived(findings.filter((finding) => finding.rule === 'a11y-review').length);
+  let review = $derived(reviewCount === findings.length);
+  let label = $derived([
+    review ? '' : accessibilityIssuesLabel(findings.length - reviewCount),
+    reviewCount > 0 ? reviewLabel(reviewCount) : '',
+  ].filter(Boolean).join(', '));
   let rows = $derived(findingRows([
     ...findings.filter((finding) => finding.rule !== 'a11y-review'),
     ...findings.filter((finding) => finding.rule === 'a11y-review'),
@@ -26,7 +30,7 @@
     <UIInfoPopover title={label} ariaLabel={label}>
       {#snippet trigger()}
         {#if review}
-          <span class="a11y-property-mark-glyph review" aria-hidden="true"></span>
+          <i class="fa-solid fa-eye a11y-property-mark-glyph review" aria-hidden="true"></i>
         {:else}
           <i class="fa-solid fa-triangle-exclamation a11y-property-mark-glyph" aria-hidden="true"></i>
         {/if}
@@ -63,12 +67,8 @@
     font-size: var(--ui-font-size-xs);
   }
 
-  /* The "?" is generated content because the contract harness matches rows by their text. */
-  .a11y-property-mark-glyph.review::after {
-    content: '?';
+  .a11y-property-mark-glyph.review {
     color: var(--ui-text-tertiary);
-    font-size: var(--ui-font-size-sm);
-    font-weight: var(--ui-font-weight-bold);
   }
 
   .a11y-property-findings {

package/src/editor/ui/a11y/A11yRailMark.svelte

@@ -2,16 +2,19 @@
   interface Props {
     /** `corner` overlaps the icon of a condensed rail, where the label and its inline mark are hidden. */
     placement?: 'inline' | 'corner';
+    /** Draws the eye of a component whose only results are to check by eye. */
+    review?: boolean;
   }
 
-  let { placement = 'inline' }: Props = $props();
-  const label = 'Accessibility issues';
+  let { placement = 'inline', review = false }: Props = $props();
+  let label = $derived(review ? 'Results to check by eye' : 'Accessibility issues');
+  let glyph = $derived(review ? 'fa-eye' : 'fa-triangle-exclamation');
 </script>
 
 {#if placement === 'inline'}
-  <i class="fa-solid fa-triangle-exclamation a11y-rail-mark" role="img" aria-label={label} title={label}></i>
+  <i class="fa-solid {glyph} a11y-rail-mark" class:review role="img" aria-label={label} title={label}></i>
 {:else}
-  <i class="fa-solid fa-triangle-exclamation a11y-rail-mark corner" aria-hidden="true"></i>
+  <i class="fa-solid {glyph} a11y-rail-mark corner" class:review aria-hidden="true"></i>
 {/if}
 
 <style>
@@ -21,6 +24,10 @@
     font-size: var(--ui-font-size-sm);
   }
 
+  .review {
+    color: var(--ui-text-tertiary);
+  }
+
   /* Bottom-right of the icon, clear of the unsaved dot at its top-right. */
   .corner {
     position: absolute;

package/src/editor/ui/a11y/AccessibilityTab.svelte

@@ -6,15 +6,17 @@
   import { unsavedEdits } from '../../core/store/unsavedEdits';
   import { listThemes } from '../../core/themes/themeService';
   import UIPillButton from '../UIPillButton.svelte';
+  import A11yByEye from './A11yByEye.svelte';
   import A11yComponentIssues from './A11yComponentIssues.svelte';
-  import A11yFindingRow from './A11yFindingRow.svelte';
   import A11yOverview from './A11yOverview.svelte';
   import {
     A11Y_REVIEW_SECTION,
     A11Y_RUN_SECTION,
     a11ySectionId,
     codeSpans,
-    componentsWithIssues,
+    componentSections,
+    componentsInReport,
+    fixedLabel,
     formatElapsed,
     formatRunTime,
     getA11yViewLink,
@@ -26,9 +28,9 @@
 
   const openView = getA11yViewLink();
 
-  let rows = $derived(componentsWithIssues($a11yIssues));
+  let tableRows = $derived(componentsInReport($a11yIssues));
+  let sectionRows = $derived(componentSections($a11yIssues));
   let review = $derived(reviewResults($a11yIssues));
-  let reviewTotal = $derived(rows.reduce((sum, row) => sum + row.issues.review.length, 0));
   let running = $derived($a11yReport?.state === 'running' ? $a11yReport : null);
   let failed = $derived($a11yReport?.state === 'failed' ? $a11yReport : null);
   let finished = $derived($a11yFinishedReport);
@@ -128,7 +130,7 @@
           </div>
         {/if}
       {/if}
-      {#if !notInstalled && rows.length === 0}
+      {#if !notInstalled && sectionRows.length === 0}
         <p class="a11y-summary">Every component passes the automated checks.</p>
       {/if}
     {:else if !running && !failed}
@@ -137,21 +139,28 @@
           Run test checks every component in the open theme as saved. It scans each one with axe and Alfa,
           presses the keys each one answers, and measures the contrast of every color pair.
         </p>
-        <p>A run takes about three minutes. The report stays here until the next run.</p>
+        <p>A run takes about three minutes. Each theme keeps its report until its next run.</p>
       </div>
     {/if}
   </section>
 
-  {#if rows.length > 0}
-    <A11yOverview {rows} onjump={(component) => openView?.(a11ySectionId(component))} />
+  {#if tableRows.length > 0}
+    <A11yOverview
+      rows={tableRows}
+      onjump={(component) => openView?.(a11ySectionId(component))}
+      onreview={() => openView?.(A11Y_REVIEW_SECTION)}
+    />
   {/if}
 
-  {#each rows as row (row.component)}
+  {#each sectionRows as row (row.component)}
     <section id={a11ySectionId(row.component)} class="editor-section-card a11y-component">
       <header class="a11y-component-head">
         <i class={row.icon} aria-hidden="true"></i>
         <h3 class="editor-subsection-title">{row.label}</h3>
-        <span class="a11y-count">{issuesLabel(row.count)}</span>
+        <span class="a11y-count">{[
+          row.count > 0 ? issuesLabel(row.count) : '',
+          row.issues.fixed.length > 0 ? fixedLabel(row.issues.fixed.length) : '',
+        ].filter(Boolean).join(', ')}</span>
         <UIPillButton
           size="compact"
           variant="outline"
@@ -166,32 +175,16 @@
         onreveal={(variable) => openComponentAt(row.component, variable)}
         onopen={() => openComponentAt(row.component)}
       />
-      {#if row.issues.review.length > 0}
+      {#if row.review > 0}
         <button type="button" class="a11y-review-link" onclick={() => openView?.(A11Y_REVIEW_SECTION)}>
-          {reviewLabel(row.issues.review.length)}
+          {reviewLabel(row.review)}
         </button>
       {/if}
     </section>
   {/each}
 
   {#if review.length > 0}
-    <section id={A11Y_REVIEW_SECTION} class="a11y-review">
-      <details class="a11y-disclosure">
-        <summary>{reviewLabel(reviewTotal)}</summary>
-        <ul class="a11y-review-list">
-          {#each review as { component, label, row }, i (i)}
-            <A11yFindingRow
-              {component}
-              {row}
-              review
-              prefix={label}
-              onreveal={(variable) => openComponentAt(component, variable)}
-              onopen={() => openComponentAt(component)}
-            />
-          {/each}
-        </ul>
-      </details>
-    </section>
+    <A11yByEye />
   {/if}
 </div>
 
@@ -321,12 +314,6 @@
     color: var(--ui-text-primary);
   }
 
-  .a11y-review-list {
-    margin: var(--ui-space-8) 0 0;
-    padding: 0;
-    list-style: none;
-  }
-
   .a11y-tab code {
     font-family: var(--ui-font-mono);
     font-size: var(--ui-font-size-sm);

package/src/editor/ui/a11y/a11yView.ts

@@ -84,18 +84,24 @@ export function accessibilityIssuesLabel(count: number): string {
   return `${count} accessibility ${count === 1 ? 'issue' : 'issues'}`;
 }
 
+export function fixedLabel(count: number): string {
+  return `${count} ${count === 1 ? 'issue' : 'issues'} fixed`;
+}
+
 export function reviewLabel(count: number): string {
   return `${count} ${count === 1 ? 'result' : 'results'} to check by eye`;
 }
 
-/** Every finding of the run counts, results to check by eye included (decision 6). */
+/** The findings a fix clears. A result to check by eye counts apart, since only a person can settle it. */
 export function issueCount(issues: ComponentA11yIssues): number {
-  return issues.contrast.length + issues.property.length + issues.code.length + issues.review.length;
+  return issues.contrast.length + issues.property.length + issues.code.length;
 }
 
 /** One panel row: the findings that share an engine rule, a help text and the properties they trace to. */
 export interface A11yFindingRow {
   finding: A11yFinding;
+  /** Every finding the row merges, `finding` first. */
+  findings: A11yFinding[];
   targets: string[];
   views: string;
   variables: string[];
@@ -131,6 +137,7 @@ export function findingRows(findings: A11yFinding[]): A11yFindingRow[] {
   }
   return [...rows.values()].map((group) => ({
     finding: group[0],
+    findings: group,
     targets: [...new Set(group.flatMap((f) => (f.details ? [f.details.target] : [])))],
     views: group.length === 1 ? (group[0].details?.view ?? '') : mergeViews(group.map((f) => f.details?.view)),
     variables: group[0].details?.variables ?? [],
@@ -155,24 +162,56 @@ export interface A11yComponentRow {
   component: string;
   label: string;
   icon: string;
+  /** `issueCount`: the findings a fix clears. */
   count: number;
+  /** The results to check by eye no one has marked. */
+  review: number;
   issues: ComponentA11yIssues;
 }
 
-/** Every registered component with a finding, in the component rail's order. */
-export function componentsWithIssues(all: Record<string, ComponentA11yIssues>): A11yComponentRow[] {
+function componentRows(
+  all: Record<string, ComponentA11yIssues>,
+  listed: (row: A11yComponentRow) => boolean,
+): A11yComponentRow[] {
   return getComponentRegistryEntries().flatMap(({ id, label, icon }) => {
     const issues = all[id];
-    const count = issues ? issueCount(issues) : 0;
-    return count > 0 ? [{ component: id, label, icon, count, issues }] : [];
+    if (!issues) return [];
+    const row = { component: id, label, icon, count: issueCount(issues), review: issues.review.length, issues };
+    return listed(row) ? [row] : [];
   });
 }
 
-/** Every result to check by eye, merged into rows per component, in the rail's order. */
-export function reviewResults(all: Record<string, ComponentA11yIssues>): { component: string; label: string; row: A11yFindingRow }[] {
-  return getComponentRegistryEntries().flatMap(({ id, label }) =>
-    findingRows(all[id]?.review ?? []).map((row) => ({ component: id, label, row })),
-  );
+/** Every registered component with an issue or an unmarked result to check by eye, in the component rail's order. */
+export function componentsWithIssues(all: Record<string, ComponentA11yIssues>): A11yComponentRow[] {
+  return componentRows(all, (row) => row.count > 0 || row.review > 0);
+}
+
+/** Every registered component the overview table lists: an issue, a fix, or an unmarked result to check by eye.
+ *  A result marked as looking right is acknowledged, so it alone lists nothing. */
+export function componentsInReport(all: Record<string, ComponentA11yIssues>): A11yComponentRow[] {
+  return componentRows(all, (row) => row.count > 0 || row.review > 0 || row.issues.fixed.length > 0);
+}
+
+/** Every component with its own section in the Accessibility view: an issue or a fix. The By eye list holds the rest. */
+export function componentSections(all: Record<string, ComponentA11yIssues>): A11yComponentRow[] {
+  return componentRows(all, (row) => row.count > 0 || row.issues.fixed.length > 0);
+}
+
+export interface A11yReviewResult {
+  component: string;
+  label: string;
+  row: A11yFindingRow;
+  confirmed: boolean;
+}
+
+/** Every result to check by eye, merged into rows per component in the rail's order, the unmarked ones first. */
+export function reviewResults(all: Record<string, ComponentA11yIssues>): A11yReviewResult[] {
+  const entries = getComponentRegistryEntries();
+  const results = (confirmed: boolean) =>
+    entries.flatMap(({ id, label }) =>
+      findingRows((confirmed ? all[id]?.confirmed : all[id]?.review) ?? []).map((row) => ({ component: id, label, row, confirmed })),
+    );
+  return [...results(false), ...results(true)];
 }
 
 /** The words of `variable` after the component's prefix that `label` lacks,

package/src/live-tokens/data/colors-and-type/halloween.json

@@ -897,7 +897,7 @@
         },
         {
           "position": 100,
-          "paletteLabel": "700"
+          "paletteLabel": "800"
         }
       ],
       "gradientSize": "window"