[Arch] Accessibility gaps: icon-only buttons, non-semantic clickable elements, no ErrorBoundary #63

New issue

Closed

opened 2026-07-01 07:27:09 +02:00 by bullitt · 1 comment

bullitt commented

2026-07-01 07:27:09 +02:00

Owner

Severity: Medium | Category: Frontend

Only 2 aria-labels across the whole frontend vs ~33 icon-only buttons. RowMenu's overflow trigger in Shipments.tsx (~line 161) has no label. ShipmentDetail.tsx:403 uses a <div onClick> for a keyboard-inaccessible timeline expander. No ErrorBoundary exists anywhere in frontend/src — an unhandled render error crashes the whole SPA.

Recommendation: Add aria-labels to icon-only buttons; convert the <div onClick> to a button or add role="button"/tabIndex/onKeyDown; add a top-level ErrorBoundary in App.tsx.

Full detail: docs/architecture-review.md § C + § H.9

**Severity:** Medium | **Category:** Frontend Only 2 `aria-label`s across the whole frontend vs ~33 icon-only buttons. `RowMenu`'s overflow trigger in `Shipments.tsx` (~line 161) has no label. `ShipmentDetail.tsx:403` uses a `<div onClick>` for a keyboard-inaccessible timeline expander. No `ErrorBoundary` exists anywhere in `frontend/src` — an unhandled render error crashes the whole SPA. **Recommendation:** Add `aria-label`s to icon-only buttons; convert the `<div onClick>` to a button or add `role="button"`/`tabIndex`/`onKeyDown`; add a top-level `ErrorBoundary` in `App.tsx`. Full detail: `docs/architecture-review.md` § C + § H.9

bullitt added the

arch

label

2026-07-01 07:27:53 +02:00

bullitt referenced this issue from a commit

2026-07-01 07:55:49 +02:00

fix(frontend): accessibility gaps + top-level error boundary (fixes #63)

bullitt commented

2026-07-01 07:56:27 +02:00

Author

Owner

Fixed on branch architecture-rework, commit 8ca6dbe: added aria-label/aria-haspopup/aria-expanded to Shipments.tsx's RowMenu overflow trigger; made ShipmentDetail.tsx's timeline-row expander keyboard-accessible (role="button", tabIndex, onKeyDown for Enter/Space); added a top-level ErrorBoundary (components/ErrorBoundary.tsx) wrapping the app in App.tsx. Verified: tsc --noEmit, eslint, vite build all pass.

Fixed on branch `architecture-rework`, commit 8ca6dbe: added `aria-label`/`aria-haspopup`/`aria-expanded` to `Shipments.tsx`'s `RowMenu` overflow trigger; made `ShipmentDetail.tsx`'s timeline-row expander keyboard-accessible (`role="button"`, `tabIndex`, `onKeyDown` for Enter/Space); added a top-level `ErrorBoundary` (`components/ErrorBoundary.tsx`) wrapping the app in `App.tsx`. Verified: `tsc --noEmit`, `eslint`, `vite build` all pass.

bullitt closed this issue

2026-07-01 07:56:38 +02:00

No labels

arch

harness

security

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

bullitt/trackbox#63

No description provided.

Rows
Columns