Modals missing role="dialog"/focus trap; some icon buttons missing aria-label #113

New issue

Closed

opened 2026-07-15 19:52:56 +00:00 by claude-bot · 1 comment

claude-bot commented

2026-07-15 19:52:56 +00:00

Contributor

Severity: Low · Confidence: Medium · Effort: S · Category: ui (accessibility)

Evidence

app/src/components/layout/QuickCapture.tsx:246-403, app/src/components/entries/AnnotationModal.tsx:21-58, app/src/components/layout/Shell.tsx:100-135 - overlays with Escape-to-close but no role="dialog"/aria-modal and no Tab focus trap.
Missing aria-label on QuickCapture close (:288-295) and ShortcutHelpModal close (Shell.tsx:106-110); AnnotationModal.tsx:35-39 sets one correctly.

Problem
Keyboard/screen-reader users can Tab out of an "open" modal to background content, and two icon-only close buttons are unlabeled.

Impact
Accessibility gaps on the main capture sheet and modals. Not blocking, but systemic.

Fix
Add role="dialog" aria-modal="true", a small focus-trap (or inert on siblings), and the missing aria-labels.

Acceptance criteria

Focus stays within an open modal; screen readers announce it as a dialog.
All icon-only buttons have aria-labels.

Related: F-31, F-33 (an a11y pass).

Filed from the 2026-07-15 codebase audit. Full report: docs/.internal/report-2026-07-15.md (gitignored).

**Severity:** Low · **Confidence:** Medium · **Effort:** S · Category: ui (accessibility) **Evidence** - `app/src/components/layout/QuickCapture.tsx:246-403`, `app/src/components/entries/AnnotationModal.tsx:21-58`, `app/src/components/layout/Shell.tsx:100-135` - overlays with Escape-to-close but no `role="dialog"`/`aria-modal` and no Tab focus trap. - Missing `aria-label` on QuickCapture close (:288-295) and ShortcutHelpModal close (Shell.tsx:106-110); AnnotationModal.tsx:35-39 sets one correctly. **Problem** Keyboard/screen-reader users can Tab out of an "open" modal to background content, and two icon-only close buttons are unlabeled. **Impact** Accessibility gaps on the main capture sheet and modals. Not blocking, but systemic. **Fix** Add `role="dialog" aria-modal="true"`, a small focus-trap (or `inert` on siblings), and the missing `aria-label`s. **Acceptance criteria** - [ ] Focus stays within an open modal; screen readers announce it as a dialog. - [ ] All icon-only buttons have aria-labels. Related: F-31, F-33 (an a11y pass). --- _Filed from the 2026-07-15 codebase audit. Full report: `docs/.internal/report-2026-07-15.md` (gitignored)._

claude-bot added this to the v7.3.0 - UI, mobile & accessibility milestone

2026-07-15 19:52:56 +00:00

claude-bot added the

enhancement

label

2026-07-15 19:52:56 +00:00

rbrooks referenced this issue from a commit

2026-07-17 22:48:57 +00:00

feat(v7.3.0): UI, mobile & accessibility milestone

claude-bot commented

2026-07-17 23:14:19 +00:00

Author

Contributor

QuickCapture, AnnotationModal, and the shortcut-help modal now have role=dialog / aria-modal, a Tab focus trap (new useFocusTrap hook, restores focus on close), and the previously-missing aria-labels on icon-only close buttons.

Shipped in 59e4fdd (test fix 6561f9a), part of the v7.3.0 milestone. Verified on dev (v7.2.1-3-g6561f9a): app suite 65/65 and api suite 268/268 green on the dev server; the one CI red was the known runner flake (iac#159), not this change.

QuickCapture, AnnotationModal, and the shortcut-help modal now have `role=dialog` / `aria-modal`, a Tab **focus trap** (new `useFocusTrap` hook, restores focus on close), and the previously-missing `aria-label`s on icon-only close buttons. Shipped in `59e4fdd` (test fix `6561f9a`), part of the v7.3.0 milestone. Verified on dev (`v7.2.1-3-g6561f9a`): app suite 65/65 and api suite 268/268 green on the dev server; the one CI red was the known runner flake (iac#159), not this change.

claude-bot closed this issue

2026-07-17 23:14:19 +00:00