containers / containers/podman.io

[Bug]: Meeting-minutes modal is a keyboard trap — Escape does not close it and the close button is not focusable

Open Beginner friendly
#686 1 comment 0 reactions 0 assignees View on GitHub
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:

setIsModalOpen(false)}>

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.