A11y: aria-labels, focus-visible, and live region for search results #35

New issue

Closed

opened 2026-04-13 12:07:30 -07:00 by pyr0ball · 0 comments

pyr0ball commented

2026-04-13 12:07:30 -07:00

Owner

Accessibility gaps in ListingCard and SearchView

High priority

card__block-btn (⚑): opacity: 0 normally, 0.5 on hover. Keyboard users who tab to it cannot see it. Fix: add :focus-visible { opacity: 0.6 } to the CSS rule.
card__enrich-btn (↻): no aria-label. Screen readers announce the raw symbol. Add aria-label="Refresh score".
card__block-btn (⚑): no aria-label. Add aria-label="Block this seller".
Block reason input (card__block-reason): has placeholder but no label. Add aria-label="Reason for blocking (optional)".

Medium priority

Trust score badge (.card__trust): uses :title only for tooltip. Titles are not reliably surfaced by screen readers. Mirror the trustBadgeTitle computed value as aria-label.
Search results: no aria-live region. Screen reader users do not know when results load after submitting a search. Add aria-live="polite" wrapper around the results list.

Low priority

No skip-to-main-content link in App.vue. Add before the nav.

Files

web/src/components/ListingCard.vue
web/src/views/SearchView.vue
web/src/App.vue

## Accessibility gaps in ListingCard and SearchView ### High priority - `card__block-btn` (⚑): `opacity: 0` normally, `0.5` on hover. Keyboard users who tab to it cannot see it. Fix: add `:focus-visible { opacity: 0.6 }` to the CSS rule. - `card__enrich-btn` (↻): no `aria-label`. Screen readers announce the raw symbol. Add `aria-label="Refresh score"`. - `card__block-btn` (⚑): no `aria-label`. Add `aria-label="Block this seller"`. - Block reason input (`card__block-reason`): has placeholder but no label. Add `aria-label="Reason for blocking (optional)"`. ### Medium priority - Trust score badge (`.card__trust`): uses `:title` only for tooltip. Titles are not reliably surfaced by screen readers. Mirror the `trustBadgeTitle` computed value as `aria-label`. - Search results: no `aria-live` region. Screen reader users do not know when results load after submitting a search. Add `aria-live="polite"` wrapper around the results list. ### Low priority - No skip-to-main-content link in `App.vue`. Add before the nav. ## Files - `web/src/components/ListingCard.vue` - `web/src/views/SearchView.vue` - `web/src/App.vue`