Schedule delete buttons have no accessible name #48

New issue

Open

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

jalenluorion commented

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

Member

What's wrong
The trash buttons in the schedule picker menu are icon-only with no label, so screen readers announce just "button". They are also invisible (opacity 0) until hovered, so keyboard users cannot see them.

How to reproduce

Sign in and open the schedule picker in the navbar.
In DevTools > Elements > Accessibility, inspect a trash button: it has no name.
Move through the open menu with the arrow keys: the trash buttons never appear.

Expected
Each button has a name such as "Delete schedule Fall plan" and shows when its menu item has keyboard focus.

Where to look

web/src/app/components/Navbar.tsx: the FiTrash2 buttons inside the MenuItems. There are two copies, desktop and mobile; fix both.
Add aria-label={`Delete schedule ${schedule.name}`} and type="button".
The sx on each MenuItem hides .delete-icon until :hover; also show it for &.Mui-focusVisible and when the button itself is focused.

Done when

Both copies have an aria-label that includes the schedule name.
The trash button is visible when its item is reached with the keyboard.
Deleting a schedule still asks for confirmation and works.

**What's wrong** The trash buttons in the schedule picker menu are icon-only with no label, so screen readers announce just "button". They are also invisible (opacity 0) until hovered, so keyboard users cannot see them. **How to reproduce** 1. Sign in and open the schedule picker in the navbar. 2. In DevTools > Elements > Accessibility, inspect a trash button: it has no name. 3. Move through the open menu with the arrow keys: the trash buttons never appear. **Expected** Each button has a name such as "Delete schedule Fall plan" and shows when its menu item has keyboard focus. **Where to look** - `web/src/app/components/Navbar.tsx`: the `FiTrash2` buttons inside the `MenuItem`s. There are two copies, desktop and mobile; fix both. - Add ``aria-label={`Delete schedule ${schedule.name}`}`` and `type="button"`. - The `sx` on each `MenuItem` hides `.delete-icon` until `:hover`; also show it for `&.Mui-focusVisible` and when the button itself is focused. **Done when** - [ ] Both copies have an `aria-label` that includes the schedule name. - [ ] The trash button is visible when its item is reached with the keyboard. - [ ] Deleting a schedule still asks for confirmation and works.

jalenluorion added this to the Phase 1 milestone

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

jalenluorion added the

frontend

good first issue

bug

labels

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

jalenluorion added this to the CMUCal project

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