@motion-proto/live-tokens 0.96.0 → 0.98.2

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

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import type { ComponentA11yIssues } from '../../core/a11y/a11yReport';
+  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>
+
+{#if issues.contrast.length > 0 || propertyRows.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>
+      {/each}
+      {#each propertyRows as row, i (i)}
+        <A11yFindingRow {component} {row} {onreveal} {onopen} />
+      {/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-issues {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+</style>

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import A11yIssueRow from './A11yIssueRow.svelte';
+  import {
+    componentLabel,
+    elementsLabel,
+    findingText,
+    guidanceLabel,
+    propertyLabel,
+    type A11yFindingRow,
+  } from './a11yView';
+
+  interface Props {
+    component: string;
+    row: A11yFindingRow;
+    review?: 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;
+  }
+
+  let { component, row, review = false, prefix, onreveal, onopen }: 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));
+</script>
+
+{#snippet location()}
+  {#if row.targets.length === 1}<code>{row.targets[0]}</code>{#if row.views}{`, ${row.views}`}{/if}{:else}{where}{/if}
+{/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}
+  href={helpUrl}
+  linkLabel={helpUrl ? guidanceLabel(helpUrl) : undefined}
+  detail={row.targets.length > 0 || row.views ? location : undefined}
+  links={hasLinks ? links : undefined}
+>
+  {#if prefix}{prefix}: {/if}{findingText(row.finding)}
+</A11yIssueRow>

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

@@ -0,0 +1,121 @@
+<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;
+    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;
+  }
+
+  let { review = false, href, linkLabel = 'Guidance', children, detail, links }: 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>
+    {/if}
+  </div>
+  {#if detail}
+    <p class="a11y-issue-detail">{@render detail()}</p>
+  {/if}
+</li>
+
+<style>
+  .a11y-issue {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+    padding: var(--ui-space-12) 0;
+  }
+
+  .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);
+  }
+
+  .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>

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

@@ -0,0 +1,242 @@
+<script lang="ts">
+  import { issueTotals, issuesLabel, type A11yComponentRow, type A11yIssueTotals } from './a11yView';
+
+  interface Props {
+    rows: A11yComponentRow[];
+    onjump: (component: string) => void;
+  }
+
+  let { rows, onjump }: Props = $props();
+
+  const KINDS: { key: keyof A11yIssueTotals; label: string; column: string }[] = [
+    { key: 'property', label: 'Fix with a property', column: 'Property' },
+    { key: 'code', label: "Fix in the component's code", column: 'Code' },
+    { key: 'review', label: 'Check by eye', column: 'By eye' },
+  ];
+
+  let tallies = $derived(rows.map((row) => ({ row, totals: issueTotals(row.issues) })));
+  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)));
+</script>
+
+<section class="editor-section-card a11y-overview" aria-label="Overview">
+  <div class="a11y-stats">
+    <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'}
+      </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>
+        <span class="a11y-stat-label">
+          <span class="a11y-swatch {kind.key}" aria-hidden="true"></span>{kind.label}
+        </span>
+      </div>
+    {/each}
+  </div>
+
+  <table class="a11y-table">
+    <thead>
+      <tr>
+        <th scope="col">Component</th>
+        {#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>
+      </tr>
+    </thead>
+    <tbody>
+      {#each tallies as { row, totals } (row.component)}
+        <tr>
+          <th scope="row">
+            <button type="button" class="a11y-jump" onclick={() => onjump(row.component)}>
+              <i class={row.icon} aria-hidden="true"></i>{row.label}
+            </button>
+          </th>
+          {#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>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</section>
+
+<style>
+  .a11y-overview {
+    gap: var(--ui-space-20);
+  }
+
+  .a11y-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+    gap: var(--ui-space-16);
+  }
+
+  .a11y-stat {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+    padding-left: var(--ui-space-16);
+    border-left: 1px solid var(--ui-border-low);
+  }
+
+  .a11y-stat-total {
+    padding-left: 0;
+    border-left: none;
+  }
+
+  .a11y-stat-value {
+    font-size: var(--ui-font-size-3xl);
+    font-weight: var(--ui-font-weight-semibold);
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+    color: var(--ui-text-primary);
+  }
+
+  .a11y-stat-total .a11y-stat-value {
+    font-size: var(--ui-font-size-4xl);
+  }
+
+  .a11y-stat-label {
+    display: flex;
+    align-items: baseline;
+    gap: var(--ui-space-6);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-tertiary);
+  }
+
+  .zero {
+    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-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--ui-font-size-sm);
+  }
+
+  .a11y-table th,
+  .a11y-table td {
+    padding: var(--ui-space-6) var(--ui-space-8);
+    text-align: left;
+    font-weight: var(--ui-font-weight-normal);
+    white-space: nowrap;
+  }
+
+  .a11y-table th:first-child {
+    padding-left: 0;
+  }
+
+  .a11y-table thead th {
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-tertiary);
+    border-bottom: 1px solid var(--ui-border-low);
+  }
+
+  .a11y-table tbody tr + tr > * {
+    border-top: 1px solid var(--ui-border-low);
+  }
+
+  .a11y-table .num {
+    width: 1%;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+    color: var(--ui-text-primary);
+  }
+
+  .a11y-table td.zero {
+    color: var(--ui-text-muted);
+  }
+
+  .bar-col {
+    width: 40%;
+  }
+
+  .a11y-jump {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+    padding: 0;
+    background: none;
+    border: none;
+    font: inherit;
+    color: var(--ui-text-secondary);
+    cursor: pointer;
+  }
+
+  .a11y-jump i {
+    width: var(--ui-space-16);
+    color: var(--ui-text-tertiary);
+    text-align: center;
+  }
+
+  .a11y-jump:hover {
+    color: var(--ui-text-primary);
+    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

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { a11yFinishedReport, a11yIssues } from '../../core/a11y/a11yReport';
+  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';
+
+  let { component }: { component: string } = $props();
+  const titleId = $props.id();
+
+  const editorCtx = getEditorContext();
+
+  let panel: HTMLElement | undefined = $state();
+  let issues = $derived($a11yIssues[component]);
+  let count = $derived(issues ? issueCount(issues) : 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[] {
+    const scope = panel?.closest('.demo-block') ?? document;
+    const selector = `[data-token-variable="${variable}"], [data-token-variables~="${variable}"]`;
+    const rows = [...scope.querySelectorAll<HTMLElement>(selector)]
+      .filter((row) => row.getClientRects().length > 0);
+    return [...rows.filter((row) => row.closest('.variant-group')), ...rows.filter((row) => !row.closest('.variant-group'))];
+  }
+
+  async function reveal(variable: string) {
+    let rows = renderedRows(variable);
+    if (!rows[0]?.closest('.variant-group') && editorCtx) {
+      const request: RevealRequest = { variable, searches: [] };
+      editorCtx.revealVariable.set(request);
+      await tick();
+      await Promise.all(request.searches);
+      await tick();
+      rows = renderedRows(variable);
+    }
+    const row = rows[0];
+    if (row) flashRow(row.closest<HTMLElement>('.token-entry') ?? row);
+  }
+
+  function scrollTo(target: HTMLElement, block: ScrollLogicalPosition) {
+    const still = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    target.scrollIntoView({ block, behavior: still ? 'auto' : 'smooth' });
+  }
+
+  function flash(target: HTMLElement, block: ScrollLogicalPosition = 'center') {
+    scrollTo(target, block);
+    const highlight = getComputedStyle(target).getPropertyValue('--ui-highlight').trim();
+    target.animate(
+      [{ boxShadow: `0 0 0 2px ${highlight}` }, { boxShadow: '0 0 0 2px transparent' }],
+      { duration: FLASH_DURATION_MS, easing: 'ease-in' },
+    );
+  }
+
+  /** A row's content runs to its edges, so its ring sits out to the sides on a pseudo-element. */
+  function flashRow(row: HTMLElement) {
+    scrollTo(row, 'center');
+    row.classList.add('a11y-flash-row');
+    row
+      .animate([{ opacity: 1 }, { opacity: 0 }], { duration: FLASH_DURATION_MS, easing: 'ease-in', pseudoElement: '::after' })
+      .finished.finally(() => row.classList.remove('a11y-flash-row'));
+  }
+
+  $effect(() => {
+    const pending = $pendingA11yReveal;
+    if (!pending || pending.component !== component || !panel) return;
+    pendingA11yReveal.set(null);
+    if (pending.variable) reveal(pending.variable);
+    else flash(panel, 'start');
+  });
+</script>
+
+{#if issues && count > 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>
+      <span class="a11y-panel-run">Last run {formatRunTime($a11yFinishedReport.finishedAt)}</span>
+    </header>
+    <A11yComponentIssues {component} {issues} withReview onreveal={reveal} />
+  </section>
+{/if}
+
+<style>
+  :global(.a11y-flash-row) {
+    position: relative;
+  }
+
+  /* Overhangs the row by the same space-6 as its linked-hover band. */
+  :global(.a11y-flash-row)::after {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * var(--ui-space-2)) calc(-1 * (var(--ui-space-6) + var(--ui-space-2)));
+    border: 2px solid var(--ui-highlight);
+    border-radius: calc(var(--ui-radius-sm) + var(--ui-space-6));
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .a11y-panel {
+    gap: var(--ui-space-12);
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-secondary);
+  }
+
+  .a11y-panel-head {
+    display: flex;
+    align-items: baseline;
+    gap: var(--ui-space-8);
+  }
+
+  .a11y-panel-mark {
+    color: var(--ui-highlight);
+  }
+
+  .a11y-panel-title {
+    margin: 0;
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-primary);
+  }
+
+  .a11y-panel-run {
+    margin-left: auto;
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-tertiary);
+  }
+</style>