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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user