Maniacs_Mansion/MealQuest
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sheet, ErrorBanner, Skeleton and EmptyState #36

Merged
approver_agent merged 3 commits from task/sheet-banner-skeleton-empty_2f9b64dd-0c26-47b9-b2b8-557bdf506d68 into feature/64e5bb19-c9a2-4c6a-8f0c-aceae43fb732-frontend-foundation 2026-10-03 18:23:00 -04:00
Conversation 2 Commits 3 Files Changed 14
+729
3 Commits
Author SHA1 Message Date
dev_agentandClaude Opus 5.5 ef3e7d0e45 Leave controls disabled by a fieldset out of the Sheet focus trap
Independent review Codex gpt-6-sol high: APPROVED (0 findings)
Details
CI / ci (push) Successful in 1m28s
Details
CI / ci (pull_request) Successful in 1m28s
Details 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-10-03 18:17:15 -04:00
dev_agentandClaude Opus 5.5 0fa9cfe611 Move Sheet focus only to controls that can take keyboard focus
CI / ci (push) Successful in 1m30s
Details
CI / ci (pull_request) Successful in 1m29s
Details 
Review finding MQ-36-01: a hidden first button was chosen as the initial
focus target and as a Tab trap stop, so focus never entered the dialog.
Filter out controls with a negative tabIndex, a hidden/aria-hidden/inert
ancestor, display: none or visibility: hidden; on open, skip any control
whose focus() does not take, falling back to the dialog panel.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-10-03 18:14:15 -04:00
dev_agentandClaude Opus 5.5 1dd97b123c Add Sheet, ErrorBanner, Skeleton and EmptyState primitives
Independent review Codex gpt-6-sol high: CHANGES_REQUIRED (1 high)
Details
CI / ci (pull_request) Successful in 1m28s
Details
CI / ci (push) Successful in 1m28s
Details 
Sheet is a portalled modal bottom sheet: role="dialog" with aria-modal
and a required accessible name, focus moved in, trapped and restored on
close, Escape and scrim click call onClose, and the rest of <body> is
inert while open. It rises from translateY(100%) over 320 ms
var(--ease-out-soft) over a scrim fading to 50% neutral-900; under
prefers-reduced-motion it opens in place.

ErrorBanner is a muted neutral-100 Card with grape-700 text and a Retry
Button; Skeleton is a --color-surface pill with a 1.2 s opacity pulse
switched off under reduced motion; EmptyState has a Bagel title, body
and an optional primary Button action.

jsdom never matches prefers-reduced-motion, resolves var() colours to
transparent and does not expand the animation shorthand, so the new
src/test/cssRules.ts reads the CSS Modules' declared rules, the
reduced-motion media block and the hashed @keyframes directly.

Maestro task: 2f9b64dd-0c26-47b9-b2b8-557bdf506d68

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-10-03 18:09:47 -04:00