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:
Classic298
2026-02-22 14:18:53 -06:00
committed by GitHub
parent bf0fb1c449
commit a0dbd41551
8 changed files with 30 additions and 19 deletions
+4 -2
View File
@@ -6,7 +6,7 @@
let selected = '';
</script>
<div class="min-w-[4.5rem] bg-gray-50 dark:bg-gray-950 flex gap-2.5 flex-col pt-8">
<nav aria-label="App navigation" class="min-w-[4.5rem] bg-gray-50 dark:bg-gray-950 flex gap-2.5 flex-col pt-8">
<div class="flex justify-center relative">
{#if selected === 'home'}
<div class="absolute top-0 left-0 flex h-full">
@@ -16,6 +16,7 @@
<Tooltip content="Home" placement="right">
<button
aria-label="Home"
class=" cursor-pointer {selected === 'home' ? 'rounded-2xl' : 'rounded-full'}"
on:click={() => {
selected = 'home';
@@ -44,6 +45,7 @@
</div>
{/if}
<button
aria-label="Chat"
class=" cursor-pointer bg-transparent"
on:click={() => {
selected = '';
@@ -63,4 +65,4 @@
<Plus className="size-4" strokeWidth="2" />
</button>
</div> -->
</div>
</nav>