fix(a11y): improve accessibility of top-level auth and onboarding components (#21710)
Adds critical accessibility fixes across various app components: - auth/+page: provide alt text for logo, turn on screenReader support for password input, add aria-required, hide decorative SVGs from AT - AppSidebar: wrap navigation icons in a <nav> structure, provide ARIA labels for Home and Chat icons - s/[id]/+page: convert structural divs into semantically accurate h1 heading and time element, wrap message display in main region - OnBoarding: replace flawed aria-labelledby with direct aria-label on start button - NotificationToast: provide role='status' and aria-live='polite' for proper screen reader broadcasting - ChangelogModal: add required heading semantics for structure - AddFilesPlaceholder: provide heading element role for standalone text content - ImportModal: provide aria-label for close button Addresses WCAG 4.1.3, 1.1.1, 3.3.2, and 1.3.1.
This commit is contained in:
@@ -87,15 +87,15 @@
|
||||
<div class="flex justify-center mt-8">
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
<button
|
||||
aria-labelledby="get-started"
|
||||
aria-label={$i18n.t('Get started')}
|
||||
class="relative z-20 flex p-1 rounded-full bg-white/5 hover:bg-white/10 transition font-medium text-sm"
|
||||
on:click={() => {
|
||||
getStartedHandler();
|
||||
}}
|
||||
>
|
||||
<ArrowRightCircle className="size-6" />
|
||||
<ArrowRightCircle className="size-6" aria-hidden="true" />
|
||||
</button>
|
||||
<div id="get-started" class="mt-1.5 font-primary text-base font-medium">
|
||||
<div class="mt-1.5 font-primary text-base font-medium" aria-hidden="true">
|
||||
{$i18n.t(`Get started`)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user