a11y: insights update-available dismiss button has no accessible name

[duyet]

Severity: medium · Effort: S · Aspect: ux

Goal

The dismiss (X) button on the insights app's "Update Available" banner must have an accessible name so screen-reader users know what the button does.

Context & Why

In apps/insights (https://insights.duyet.net), when a service-worker update is detected, ServiceWorkerProvider renders a fixed bottom-right banner with an icon-only close button. Unlike every other icon-only button found elsewhere in this monorepo (which consistently set aria-label, e.g. the photos lightbox close button, the blog TOC close button, the agent-assistant delete button), this one has neither aria-label nor visible text — a screen reader announces only "button" with no indication of its purpose. This hurts end users relying on assistive technology most; it's a straightforward, isolated accessibility regression relative to the pattern used consistently everywhere else in the codebase.

Evidence

• apps/insights/components/sw/ServiceWorkerProvider.tsx:135-140:

  <button
    onClick={handleDismiss}
    className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
  >
    <X className="h-4 w-4" />
  </button>

  No type="button", no aria-label, no title, no visually-hidden text — just the X icon.
• Contrast with the established pattern elsewhere in the repo, e.g. apps/photos/components/LightboxControls.tsx:107-111 (aria-label="Close lightbox"), apps/home/components/KeyboardShortcuts.tsx:149-153 (aria-label="Close help"), apps/blog/src/routes/$year/$month/-toc.tsx:214-218 (aria-label="Close table of contents") — all icon-only close buttons in this repo carry an aria-label except this one.

Suggested approach

Add type="button" and aria-label="Dismiss update notification" (or similar) to the button in ServiceWorkerProvider.tsx:135, matching the pattern used by the other icon-only buttons cited above.

Validation

Run an axe-core / Lighthouse accessibility scan against https://insights.duyet.net while the update banner is visible (or inspect the rendered DOM), and confirm the button now exposes a non-empty accessible name (e.g. via the browser's Accessibility inspector, or getByRole("button", { name: /dismiss/i }) in a test).

---

Filed by automated multi-repo audit (2026-07-16) — aspect: ux (UI/UX and accessibility).