@motion-proto/live-tokens 0.97.0 → 0.98.2

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>

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

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { a11yPropertyFindings } from '../../core/a11y/a11yReport';
+  import UIInfoPopover from '../UIInfoPopover.svelte';
+  import A11yFindingRow from './A11yFindingRow.svelte';
+  import { accessibilityIssuesLabel, findingRows, reviewLabel } from './a11yView';
+
+  interface Props {
+    variables: string[];
+    /** `gutter` hangs the mark left of its nearest positioned ancestor, in the gap between a row's label and its control. */
+    placement?: 'inline' | 'gutter';
+  }
+
+  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 rows = $derived(findingRows([
+    ...findings.filter((finding) => finding.rule !== 'a11y-review'),
+    ...findings.filter((finding) => finding.rule === 'a11y-review'),
+  ]));
+</script>
+
+{#if findings.length > 0}
+  <span class="a11y-property-mark" class:gutter={placement === 'gutter'}>
+    <UIInfoPopover title={label} ariaLabel={label}>
+      {#snippet trigger()}
+        {#if review}
+          <span class="a11y-property-mark-glyph review" aria-hidden="true"></span>
+        {:else}
+          <i class="fa-solid fa-triangle-exclamation a11y-property-mark-glyph" aria-hidden="true"></i>
+        {/if}
+      {/snippet}
+      <ul class="a11y-property-findings">
+        {#each rows as row, i (i)}
+          <A11yFindingRow component={row.finding.component ?? ''} {row} review={row.finding.rule === 'a11y-review'} />
+        {/each}
+      </ul>
+    </UIInfoPopover>
+  </span>
+{/if}
+
+<style>
+  .a11y-property-mark {
+    display: inline-flex;
+    align-items: center;
+    margin-left: var(--ui-space-4);
+    line-height: 1;
+  }
+
+  /* No transform: it would make this span the containing block of the
+     popover, which positions itself against the viewport. */
+  .a11y-property-mark.gutter {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 100%;
+    margin: 0 var(--ui-space-2) 0 0;
+  }
+
+  .a11y-property-mark-glyph {
+    color: var(--ui-highlight);
+    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: '?';
+    color: var(--ui-text-tertiary);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-weight-bold);
+  }
+
+  .a11y-property-findings {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* The popover spaces its own paragraphs, which would double the row's gaps. */
+  .a11y-property-findings :global(.a11y-issue p) {
+    margin: 0;
+  }
+</style>

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+  interface Props {
+    /** `corner` overlaps the icon of a condensed rail, where the label and its inline mark are hidden. */
+    placement?: 'inline' | 'corner';
+  }
+
+  let { placement = 'inline' }: Props = $props();
+  const label = 'Accessibility issues';
+</script>
+
+{#if placement === 'inline'}
+  <i class="fa-solid fa-triangle-exclamation a11y-rail-mark" role="img" aria-label={label} title={label}></i>
+{:else}
+  <i class="fa-solid fa-triangle-exclamation a11y-rail-mark corner" aria-hidden="true"></i>
+{/if}
+
+<style>
+  .a11y-rail-mark {
+    margin-right: var(--ui-space-6);
+    color: var(--ui-highlight);
+    font-size: var(--ui-font-size-sm);
+  }
+
+  /* Bottom-right of the icon, clear of the unsaved dot at its top-right. */
+  .corner {
+    position: absolute;
+    top: 50%;
+    left: 30px;
+    margin: 0;
+    font-size: var(--ui-font-size-xs);
+    text-shadow: 0 0 2px black;
+    pointer-events: none;
+  }
+</style>