containers / containers/podman.io
[Bug]: Meeting-minutes modal is a keyboard trap — Escape does not close it and the close button is not focusable
- Dominant language
- TypeScript
- Stars
- 108
- Forks
- 188
- Avg merge
- 9d 15h
- Merged PRs (30d)
- 11
Description
### Describe the issue
In `src/components/layout/CommunityMeetingsCardGrid/index.tsx`, the "meeting minutes" modal is a native
`` element (line 223-226) whose visibility is toggled via the `open` attribute:
Native `` only gets Escape-to-close, top-layer stacking, and focus-trapping behavior when it's
opened with `dialogRef.current.showModal()`. Toggling the `open` attribute directly opts out of all of that.
The only close affordances are:
1. An outside click/touch listener (`toggleModalOpen`, lines 50-65) — mouse/touch only.
2. A close icon rendered as a plain div with no keyboard access:
It has no `tabIndex`, `role="button"`, or `onKeyDown` handler.
### Impact
A keyboard-only user who opens this modal (via a meeting's "meeting minutes" button) cannot close it —
Escape does nothing, and the close button is unreachable by Tab. This is a WCAG 2.1.2 "No Keyboard Trap"
failure and a real usability dead-end, not just a cosmetic issue.
### Steps to reproduce
1. Go to /community
2. Tab to a meeting card's "meeting minutes" link and activate it with Enter/Space to open the modal
3. Try pressing Escape, or Tab to the close icon and press Enter/Space — nothing closes the modal
### Suggested fix
- Call `modalRef.current?.showModal()` / `.close()` in an effect keyed on `isModalOpen` instead of toggling
the `open` attribute directly, so native Escape-to-close and focus trapping work.
- Make the close icon a real `` (or add `role="button"`,
`tabIndex={0}`, and an `onKeyDown` handler) so it's keyboard-operable.
### LLM Policy
- [x] This issue is human-written, and follow up comments will also be human-written
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in src/components/layout/CommunityMeetingsCardGrid/index.tsx, focusing on the dialog around lines 223-226 and the toggleModalOpen handler around lines 50-65. Reproduce the issue from /community with keyboard-only interaction, then verify that Escape and a keyboard-operable close control both dismiss the modal and that focus behavior is restored.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 76/100