Escape does not close popups and menus #46

New issue

Open

opened 2026-10-03 19:44:39 +00:00 by jalenluorion · 0 comments

jalenluorion commented

2026-10-03 19:44:39 +00:00

Member

What's wrong
Pressing Escape does not close the event popover, the account menu, modal dialogs (for example Upload), or the course options menu. Keyboard users have to find the close button or click outside.

How to reproduce

Click an event on the calendar, then press Escape: the popover stays open.
Click your initials in the navbar, then press Escape: the menu stays open and the button keeps aria-expanded="true".
Click Upload, then press Escape: the dialog stays open.
On Home, open the three-dot menu next to a course, then press Escape: the menu stays open.

Expected
Escape closes each of these, and focus goes back to the control that opened it.

Where to look

web/src/app/components/EventPopover.tsx: the panel is static and its open state lives in ModalRender, so nothing calls onClose on Escape.
web/src/app/components/UserMenu.tsx: closes only on an outside mousedown; add a keydown listener in the same effect.
web/src/app/components/Modal.tsx: no key handling. Many dialogs use it, so one fix covers them all.
web/src/app/components/Accordion.tsx: Headless UI's Menu should handle Escape by itself. Reproduce first; a likely suspect is the older <Transition> wrapper around Menu.Items (Headless UI v2 uses the transition prop on the items instead).

Done when

Escape closes all four, and the account button's aria-expanded goes back to false.
Focus returns to the opening control where possible.
Clicking outside still closes them as before.

**What's wrong** Pressing Escape does not close the event popover, the account menu, modal dialogs (for example Upload), or the course options menu. Keyboard users have to find the close button or click outside. **How to reproduce** 1. Click an event on the calendar, then press Escape: the popover stays open. 2. Click your initials in the navbar, then press Escape: the menu stays open and the button keeps `aria-expanded="true"`. 3. Click Upload, then press Escape: the dialog stays open. 4. On Home, open the three-dot menu next to a course, then press Escape: the menu stays open. **Expected** Escape closes each of these, and focus goes back to the control that opened it. **Where to look** - `web/src/app/components/EventPopover.tsx`: the panel is `static` and its open state lives in ModalRender, so nothing calls `onClose` on Escape. - `web/src/app/components/UserMenu.tsx`: closes only on an outside `mousedown`; add a `keydown` listener in the same effect. - `web/src/app/components/Modal.tsx`: no key handling. Many dialogs use it, so one fix covers them all. - `web/src/app/components/Accordion.tsx`: Headless UI's `Menu` should handle Escape by itself. Reproduce first; a likely suspect is the older `<Transition>` wrapper around `Menu.Items` (Headless UI v2 uses the `transition` prop on the items instead). **Done when** - [ ] Escape closes all four, and the account button's `aria-expanded` goes back to false. - [ ] Focus returns to the opening control where possible. - [ ] Clicking outside still closes them as before.

jalenluorion added this to the Phase 1 milestone

2026-10-03 19:44:39 +00:00

jalenluorion added the

frontend

good first issue

bug

labels

2026-10-03 19:44:39 +00:00

jalenluorion added this to the CMUCal project

2026-10-03 19:45:09 +00:00