TinyChain-Inc / TinyChain-Inc/client

[Web][W1.3] Implement accessible interactive controls and overlays

Open
#78 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Python
Stars
0
Forks
0
Avg merge
3d 8h
Merged PRs (30d)
32

Description

Objective

Implement the interactive primitive layer with consistent pointer, keyboard, focus, disabled, validation and overlay semantics.

Components

Button/IconButton/Link, TextInput/TextArea, Checkbox/Radio/Switch, Select where supportable across targets, Dialog/Popover/Tooltip, Tabs and dismissible feedback. Prefer platform primitives and small composable APIs over a bespoke interaction framework.

Acceptance criteria

  • Every control has an accessible name, visible focus, keyboard contract and disabled/read-only behavior.
  • Dialog focus trap, return focus, Escape handling and background inertness pass browser tests.
  • Validation messages are programmatically associated without announcing on every keystroke.
  • Touch targets, contrast, reduced motion and zoom at 200% pass the documented policy.
  • SSR/hydration, outside click, nested overlay and unmount cleanup tests pass.

Parent: #7

Required visual evidence

The draft PR must provide a runnable component-gallery route plus before/after screenshots at 390×844, 768×1024, and 1440×900. Cover light, dark, high-contrast, default, hover, focus-visible, disabled, loading, empty, error, and overflow states applicable to the component. Playwright must exercise keyboard interaction and capture deterministic screenshots. A reviewer other than the implementing agent must approve intentional baseline changes; screenshot generation or a passing pixel threshold is not visual approval.

Tembo execution contract

automation:
  eligible: true
  executor_profile: tembo
  readiness: blocked
  primary_repository: TinyChain-Inc/client
  base_branch: main
  writable_scope:
    - web/src/ui/controls/**
    - web/src/ui/overlays/**
    - web/src/ui/gallery/**
    - web/tests/**
  prerequisites:
    - "#76"
  concurrency_group: ui-foundation-controls
  required_commands:
    - "cd web && npm ci"
    - "cd web && npm run test:all"
  external_actions: none
  draft_pr_only: true
  completion_authority: human
  visual_validation:
    required: true
    browsers: [chromium]
    viewports: [mobile, tablet, desktop]
    evidence: [component-gallery-url, screenshot-bundle, playwright-report]
    baseline_update_requires: human-visual-approval
    failure_policy: never-auto-accept-diff
  budget:
    size: large
    max_revisions: 3
    max_wall_minutes: 120

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Check prerequisite #76 first, then inspect web/src/ui/controls/, web/src/ui/overlays/, web/src/ui/gallery/, and web/tests/. Run cd web && npm ci followed by npm run test:all; done requires the component-gallery route, Playwright keyboard coverage, screenshots for the listed viewports and states, and human visual approval.

Written by the indexing model from the issue text.

Assessment

Tech stack
playwright
Domain
accessibility, frontend, testing
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.