An item can't be opened from the keyboard or a screen reader #298

Closed
opened 2026-10-19 12:39:45 -07:00 by rays · 2 comments
Owner

The item list's rows are <div class="ep"> with only an onclick (web/src/items.ts:159, :189). They are not focusable (tabIndex -1) and have no role, so Tab goes from one row's buttons to the next (Mark read, Pin, Play, Delete) and never reaches the item itself. A screen reader reads the title as plain text. The only keyboard way to open an item is j/k, and a screen reader's browse mode intercepts those keys.

The feed list's rows (web/src/feeds.ts:105, :155) are focusable and open with Enter or Space (web/src/dialogs.ts:829), but they are also <div>s with no role, so a screen reader reads them as text ("TSTest Show2 items · 1 downloaded"), not as something to press.

Found in an interface review (2026-10-19), by tabbing the main window and reading Playwright's accessibility snapshot against the test fixtures. WCAG 2.1.1, 4.1.2.

Fix: give the item row the same treatment as the feed rows (tabIndex=0 and the same Enter/Space handler), and give both kinds of row a role, for example role="button", or make the title a real <button>.

The item list's rows are `<div class="ep">` with only an `onclick` (`web/src/items.ts:159`, `:189`). They are not focusable (`tabIndex` -1) and have no role, so Tab goes from one row's buttons to the next (Mark read, Pin, Play, Delete) and never reaches the item itself. A screen reader reads the title as plain text. The only keyboard way to open an item is j/k, and a screen reader's browse mode intercepts those keys. The feed list's rows (`web/src/feeds.ts:105`, `:155`) are focusable and open with Enter or Space (`web/src/dialogs.ts:829`), but they are also `<div>`s with no role, so a screen reader reads them as text ("TSTest Show2 items · 1 downloaded"), not as something to press. Found in an interface review (2026-10-19), by tabbing the main window and reading Playwright's accessibility snapshot against the test fixtures. WCAG 2.1.1, 4.1.2. Fix: give the item row the same treatment as the feed rows (`tabIndex=0` and the same Enter/Space handler), and give both kinds of row a role, for example `role="button"`, or make the title a real `<button>`.
rays added the bug label 2026-10-19 12:39:45 -07:00
Author
Owner

The Directory's shows (listedFeed(), web/src/dialogs.ts:46, both the Most subscribed chart and the grid) are the same: focusable and opened with Enter, but <div>s with no role. In the accessibility snapshot the whole chart reads as one run of text, "1 AR Aardvark Radio 2 GS Grouped Show…". The same fix applies.

The Directory's shows (`listedFeed()`, `web/src/dialogs.ts:46`, both the Most subscribed chart and the grid) are the same: focusable and opened with Enter, but `<div>`s with no role. In the accessibility snapshot the whole chart reads as one run of text, "1 AR Aardvark Radio 2 GS Grouped Show…". The same fix applies.
Author
Owner

Fixed in 6ec2c35: an item's title is a button, so Tab and a screen reader reach and open the item. The feed list's rows, places, Signals and the Directory's shows are links to a screen reader, named by what they show, the open one aria-current. Deployed in ipx-web (1.2.1-dev).

Fixed in 6ec2c35: an item's title is a button, so Tab and a screen reader reach and open the item. The feed list's rows, places, Signals and the Directory's shows are links to a screen reader, named by what they show, the open one aria-current. Deployed in ipx-web (1.2.1-dev).
rays closed this issue 2026-10-19 13:13:37 -07:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: rays/ipx#298