fix(canvas/FilesTab): add aria-modal="false" to inline alertdialog confirm prompts (WCAG 4.1.2)
Block internal-flavored paths / Block forbidden paths (pull_request) Successful in 5s
E2E API Smoke Test / detect-changes (pull_request) Successful in 11s
Handlers Postgres Integration / detect-changes (pull_request) Successful in 8s
Harness Replays / detect-changes (pull_request) Successful in 11s
Secret scan / Scan diff for credential-shaped strings (pull_request) Successful in 9s
Runtime PR-Built Compatibility / detect-changes (pull_request) Successful in 12s
gate-check-v3 / gate-check (pull_request) Successful in 10s
security-review / approved (pull_request) Failing after 6s
sop-tier-check / tier-check (pull_request) Successful in 7s
Handlers Postgres Integration / Handlers Postgres Integration (pull_request) Successful in 2s
E2E API Smoke Test / E2E API Smoke Test (pull_request) Successful in 2s
Harness Replays / Harness Replays (pull_request) Successful in 2s
CI / Detect changes (pull_request) Successful in 41s
CI / Shellcheck (E2E scripts) (pull_request) Successful in 39s
E2E Chat / detect-changes (pull_request) Successful in 39s
Runtime PR-Built Compatibility / PR-built wheel + import smoke (pull_request) Successful in 3s
E2E Staging Canvas (Playwright) / detect-changes (pull_request) Successful in 37s
qa-review / approved (pull_request) Failing after 37s
E2E Chat / E2E Chat (pull_request) Failing after 57s
lint-required-no-paths / lint-required-no-paths (pull_request) Successful in 2m8s
CI / Python Lint & Test (pull_request) Successful in 8m5s
CI / Platform (Go) (pull_request) Successful in 8m28s
CI / Canvas (Next.js) (pull_request) Successful in 9m8s
CI / all-required (pull_request) Successful in 9m7s
CI / Canvas Deploy Reminder (pull_request) Has been skipped
E2E Staging Canvas (Playwright) / Canvas tabs E2E (pull_request) Successful in 11m36s
sop-checklist / all-items-acked (pull_request) [info tier:low] acked: 0/7 — missing: comprehensive-testing, local-postgres-e2e, staging-smoke, +4 — body-unfilled: comprehensive-testing, l
sop-checklist / na-declarations (pull_request) N/A: (none)
Block internal-flavored paths / Block forbidden paths (pull_request) Successful in 5s
E2E API Smoke Test / detect-changes (pull_request) Successful in 11s
Handlers Postgres Integration / detect-changes (pull_request) Successful in 8s
Harness Replays / detect-changes (pull_request) Successful in 11s
Secret scan / Scan diff for credential-shaped strings (pull_request) Successful in 9s
Runtime PR-Built Compatibility / detect-changes (pull_request) Successful in 12s
gate-check-v3 / gate-check (pull_request) Successful in 10s
security-review / approved (pull_request) Failing after 6s
sop-tier-check / tier-check (pull_request) Successful in 7s
Handlers Postgres Integration / Handlers Postgres Integration (pull_request) Successful in 2s
E2E API Smoke Test / E2E API Smoke Test (pull_request) Successful in 2s
Harness Replays / Harness Replays (pull_request) Successful in 2s
CI / Detect changes (pull_request) Successful in 41s
CI / Shellcheck (E2E scripts) (pull_request) Successful in 39s
E2E Chat / detect-changes (pull_request) Successful in 39s
Runtime PR-Built Compatibility / PR-built wheel + import smoke (pull_request) Successful in 3s
E2E Staging Canvas (Playwright) / detect-changes (pull_request) Successful in 37s
qa-review / approved (pull_request) Failing after 37s
E2E Chat / E2E Chat (pull_request) Failing after 57s
lint-required-no-paths / lint-required-no-paths (pull_request) Successful in 2m8s
CI / Python Lint & Test (pull_request) Successful in 8m5s
CI / Platform (Go) (pull_request) Successful in 8m28s
CI / Canvas (Next.js) (pull_request) Successful in 9m8s
CI / all-required (pull_request) Successful in 9m7s
CI / Canvas Deploy Reminder (pull_request) Has been skipped
E2E Staging Canvas (Playwright) / Canvas tabs E2E (pull_request) Successful in 11m36s
sop-checklist / all-items-acked (pull_request) [info tier:low] acked: 0/7 — missing: comprehensive-testing, local-postgres-e2e, staging-smoke, +4 — body-unfilled: comprehensive-testing, l
sop-checklist / na-declarations (pull_request) N/A: (none)
The two FilesTab confirm dialogs (delete-all, delete-one) use role="alertdialog" but were missing aria-modal. These are inline in-page prompts without focus trapping — aria-modal="false" explicitly documents the non-modal nature so assistive technology knows the rest of the page remains interactive. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -223,7 +223,7 @@ function PlatformOwnedFilesTab({ workspaceId }: { workspaceId: string }) {
|
||||
// immediately. Delete-All hovers DARKER (bg-red-700) — same AA
|
||||
// contrast trap that bit ConfirmDialog/ApprovalBanner. Cancel
|
||||
// lifts to surface-elevated instead of the prior no-op hover.
|
||||
<div role="alertdialog" aria-labelledby="files-delete-all-msg" className="mx-3 mt-2 px-3 py-2 bg-red-950/30 border border-red-800/40 rounded space-y-1.5">
|
||||
<div role="alertdialog" aria-modal="false" aria-labelledby="files-delete-all-msg" className="mx-3 mt-2 px-3 py-2 bg-red-950/30 border border-red-800/40 rounded space-y-1.5">
|
||||
<p id="files-delete-all-msg" className="text-xs text-bad">Delete all {files.filter((f) => !f.dir).length} files? This cannot be undone.</p>
|
||||
<div className="flex gap-2">
|
||||
<button type="button" onClick={() => { handleDeleteAll(); setShowDeleteAll(false); }} className="px-2 py-0.5 bg-red-700 hover:bg-red-600 text-[10px] rounded text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60 focus-visible:ring-offset-1 focus-visible:ring-offset-surface">Delete All</button>
|
||||
@@ -237,7 +237,7 @@ function PlatformOwnedFilesTab({ workspaceId }: { workspaceId: string }) {
|
||||
)}
|
||||
|
||||
{confirmDelete && (
|
||||
<div role="alertdialog" aria-labelledby="files-delete-one-msg" className="mx-3 mt-2 px-3 py-2 bg-amber-950/30 border border-amber-800/40 rounded space-y-1.5">
|
||||
<div role="alertdialog" aria-modal="false" aria-labelledby="files-delete-one-msg" className="mx-3 mt-2 px-3 py-2 bg-amber-950/30 border border-amber-800/40 rounded space-y-1.5">
|
||||
<p id="files-delete-one-msg" className="text-xs text-warm">Delete <span className="font-mono">{confirmDelete}</span>{files.find((f) => f.path === confirmDelete && f.dir) ? " and all its contents" : ""}?</p>
|
||||
<div className="flex gap-2">
|
||||
<button type="button" onClick={confirmDeleteFile} className="px-2 py-0.5 bg-red-700 hover:bg-red-600 text-[10px] rounded text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60 focus-visible:ring-offset-1 focus-visible:ring-offset-surface">Delete</button>
|
||||
|
||||
Reference in New Issue
Block a user