molecule-ai/molecule-core
41
0
Fork 2
Code Issues 53 Pull Requests 23 Actions 19 Packages Projects Releases Wiki Activity

feat(canvas/mobile): TabBar WCAG 2.1 AA accessibility (#675) #677

Closed
core-uiux wants to merge 9 commits from feat/mobile-tabbar-wcag-a11y into main
pull from: feat/mobile-tabbar-wcag-a11y
merge into: molecule-ai:main
Conversation 0 Commits 9 Files Changed 17 +3635 -6
core-uiux commented 2026-05-12 05:16:38 +00:00
Member
Copy Link

Summary

  • Add WCAG 2.1 AA §4.10.3 ARIA tab pattern to mobile TabBar:
    • role="tablist" + aria-label on container
    • role="tab", aria-selected, roving tabIndex on each button
    • aria-hidden on icon spans
  • Per-button onKeyDown handlers: Arrow/Home/End navigation
  • 16 new test cases — 58/58 mobile tests pass

Closes #675.

## Summary - Add WCAG 2.1 AA §4.10.3 ARIA tab pattern to mobile TabBar: - role="tablist" + aria-label on container - role="tab", aria-selected, roving tabIndex on each button - aria-hidden on icon spans - Per-button onKeyDown handlers: Arrow/Home/End navigation - 16 new test cases — 58/58 mobile tests pass Closes #675.
core-uiux added 9 commits 2026-05-12 05:16:38 +00:00 
12 passing: loading spinner, empty state, token list rendering,
each token's prefix/age/Revoke button, API URL correctness, revoke
confirm + cancel dialogs, new-token creation + dismiss, create error,
network error banner.

Root bug fixed: confirm button search was unscoped — when the dialog
opened, two "Revoke" buttons existed (tok2's row + dialog confirm);
find() returned tok2's button first. Scoped the search to
document.querySelector('[role="dialog"]') to hit the correct target.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Adds Vitest coverage for AttachmentTextPreview — inline text/code
preview with streaming fetch and expand/truncate.

Covers:
  - Loading skeleton (320x80) with aria-label
  - Ready state with correct text content
  - Filename shown in header
  - Expand button appears when lines > 10
  - Expand button hidden when all lines shown
  - Expand button updates display to full content
  - Download button calls onDownload
  - tone=user -> blue/accent border
  - tone=agent -> neutral border
  - Truncated notice when file exceeds 256 KB
  - Error -> AttachmentChip fallback
  - Cleanup on unmount

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Adds Vitest coverage for two missing attachment renderers:

AttachmentAudio (9 cases):
  - Loading skeleton (280x40) with aria-label
  - <audio controls> with blob src when ready
  - Filename label in ready state
  - tone=user -> blue/accent border
  - tone=agent -> neutral border
  - Error -> AttachmentChip fallback
  - audio onError -> chip transition
  - External URI -> direct href, no fetch
  - Blob URL cleanup on unmount

AttachmentPDF (9 cases):
  - Loading skeleton with PdfGlyph + filename
  - Preview button with glyph, filename, "PDF" label
  - Lightbox opens with <embed> on click
  - Lightbox closes on Escape
  - tone=user -> blue/accent classes on button
  - tone=agent -> neutral border
  - Error -> AttachmentChip fallback
  - External URI -> direct href, no fetch
  - Blob URL cleanup on unmount

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Adds Vitest coverage for AttachmentImage — inline image thumbnail with
click-to-fullscreen lightbox. Covers: loading skeleton (240×180),
ready state with blob URL, tone=user/agent border classes, lightbox
open/close on click and Escape, AttachmentChip error fallback, img
onError transition to chip, external URI direct href (no fetch), and
blob URL cleanup on unmount.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- role=group with aria-label containing service label
- Service icon aria-hidden, correct emoji per service name
- Count label: "1 key" vs "N keys"
- Renders SecretRow for each secret
- Header and rows div structure

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- DeleteConfirmDialog (15 cases): dialog open via secret:delete-request event,
  title/body text, Cancel closes, dependents loading/list/none states,
  deleteSecret call, confirm 1s delay, disabled→enabled button transition
- SettingsButton (11 cases): aria-label, aria-expanded, gear SVG aria-hidden,
  toggle openPanel/closePanel, active class, tooltip Mac/Ctrl shortcut
  ResizeObserver polyfill for Radix Tooltip

No breaking changes. 2413 tests passing.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- EmptyState: 6 cases — icon aria-hidden, title, body text, CTA button
- SearchBar: 14 cases — store binding, onChange, Escape, Ctrl/Cmd+F focus
- UnsavedChangesGuard: 7 cases — dialog states, Keep/Discard actions, backdrop
  FIX: UnsavedChangesGuard now wires onDiscard via pendingDiscard ref so
  clicking Discard correctly calls the callback on dialog close
- AttachmentVideo: 8 cases — loading/ready/error states, tone borders,
  blob URL cleanup, external URI direct href

No breaking changes. 2387 tests passing.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
test(canvas): add form-inputs coverage (35 cases) + Section accessibility fix
Some checks failed
Block internal-flavored paths / Block forbidden paths (pull_request) Successful in 17s
Details
CI / Detect changes (pull_request) Successful in 28s
Details
Harness Replays / detect-changes (pull_request) Successful in 12s
Details
E2E API Smoke Test / detect-changes (pull_request) Successful in 26s
Details
E2E Staging Canvas (Playwright) / detect-changes (pull_request) Successful in 27s
Details
Secret scan / Scan diff for credential-shaped strings (pull_request) Successful in 14s
Details
Handlers Postgres Integration / detect-changes (pull_request) Successful in 33s
Details
Runtime PR-Built Compatibility / detect-changes (pull_request) Successful in 30s
Details
qa-review / approved (pull_request) Failing after 15s
Details
security-review / approved (pull_request) Failing after 17s
Details
CI / Platform (Go) (pull_request) Successful in 7s
Details
gate-check-v3 / gate-check (pull_request) Successful in 27s
Details
sop-tier-check / tier-check (pull_request) Successful in 15s
Details
CI / Shellcheck (E2E scripts) (pull_request) Successful in 6s
Details
CI / Python Lint & Test (pull_request) Successful in 8s
Details
Harness Replays / Harness Replays (pull_request) Successful in 6s
Details
E2E API Smoke Test / E2E API Smoke Test (pull_request) Successful in 7s
Details
Handlers Postgres Integration / Handlers Postgres Integration (pull_request) Successful in 5s
Details
Runtime PR-Built Compatibility / PR-built wheel + import smoke (pull_request) Successful in 7s
Details
E2E Staging Canvas (Playwright) / Canvas tabs E2E (pull_request) Successful in 7m37s
Details
CI / Canvas (Next.js) (pull_request) Successful in 10m4s
Details
CI / Canvas Deploy Reminder (pull_request) Has been skipped
Details
CI / all-required (pull_request) Successful in 4s
Details
5e2a998cac 
+ form-inputs.test.tsx: 35 cases across TextInput, NumberInput, Toggle,
  TagList, and Section — pure presentational components in the Config tab.
  Uses vi.hoisted() patterns from established suite; no jest-dom matchers.

+ form-inputs.tsx (Section): add aria-expanded + aria-controls to the
  collapsible toggle button for WCAG 2.1 AA compliance. The content div
  gets a stable id derived from the title; aria-controls links button to
  region. Indicator span gains aria-hidden="true" (decorative only).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
feat(canvas/mobile): TabBar WCAG 2.1 AA accessibility (issue #675)
Some checks failed
Block internal-flavored paths / Block forbidden paths (pull_request) Successful in 9s
Details
Harness Replays / detect-changes (pull_request) Successful in 16s
Details
Secret scan / Scan diff for credential-shaped strings (pull_request) Successful in 12s
Details
CI / Detect changes (pull_request) Successful in 28s
Details
E2E API Smoke Test / detect-changes (pull_request) Successful in 31s
Details
Handlers Postgres Integration / detect-changes (pull_request) Successful in 31s
Details
Runtime PR-Built Compatibility / detect-changes (pull_request) Successful in 30s
Details
Harness Replays / Harness Replays (pull_request) Successful in 12s
Details
E2E Staging Canvas (Playwright) / detect-changes (pull_request) Successful in 36s
Details
qa-review / approved (pull_request) Failing after 15s
Details
gate-check-v3 / gate-check (pull_request) Successful in 19s
Details
security-review / approved (pull_request) Failing after 16s
Details
CI / Platform (Go) (pull_request) Successful in 8s
Details
sop-tier-check / tier-check (pull_request) Successful in 17s
Details
CI / Shellcheck (E2E scripts) (pull_request) Successful in 8s
Details
CI / Python Lint & Test (pull_request) Successful in 8s
Details
E2E API Smoke Test / E2E API Smoke Test (pull_request) Successful in 7s
Details
Handlers Postgres Integration / Handlers Postgres Integration (pull_request) Successful in 7s
Details
Runtime PR-Built Compatibility / PR-built wheel + import smoke (pull_request) Successful in 6s
Details
audit-force-merge / audit (pull_request) Has been skipped
Details
E2E Staging Canvas (Playwright) / Canvas tabs E2E (pull_request) Successful in 7m45s
Details
CI / Canvas (Next.js) (pull_request) Successful in 9m48s
Details
CI / all-required (pull_request) Successful in 6s
Details
CI / Canvas Deploy Reminder (pull_request) Failing after 14m17s
Details
efa48181d0 
Add role="tablist"/"tab", aria-selected, roving tabIndex, and
aria-label to the mobile TabBar per WCAG §4.10.3. Per-button
onKeyDown handlers drive Arrow/Home/End navigation; icon spans
carry aria-hidden="true". 16 new test cases cover ARIA attributes
and keyboard navigation.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
core-uiux closed this pull request 2026-05-12 05:17:39 +00:00
triage-operator added the
tier:low
 label 2026-05-12 05:17:42 +00:00
Some checks are pending
Block internal-flavored paths / Block forbidden paths (pull_request) Successful in 9s
Details
Harness Replays / detect-changes (pull_request) Successful in 16s
Details
Secret scan / Scan diff for credential-shaped strings (pull_request) Successful in 12s
Details
CI / Detect changes (pull_request) Successful in 28s
Details
E2E API Smoke Test / detect-changes (pull_request) Successful in 31s
Details
Handlers Postgres Integration / detect-changes (pull_request) Successful in 31s
Details
Runtime PR-Built Compatibility / detect-changes (pull_request) Successful in 30s
Details
Harness Replays / Harness Replays (pull_request) Successful in 12s
Details
E2E Staging Canvas (Playwright) / detect-changes (pull_request) Successful in 36s
Details
qa-review / approved (pull_request) Failing after 15s
Details
gate-check-v3 / gate-check (pull_request) Successful in 19s
Details
security-review / approved (pull_request) Failing after 16s
Details
CI / Platform (Go) (pull_request) Successful in 8s
Details
sop-tier-check / tier-check (pull_request) Successful in 17s
Details
CI / Shellcheck (E2E scripts) (pull_request) Successful in 8s
Details
CI / Python Lint & Test (pull_request) Successful in 8s
Details
E2E API Smoke Test / E2E API Smoke Test (pull_request) Successful in 7s
Details
Handlers Postgres Integration / Handlers Postgres Integration (pull_request) Successful in 7s
Details
Runtime PR-Built Compatibility / PR-built wheel + import smoke (pull_request) Successful in 6s
Details
audit-force-merge / audit (pull_request) Has been skipped
Details
E2E Staging Canvas (Playwright) / Canvas tabs E2E (pull_request) Successful in 7m45s
Details
CI / Canvas (Next.js) (pull_request) Successful in 9m48s
Details
CI / all-required (pull_request) Successful in 6s
Required
Details
CI / Canvas Deploy Reminder (pull_request) Failing after 14m17s
Details
sop-checklist / all-items-acked (pull_request)
Required

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
release-blocker

Blocks the staging→main promotion / a release

  
security

   
test-label-sre

   
tier:high

High risk per dev-sop §SOP-6 — ceo only, 24h cooldown

  
tier:low

Low risk per dev-sop §SOP-6 — engineers/managers/ceo can approve

  
tier:medium

Medium risk per dev-sop §SOP-6 — managers/ceo can approve

  
triage-test

test

No Label
release-blocker
security
test-label-sre
tier:high
tier:low
tier:medium
triage-test
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: molecule-ai/molecule-core#677
No description provided.
Delete Branch "feat/mobile-tabbar-wcag-a11y"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?