@motion-proto/live-tokens 0.98.2 → 0.99.0

package/src/editor/pages/EditorShell.svelte

@@ -14,6 +14,7 @@
     A11Y_REVIEW_SECTION,
     A11Y_RUN_SECTION,
     a11ySectionId,
+    componentSections,
     componentsWithIssues,
     issuesLabel,
     setA11yViewLink,
@@ -135,12 +136,13 @@
   let screenBarHeight = $state(0);
 
   let a11yComponentNavItems: NavItem[] = $derived(
-    componentsWithIssues($a11yIssues).map(({ component, label, icon, count }) => ({
+    componentSections($a11yIssues).map(({ component, label, icon, count }) => ({
       id: a11ySectionId(component), label, icon, count,
     })),
   );
-  let a11yMarked = $derived(new Set(componentsWithIssues($a11yIssues).map((row) => row.component)));
-  let a11yHasReview = $derived(Object.values($a11yIssues).some((issues) => issues.review.length > 0));
+  /** Each marked component, true when its only results are to check by eye. A result marked as looking right marks nothing. */
+  let a11yMarked = $derived(new Map(componentsWithIssues($a11yIssues).map((row) => [row.component, row.count === 0])));
+  let a11yHasReview = $derived(Object.values($a11yIssues).some((issues) => issues.review.length + issues.confirmed.length > 0));
 
   // The narrow layout shows one section at a time, so the run section and the
   // check-by-eye line join the component sections the rail lists.
@@ -255,7 +257,7 @@
               onclick={() => pickSection(item.id)}
             >
               <i class={item.icon}></i>
-              <span class="nav-label">{#if $editorView === 'components' && a11yMarked.has(item.id)}<A11yRailMark />{/if}{item.label}</span>
+              <span class="nav-label">{#if $editorView === 'components' && a11yMarked.has(item.id)}<A11yRailMark review={a11yMarked.get(item.id)} />{/if}{item.label}</span>
               {#if item.count !== undefined}
                 <span class="nav-count">{item.count}</span>
               {/if}
@@ -382,12 +384,12 @@
               onclick={() => selectComponent(item.id)}
             >
               <i class={item.icon}></i>
-              <span class="nav-label">{#if a11yMarked.has(item.id)}<A11yRailMark />{/if}{item.label}</span>
+              <span class="nav-label">{#if a11yMarked.has(item.id)}<A11yRailMark review={a11yMarked.get(item.id)} />{/if}{item.label}</span>
               {#if $componentDirty[item.id]}
                 <span class="dirty-dot" aria-label="Unsaved changes" title="Unsaved changes"></span>
               {/if}
               {#if condensed && a11yMarked.has(item.id)}
-                <A11yRailMark placement="corner" />
+                <A11yRailMark placement="corner" review={a11yMarked.get(item.id)} />
               {/if}
             </button>
           {/each}
@@ -405,12 +407,12 @@
                 onclick={() => selectComponent(item.id)}
               >
                 <i class={item.icon}></i>
-                <span class="nav-label">{#if a11yMarked.has(item.id)}<A11yRailMark />{/if}{item.label}</span>
+                <span class="nav-label">{#if a11yMarked.has(item.id)}<A11yRailMark review={a11yMarked.get(item.id)} />{/if}{item.label}</span>
                 {#if $componentDirty[item.id]}
                   <span class="dirty-dot" aria-label="Unsaved changes" title="Unsaved changes"></span>
                 {/if}
                 {#if condensed && a11yMarked.has(item.id)}
-                  <A11yRailMark placement="corner" />
+                  <A11yRailMark placement="corner" review={a11yMarked.get(item.id)} />
                 {/if}
               </button>
             {/each}

package/src/editor/styles/ui-editor.css

@@ -49,6 +49,8 @@
 
   /* Shared "this is live" amber: selection, focus, dirty state. */
   --ui-highlight:       #ffac28;
+  /* An accessibility failure the editor now measures as passing. */
+  --ui-fixed:           #5fd38d;
 
   /* Link-state bar: active = attached to control edge, broken = popped into column gap. */
   --ui-link-active:       #6cd0c2;

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

@@ -0,0 +1,264 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { a11yIssues, confirmReview } from '../../core/a11y/a11yReport';
+  import UIPillButton from '../UIPillButton.svelte';
+  import A11yFindingRow from './A11yFindingRow.svelte';
+  import { A11Y_REVIEW_SECTION, openComponentAt, reviewResults, type A11yReviewResult } from './a11yView';
+
+  const titleId = $props.id();
+
+  let results = $derived(reviewResults($a11yIssues));
+  let open = $derived(results.filter((r) => !r.confirmed));
+  let confirmed = $derived(results.filter((r) => r.confirmed));
+  let tally = $derived(
+    [open.length > 0 ? `${open.length} to check` : '', confirmed.length > 0 ? `${confirmed.length} look right` : '']
+      .filter(Boolean)
+      .join(', '),
+  );
+  let done = $derived(results.length > 0 ? confirmed.length / results.length : 0);
+
+  let openList: HTMLUListElement | undefined = $state();
+  let confirmedList: HTMLUListElement | undefined = $state();
+  let heading: HTMLElement | undefined = $state();
+  let markingAll = $state(false);
+  let markAllError: string | null = $state(null);
+
+  const keyOf = (r: A11yReviewResult) => `${r.component}\n${r.row.findings.map((f) => f.message).join('\n')}`;
+
+  /** Moves focus to the toggle that took the pressed row's place, so Enter or Space walks the list. */
+  async function focusAt(list: HTMLUListElement | undefined, index: number) {
+    await tick();
+    const toggles = [...(list?.querySelectorAll<HTMLButtonElement>('.a11y-confirm button') ?? [])];
+    (toggles[index] ?? toggles[index - 1] ?? heading)?.focus();
+  }
+
+  async function markAll() {
+    markingAll = true;
+    markAllError = null;
+    try {
+      await confirmReview(open.flatMap((r) => r.row.findings), true);
+      await focusAt(undefined, 0);
+    } catch (err) {
+      markAllError = (err as Error).message;
+    } finally {
+      markingAll = false;
+    }
+  }
+</script>
+
+<section id={A11Y_REVIEW_SECTION} class="editor-section-card a11y-byeye" aria-labelledby={titleId}>
+  <header class="a11y-byeye-head">
+    <i class="fa-solid fa-eye a11y-byeye-mark" aria-hidden="true"></i>
+    <h3 id={titleId} class="editor-subsection-title" tabindex="-1" bind:this={heading}>Check by eye</h3>
+    <span class="a11y-byeye-tally">{tally}</span>
+    {#if open.length > 0}
+      <UIPillButton size="compact" variant="outline" icon="fa-check-double" disabled={markingAll} onclick={markAll}>
+        Mark all as looking right
+      </UIPillButton>
+    {/if}
+  </header>
+
+  <div
+    class="a11y-byeye-meter"
+    role="progressbar"
+    aria-label="Results marked as looking right"
+    aria-valuemin={0}
+    aria-valuemax={results.length}
+    aria-valuenow={confirmed.length}
+  >
+    <span class="a11y-byeye-meter-fill" style:transform={`scaleX(${done})`}></span>
+  </div>
+
+  {#if markAllError}
+    <p class="a11y-byeye-error" role="alert">{markAllError}</p>
+  {/if}
+
+  {#if open.length > 0}
+    <p class="a11y-byeye-lead">
+      The tools could not decide these. Judge each element against its help, then press <strong>Looks right</strong>.
+      The next result moves up under the same button.
+    </p>
+    <ul class="a11y-byeye-list" bind:this={openList}>
+      {#each open as result, i (keyOf(result))}
+        <A11yFindingRow
+          component={result.component}
+          row={result.row}
+          review
+          prefix={result.label}
+          onreveal={(variable) => openComponentAt(result.component, variable)}
+          onopen={() => openComponentAt(result.component)}
+          onconfirmchange={() => focusAt(openList, i)}
+        />
+      {/each}
+    </ul>
+  {:else}
+    <p class="a11y-byeye-clear">
+      <i class="fa-solid fa-circle-check" aria-hidden="true"></i>
+      Every result looks right. Open <strong>Looks right</strong> below to check one again.
+    </p>
+  {/if}
+
+  {#if confirmed.length > 0}
+    <details class="a11y-byeye-done">
+      <summary class="a11y-byeye-group">
+        <i class="fa-solid fa-chevron-right a11y-byeye-chevron" aria-hidden="true"></i>
+        Looks right
+        <span class="a11y-byeye-group-count">{confirmed.length}</span>
+      </summary>
+      <ul class="a11y-byeye-list" bind:this={confirmedList}>
+        {#each confirmed as result, i (keyOf(result))}
+          <A11yFindingRow
+            component={result.component}
+            row={result.row}
+            review
+            confirmed
+            prefix={result.label}
+            onreveal={(variable) => openComponentAt(result.component, variable)}
+            onopen={() => openComponentAt(result.component)}
+            onconfirmchange={() => focusAt(confirmedList, i)}
+          />
+        {/each}
+      </ul>
+    </details>
+  {/if}
+</section>
+
+<style>
+  .a11y-byeye {
+    gap: var(--ui-space-12);
+  }
+
+  .a11y-byeye-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-space-8) var(--ui-space-12);
+    color: var(--ui-text-primary);
+  }
+
+  .a11y-byeye-head :global(.ui-pill) {
+    margin-left: auto;
+  }
+
+  .a11y-byeye-head h3:focus {
+    outline: none;
+  }
+
+  .a11y-byeye-mark {
+    color: var(--ui-text-tertiary);
+  }
+
+  .a11y-byeye-tally {
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-tertiary);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .a11y-byeye-meter {
+    height: 2px;
+    overflow: hidden;
+    background: var(--ui-border-low);
+    border-radius: var(--ui-radius-full);
+  }
+
+  .a11y-byeye-meter-fill {
+    display: block;
+    height: 100%;
+    background: var(--ui-text-primary);
+    transform-origin: left;
+    transition: transform 240ms ease;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .a11y-byeye-meter-fill {
+      transition: none;
+    }
+  }
+
+  .a11y-byeye-lead,
+  .a11y-byeye-clear,
+  .a11y-byeye-error {
+    margin: 0;
+    font-size: var(--ui-font-size-sm);
+  }
+
+  .a11y-byeye-lead {
+    color: var(--ui-text-tertiary);
+  }
+
+  .a11y-byeye-lead strong,
+  .a11y-byeye-clear strong {
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-secondary);
+  }
+
+  .a11y-byeye-clear {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-12) 0;
+    color: var(--ui-text-secondary);
+  }
+
+  .a11y-byeye-error {
+    color: var(--ui-highlight);
+  }
+
+  .a11y-byeye-done {
+    margin-top: var(--ui-space-12);
+    border-top: 1px solid var(--ui-border);
+  }
+
+  .a11y-byeye-group {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+    padding-top: var(--ui-space-12);
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-secondary);
+    list-style: none;
+    cursor: pointer;
+    transition: color var(--ui-transition-fast);
+  }
+
+  .a11y-byeye-group::-webkit-details-marker {
+    display: none;
+  }
+
+  .a11y-byeye-group:hover {
+    color: var(--ui-text-primary);
+  }
+
+  .a11y-byeye-chevron {
+    font-size: var(--ui-font-size-xs);
+    transition: transform var(--ui-transition-fast);
+  }
+
+  .a11y-byeye-done[open] .a11y-byeye-chevron {
+    transform: rotate(90deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .a11y-byeye-chevron {
+      transition: none;
+    }
+  }
+
+  .a11y-byeye-group-count {
+    font-weight: var(--ui-font-weight-normal);
+    color: var(--ui-text-tertiary);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .a11y-byeye-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .a11y-byeye-list :global(code) {
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-font-size-sm);
+  }
+</style>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { ComponentA11yIssues } from '../../core/a11y/a11yReport';
+  import type { A11yContrastFailure } from '../../core/a11y/a11yReportTypes';
   import { CONTRAST_RULES } from '../../core/palettes/contrast';
   import { formatFloor, formatRatio } from '../contrastReadout';
   import A11yFindingRow from './A11yFindingRow.svelte';
@@ -23,30 +24,42 @@
   let reviewRows = $derived(withReview ? findingRows(issues.review) : []);
 </script>
 
-{#if issues.contrast.length > 0 || propertyRows.length > 0}
+{#snippet contrastRow(failure: A11yContrastFailure, fixedRatio: number | undefined)}
+  {@const label = propertyLabel(component, failure.variable) ?? failure.variable}
+  {@const rule = CONTRAST_RULES[failure.role]}
+  <A11yIssueRow fixed={fixedRatio !== undefined} href={rule.url} linkLabel={`Success criterion ${rule.criterion}`}>
+    {#if fixedRatio === undefined}
+      {label} {formatRatio(failure.ratio)}, needs {formatFloor(failure.floor)}
+    {:else}
+      <i class="fa-solid fa-check a11y-fixed-mark" aria-hidden="true"></i>
+      {label} {formatRatio(failure.ratio)} → {formatRatio(fixedRatio)}, meets {formatFloor(failure.floor)}
+    {/if}
+    {#snippet detail()}
+      <code>{failure.variable}</code>{#if failure.context}, {failure.context}{/if}
+    {/snippet}
+    {#snippet links()}
+      {#if onreveal}
+        <button type="button" class="a11y-link" aria-label={`Go to ${label}`} title={failure.variable} onclick={() => onreveal(failure.variable)}>
+          {label} <i class="fas fa-arrow-right" aria-hidden="true"></i>
+        </button>
+      {/if}
+    {/snippet}
+  </A11yIssueRow>
+{/snippet}
+
+{#if issues.contrast.length > 0 || propertyRows.length > 0 || issues.fixed.length > 0}
   <div class="a11y-group">
     <h4 class="a11y-group-title">Fix with a property</h4>
     <ul class="a11y-issues">
       {#each issues.contrast as failure, i (i)}
-        {@const label = propertyLabel(component, failure.variable) ?? failure.variable}
-        {@const rule = CONTRAST_RULES[failure.role]}
-        <A11yIssueRow href={rule.url} linkLabel={`Success criterion ${rule.criterion}`}>
-          {label} {formatRatio(failure.ratio)}, needs {formatFloor(failure.floor)}
-          {#snippet detail()}
-            <code>{failure.variable}</code>{#if failure.context}, {failure.context}{/if}
-          {/snippet}
-          {#snippet links()}
-            {#if onreveal}
-              <button type="button" class="a11y-link" aria-label={`Go to ${label}`} title={failure.variable} onclick={() => onreveal(failure.variable)}>
-                {label} <i class="fas fa-arrow-right" aria-hidden="true"></i>
-              </button>
-            {/if}
-          {/snippet}
-        </A11yIssueRow>
+        {@render contrastRow(failure, undefined)}
       {/each}
       {#each propertyRows as row, i (i)}
         <A11yFindingRow {component} {row} {onreveal} {onopen} />
       {/each}
+      {#each issues.fixed as { failure, ratio }, i (i)}
+        {@render contrastRow(failure, ratio)}
+      {/each}
     </ul>
   </div>
 {/if}
@@ -95,6 +108,11 @@
     font-family: var(--ui-font-mono);
   }
 
+  .a11y-fixed-mark {
+    margin-right: var(--ui-space-4);
+    font-size: var(--ui-font-size-sm);
+  }
+
   .a11y-issues {
     margin: 0;
     padding: 0;

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { confirmReview } from '../../core/a11y/a11yReport';
+  import UIPillButton from '../UIPillButton.svelte';
   import A11yIssueRow from './A11yIssueRow.svelte';
   import {
     componentLabel,
@@ -13,23 +15,61 @@
     component: string;
     row: A11yFindingRow;
     review?: boolean;
+    /** A result to check by eye that someone marked as looking right. */
+    confirmed?: boolean;
     /** Leads the text, as the component's name does in a list that spans components. */
     prefix?: string;
     onreveal?: (variable: string) => void;
     /** Opens the component, for a row that traced no property. Absent on the component's own page. */
     onopen?: () => void;
+    /** Runs once a press of Looks right has saved, with the row's new state. */
+    onconfirmchange?: (confirmed: boolean) => void;
   }
 
-  let { component, row, review = false, prefix, onreveal, onopen }: Props = $props();
+  let { component, row, review = false, confirmed = false, prefix, onreveal, onopen, onconfirmchange }: Props = $props();
 
   let properties = $derived(row.variables.map((variable) => ({ variable, label: propertyLabel(component, variable) ?? variable })));
   let where = $derived([row.targets.length > 1 ? elementsLabel(row.targets.length) : '', row.views].filter(Boolean).join(', '));
   let helpUrl = $derived(row.finding.details?.helpUrl);
-  let hasLinks = $derived((properties.length > 0 && onreveal !== undefined) || (properties.length === 0 && onopen !== undefined));
+  let hasNavigation = $derived((properties.length > 0 && onreveal !== undefined) || (properties.length === 0 && onopen !== undefined));
+
+  let saving = $state(false);
+  let saveError: string | null = $state(null);
+
+  async function toggleConfirmed() {
+    saving = true;
+    saveError = null;
+    // Read before the save: the save moves the row to the other list, which unmounts this one.
+    const next = !confirmed;
+    const done = onconfirmchange;
+    try {
+      await confirmReview(row.findings, next);
+      done?.(next);
+    } catch (err) {
+      saveError = (err as Error).message;
+    } finally {
+      saving = false;
+    }
+  }
 </script>
 
 {#snippet location()}
   {#if row.targets.length === 1}<code>{row.targets[0]}</code>{#if row.views}{`, ${row.views}`}{/if}{:else}{where}{/if}
+  {#if saveError}<span class="a11y-confirm-error" role="alert">{saveError}</span>{/if}
+{/snippet}
+
+{#snippet confirmToggle()}
+  <span class="a11y-confirm">
+    <UIPillButton
+      size="compact"
+      variant="outline"
+      icon={confirmed ? 'fa-circle-check' : 'fa-check'}
+      ariaPressed={confirmed}
+      disabled={saving}
+      title={confirmed ? 'Marked as looking right. Press to clear the mark.' : 'Mark this result as looking right'}
+      onclick={toggleConfirmed}
+    >Looks right</UIPillButton>
+  </span>
 {/snippet}
 
 {#snippet links()}
@@ -48,10 +88,32 @@
 
 <A11yIssueRow
   {review}
+  {confirmed}
   href={helpUrl}
   linkLabel={helpUrl ? guidanceLabel(helpUrl) : undefined}
-  detail={row.targets.length > 0 || row.views ? location : undefined}
-  links={hasLinks ? links : undefined}
+  detail={row.targets.length > 0 || row.views || saveError ? location : undefined}
+  links={hasNavigation ? links : undefined}
+  action={review ? confirmToggle : undefined}
 >
+  {#if review}<i class="fa-solid {confirmed ? 'fa-check' : 'fa-eye'} a11y-review-mark" aria-hidden="true"></i>{/if}
   {#if prefix}{prefix}: {/if}{findingText(row.finding)}
 </A11yIssueRow>
+
+<style>
+  .a11y-review-mark {
+    margin-right: var(--ui-space-4);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-tertiary);
+  }
+
+  .a11y-confirm-error {
+    margin-left: var(--ui-space-8);
+    color: var(--ui-highlight);
+  }
+
+  /* One width for both states, so a column of toggles lines up. */
+  .a11y-confirm :global(.ui-pill) {
+    min-width: 8.5rem;
+    justify-content: center;
+  }
+</style>

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

@@ -4,6 +4,10 @@
   interface Props {
     /** A result to check by eye: its text in grey, where an issue's is amber. */
     review?: boolean;
+    /** A result to check by eye marked as looking right: its text dimmer still. */
+    confirmed?: boolean;
+    /** An issue the editor now measures as passing: its text in green. */
+    fixed?: boolean;
     href?: string;
     /** Names what `href` points at, such as "Rule" or "Success criterion 1.4.11". */
     linkLabel?: string;
@@ -11,44 +15,63 @@
     detail?: Snippet;
     /** The in-editor links that lead the link group, such as the traced properties. */
     links?: Snippet;
+    /** Sits in its own column at the row's right edge, so it keeps its place from row to row. */
+    action?: Snippet;
   }
 
-  let { review = false, href, linkLabel = 'Guidance', children, detail, links }: Props = $props();
+  let { review = false, confirmed = false, fixed = false, href, linkLabel = 'Guidance', children, detail, links, action }: Props = $props();
 </script>
 
-<li class="a11y-issue" class:review>
-  <div class="a11y-issue-head">
-    <p class="a11y-issue-text">{@render children()}</p>
-    {#if links || href}
-      <div class="a11y-issue-links">
-        {@render links?.()}
-        {#if href}
-          <a
-            class="a11y-link a11y-issue-guidance"
-            {href}
-            target="_blank"
-            rel="noopener"
-            title={href}
-            aria-label={`${linkLabel} (opens in a new tab)`}
-          >
-            {linkLabel}
-            <i class="fas fa-arrow-up-right-from-square" aria-hidden="true"></i>
-          </a>
-        {/if}
-      </div>
+<li class="a11y-issue" class:review class:confirmed class:fixed>
+  <div class="a11y-issue-body">
+    <div class="a11y-issue-head">
+      <p class="a11y-issue-text">{@render children()}</p>
+      {#if links || href}
+        <div class="a11y-issue-links">
+          {@render links?.()}
+          {#if href}
+            <a
+              class="a11y-link a11y-issue-guidance"
+              {href}
+              target="_blank"
+              rel="noopener"
+              title={href}
+              aria-label={`${linkLabel} (opens in a new tab)`}
+            >
+              {linkLabel}
+              <i class="fas fa-arrow-up-right-from-square" aria-hidden="true"></i>
+            </a>
+          {/if}
+        </div>
+      {/if}
+    </div>
+    {#if detail}
+      <p class="a11y-issue-detail">{@render detail()}</p>
     {/if}
   </div>
-  {#if detail}
-    <p class="a11y-issue-detail">{@render detail()}</p>
+  {#if action}
+    <div class="a11y-issue-action">{@render action()}</div>
   {/if}
 </li>
 
 <style>
   .a11y-issue {
     display: flex;
+    gap: var(--ui-space-16);
+    padding: var(--ui-space-12) 0;
+  }
+
+  .a11y-issue-body {
+    display: flex;
+    flex: 1;
     flex-direction: column;
     gap: var(--ui-space-4);
-    padding: var(--ui-space-12) 0;
+    min-width: 0;
+  }
+
+  .a11y-issue-action {
+    flex: none;
+    align-self: flex-start;
   }
 
   .a11y-issue + :global(.a11y-issue) {
@@ -79,6 +102,14 @@
     color: var(--ui-text-secondary);
   }
 
+  .confirmed .a11y-issue-text {
+    color: var(--ui-text-tertiary);
+  }
+
+  .fixed .a11y-issue-text {
+    color: var(--ui-fixed);
+  }
+
   .a11y-issue-detail {
     font-size: var(--ui-font-size-sm);
     color: var(--ui-text-tertiary);