feat: add accessible Storybook UX contracts

[seonghobae]

Purpose

Add an accessible, token-driven Storybook UX contract for DiskSage's provider status surfaces without moving provider, cleanup, or filesystem authority into the browser layer.

Exact current state

• stacked base: PR feat: persist provider sync goals and runtime ADRs #213 branch feat/provider-sync-dynamic-goals, exact base 64e58c98a46104148bf599fa7e796da4b576220a
• exact source head: 21b143d7100c66d8f32265aa9be29507a48dfd2d
• PR is open, Ready for review, and GitHub reports it mergeable; this is not merge authorization
• exact-head Test 32469255556 is queued; Release 32469255633 is in progress. Pending/queued/absent checks are not represented as passing
• predecessor local/hosted validation does not transfer to this head

Current repairs

Storybook viewport isolation

A current review finding showed that a mobile story changed Playwright's viewport to 375×812 without restoring a desktop viewport, making subsequent accessibility/interaction results depend on story order.

The repair was test-first:

1. src/lib/storybookTestRunnerContract.test.ts drives the real exported Storybook test-runner config with a mobile story followed by a desktop story on the same page object and requires both viewport transitions;
2. .storybook/test-runner.ts now sets an explicit viewport on every visit: 375×812 for the mobile contract and 1280×800 otherwise;
3. the addressed review thread was resolved only after the exact source and regression were present.

Svelte 5 layout contract

The root layout used deprecated <slot /> syntax despite the application being on Svelte 5. The layout now types children as a Svelte Snippet and renders it with {@render children()} while preserving the skip link and app-wide design-token import.

The current head adds only a docs-only evidence-count refresh after those source/test repairs. Existing review findings about the scan-control ARIA group, unique ProviderStatusCard IDs, h1 story headings, static Storybook output testing, and the mobile viewport parameter have been verified against the current source and their addressed threads are resolved. The global design-token control styling remains an explicit review item rather than being silently changed.

UX / authority boundary

• Storybook interaction/a11y tests run against built static Storybook output in Chromium;
• ProviderStatusCard remains a pure state renderer with explicit IDs and heading level;
• stories do not call provider APIs or mutate user files;
• provider evidence, destructive authority, and filesystem operations remain in the existing Rust/Tauri boundaries;
• no Figma artifact is invented: ADR-0010 records that the token file and Storybook scenes are the reviewable design source until an approved handoff exists.

Required before integration

Do not merge this stack edge unless its exact unchanged head and the exact #213 parent satisfy every applicable live Test/Release/Security/SAST/accessibility/review gate, all valid current-head findings are addressed, the stack ancestry remains current, and protected-main integration separately satisfies repository-wide exact coverage, package/SBOM/provenance, and live review governance. Pending, queued, skipped-required, failed, stale, predecessor, synthetic, status-only, model-only, no-source, or infrastructure-only evidence is non-passing.

Summary by CodeRabbit

• 새 기능

  • 공급자 동기화 상태, 관찰 시각, 정체·차단 기간을 카드로 표시합니다.
  • 스캔 오류와 결과 불러오기 실패 안내를 추가했습니다.
  • 모바일·데스크톱 뷰포트와 접근성 중심 Storybook 화면을 제공합니다.
  • 초기 스캔 위치를 운영체제에 맞게 안내합니다.

• 버그 수정

  • 동기화 진행 및 인덱싱 변화에 따라 정체 시간이 정확히 갱신됩니다.
  • 다크 모드와 기존 패널의 색상 대비를 개선했습니다.

• 접근성

  • 키보드 탐색, 건너뛰기 링크, 포커스 표시와 reduced-motion 지원을 강화했습니다.

• 문서 및 테스트

  • UX 계약과 상태별 사용 시나리오를 문서화하고 자동 검증을 확대했습니다.

[devin-ai-integration]

Devin Review found 2 new potential issues.

[devin-ai-integration]

🔍 Duplicates view leaks raw per-item error

Duplicates.svelte:140 still renders {r.error} for a failed trash move, while the same per-item pattern was rewritten to generic customer copy in Cleanup.svelte and Organize.svelte. This leaves the deduplicated view inconsistent with the customer-copy contract the PR applies elsewhere. The line sits outside the diff, so it was not reported as a bug.

(Refers to this code)

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

🟡 Google Drive and OneDrive copy hints name iCloud

The post-copy verification hint names iCloud inside the google-drive and onedrive receipt branches (CloudArchive.svelte). A customer who copied to Google Drive or OneDrive reads guidance about a service they are not using.

Prompt for agents

The copy-verification hints for the google-drive and onedrive receipt branches in src/lib/CloudArchive.svelte (around lines 1505 and 1507) were reworded from a generic macOS File Provider description to text that hardcodes the word iCloud. These branches only render for Google Drive and OneDrive receipts, so referencing iCloud is inaccurate (and on Windows/Linux there is no iCloud at all). Replace the iCloud references with provider-neutral customer wording, or use the selected provider's display name (e.g. via cloudProviderLabel(copied.receipt.provider)) so the guidance names the correct service.

---

Was this helpful? React with 👍 or 👎 to provide feedback.