@motion-proto/live-tokens 0.97.0 → 0.99.0

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

@@ -0,0 +1,121 @@
+<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';
+  import A11yIssueRow from './A11yIssueRow.svelte';
+  import { findingRows, propertyLabel } from './a11yView';
+
+  interface Props {
+    component: string;
+    issues: ComponentA11yIssues;
+    /** Lists the results to check by eye as a third group. The Accessibility view lists them apart. */
+    withReview?: boolean;
+    onreveal?: (variable: string) => void;
+    /** Opens the component, for a row that traced no property. Absent on the component's own page. */
+    onopen?: () => void;
+  }
+
+  let { component, issues, withReview = false, onreveal, onopen }: Props = $props();
+
+  let propertyRows = $derived(findingRows(issues.property));
+  let codeRows = $derived(findingRows(issues.code));
+  let reviewRows = $derived(withReview ? findingRows(issues.review) : []);
+</script>
+
+{#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)}
+        {@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}
+
+{#if codeRows.length > 0}
+  <div class="a11y-group">
+    <h4 class="a11y-group-title">Fix in the component's code</h4>
+    <ul class="a11y-issues">
+      {#each codeRows as row, i (i)}
+        <A11yFindingRow {component} {row} {onreveal} {onopen} />
+      {/each}
+    </ul>
+  </div>
+{/if}
+
+{#if reviewRows.length > 0}
+  <div class="a11y-group">
+    <h4 class="a11y-group-title">Check by eye</h4>
+    <ul class="a11y-issues">
+      {#each reviewRows as row, i (i)}
+        <A11yFindingRow {component} {row} review {onreveal} {onopen} />
+      {/each}
+    </ul>
+  </div>
+{/if}
+
+<style>
+  .a11y-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+  }
+
+  .a11y-group + .a11y-group {
+    margin-top: var(--ui-space-12);
+  }
+
+  .a11y-group-title {
+    margin: 0;
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-secondary);
+  }
+
+  .a11y-group code {
+    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;
+    list-style: none;
+  }
+</style>

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

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { confirmReview } from '../../core/a11y/a11yReport';
+  import UIPillButton from '../UIPillButton.svelte';
+  import A11yIssueRow from './A11yIssueRow.svelte';
+  import {
+    componentLabel,
+    elementsLabel,
+    findingText,
+    guidanceLabel,
+    propertyLabel,
+    type A11yFindingRow,
+  } from './a11yView';
+
+  interface Props {
+    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, 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 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()}
+  {#if properties.length > 0 && onreveal}
+    {#each properties as { variable, label } (variable)}
+      <button type="button" class="a11y-link" aria-label={`Go to ${label}`} title={variable} onclick={() => onreveal(variable)}>
+        {label} <i class="fas fa-arrow-right" aria-hidden="true"></i>
+      </button>
+    {/each}
+  {:else if onopen}
+    <button type="button" class="a11y-link" onclick={onopen}>
+      Open {componentLabel(component)} <i class="fas fa-arrow-right" aria-hidden="true"></i>
+    </button>
+  {/if}
+{/snippet}
+
+<A11yIssueRow
+  {review}
+  {confirmed}
+  href={helpUrl}
+  linkLabel={helpUrl ? guidanceLabel(helpUrl) : 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

@@ -0,0 +1,152 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  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;
+    children: Snippet;
+    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, confirmed = false, fixed = false, href, linkLabel = 'Guidance', children, detail, links, action }: Props = $props();
+</script>
+
+<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 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);
+    min-width: 0;
+  }
+
+  .a11y-issue-action {
+    flex: none;
+    align-self: flex-start;
+  }
+
+  .a11y-issue + :global(.a11y-issue) {
+    border-top: 1px solid var(--ui-border-low);
+  }
+
+  .a11y-issue-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-space-8) var(--ui-space-16);
+  }
+
+  .a11y-issue-text,
+  .a11y-issue-detail {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .a11y-issue-text {
+    flex: 1 1 16rem;
+    min-width: 0;
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-highlight);
+  }
+
+  .review .a11y-issue-text {
+    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);
+  }
+
+  .a11y-issue-links {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-space-6);
+    margin-left: auto;
+  }
+
+  .a11y-issue-links :global(.a11y-link) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    padding: var(--ui-space-2) var(--ui-space-10);
+    background: none;
+    border: 1px solid var(--ui-border);
+    border-radius: var(--ui-radius-full);
+    font: inherit;
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background var(--ui-transition-fast), border-color var(--ui-transition-fast), color var(--ui-transition-fast);
+  }
+
+  .a11y-issue-links :global(.a11y-link:hover) {
+    background: var(--ui-surface-higher);
+    border-color: var(--ui-border-high);
+    color: var(--ui-text-primary);
+  }
+
+  .a11y-issue-links :global(.a11y-link i) {
+    font-size: var(--ui-font-size-xs);
+  }
+</style>