feat(a11y): add aria-describedby to Weiter button when aria-disabled

Screen readers now announce the hint paragraph text on focus when no type
is selected, so users hear why the button is disabled without having to
click it first.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-09 08:06:11 +02:00
parent 4c75680977
commit 6ed8ecf571

View File

@@ -77,7 +77,7 @@ const descs: Record<GeschichteType, () => string> = {
<div aria-live="polite" aria-atomic="true" class="sr-only">{announcement}</div>
{#if !selected}
<p class="mt-3 font-sans text-xs text-ink-3" aria-hidden="true">
<p id="type-hint" class="mt-3 font-sans text-xs text-ink-3" aria-hidden="true">
{m.journey_selector_aria_live_hint()}
</p>
{/if}
@@ -85,6 +85,7 @@ const descs: Record<GeschichteType, () => string> = {
<button
type="button"
aria-disabled={selected == null ? 'true' : 'false'}
aria-describedby={selected == null ? 'type-hint' : undefined}
tabindex="0"
onclick={handleWeiter}
class="mt-6 inline-flex h-11 items-center rounded px-6 font-sans text-sm font-medium transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring {selected == null