Skip to content

fix(a11y): non-text content compliance (WCAG 1.1.1)#3431

Open
bilal-karim wants to merge 1 commit into
mainfrom
a11y/1.1.1-nexus-and-toast-fixes
Open

fix(a11y): non-text content compliance (WCAG 1.1.1)#3431
bilal-karim wants to merge 1 commit into
mainfrom
a11y/1.1.1-nexus-and-toast-fixes

Conversation

@bilal-karim
Copy link
Copy Markdown
Member

@bilal-karim bilal-karim commented May 22, 2026

Summary

Two independent SC 1.1.1 fixes bundled per SC grouping:

  • Nexus empty state (src/lib/pages/nexus-empty-state.svelte): the Andromeda illustration was using its filename as alt text ("Andromeda"), so screen readers announced "Andromeda, image" — a non-meaningful name for a purely decorative asset. Marked decorative with `alt=""` and `aria-hidden="true"` on the wrapper.
  • Toast close button (`src/lib/holocene/toast.svelte`): close button's accessible name relied entirely on the required prop being passed. Empty string / undefined at runtime produced `aria-label=""` (an unlabeled icon button). Added runtime fallback to `translate('common.close')`.

Audit context

  • WCAG 2.2 SC 1.1.1 Non-text Content (Level A) — both Moderate severity.
  • Issue files: `audit-output/issues/1.1.1-nexus-empty-state-alt.md`, `audit-output/issues/1.1.1-toast-close-button-fallback.md`.

Test plan

  • Visit a Nexus empty-state route (e.g. `/namespaces//nexus` with no endpoints); with VoiceOver/NVDA confirm the Andromeda illustration is silent.
  • Trigger a toast; confirm close button is announced as "Close, button".
  • Run `pnpm exec playwright test tests/accessibility/empty-states.accessibility.spec.ts` — axe-core's `image-alt` rule should no longer flag the Nexus empty state.

🤖 Generated with Claude Code

A11y-Audit-Ref: 1.1.1-nexus-empty-state-alt
A11y-Audit-Ref: 1.1.1-toast-close-button-fallback

- nexus-empty-state.svelte: mark Andromeda illustration decorative
  with alt="" + aria-hidden on wrapper. Previously screen readers
  announced "Andromeda, image" (the filename), conveying nothing.
- toast.svelte: add runtime fallback to translate('common.close')
  when closeButtonLabel is missing or empty. TypeScript-required
  prop still flags missing-at-compile-time, but an empty string or
  undefined at runtime now produces a labeled icon button rather
  than aria-label="".

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@bilal-karim bilal-karim requested a review from a team as a code owner May 22, 2026 00:20
@vercel
Copy link
Copy Markdown

vercel Bot commented May 22, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
holocene Ready Ready Preview, Comment May 22, 2026 12:21am

Request Review

@github-actions github-actions Bot added a11y Accessibility audit PR a11y:no-fix-doc No A11y-Audit-Ref line; audit team triage a11y:bucket-3 Bucket 3: engineer required a11y:sc-1.1.1 and removed a11y:no-fix-doc No A11y-Audit-Ref line; audit team triage labels May 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a11y:bucket-3 Bucket 3: engineer required a11y:sc-1.1.1 a11y Accessibility audit PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant