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