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:
@@ -38,11 +38,11 @@
|
||||
<Modal bind:show size="xl">
|
||||
<div class="px-6 pt-5 dark:text-white text-black">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="text-xl font-medium">
|
||||
<h2 class="text-xl font-medium m-0">
|
||||
{$i18n.t("What's New in")}
|
||||
{$WEBUI_NAME}
|
||||
<Confetti x={[-1, -0.25]} y={[0, 0.5]} />
|
||||
</div>
|
||||
</h2>
|
||||
<button class="self-center" on:click={closeModal} aria-label={$i18n.t('Close')}>
|
||||
<XMark className={'size-5'}>
|
||||
<p class="sr-only">{$i18n.t('Close')}</p>
|
||||
@@ -64,9 +64,9 @@
|
||||
{#if changelog}
|
||||
{#each Object.keys(changelog) as version}
|
||||
<div class=" mb-3 pr-2">
|
||||
<div class="font-semibold text-xl mb-1 dark:text-white">
|
||||
<h3 class="font-semibold text-xl mb-1 dark:text-white m-0">
|
||||
v{version} - {changelog[version].date}
|
||||
</div>
|
||||
</h3>
|
||||
|
||||
<hr class="border-gray-50/50 dark:border-gray-850/50 my-2" />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user