a11y: Tasks 2-6 -- App shell, Titlebar, ToggleSwitch, Stepper, animate.ts
- Add skip-to-content link and dynamic document title (App.svelte) - Wrap titlebar in header landmark, enlarge traffic lights to 44px (Titlebar.svelte) - Enlarge toggle switch to 52x28, improve OFF knob contrast (ToggleSwitch.svelte) - Enlarge stepper buttons to 36px, add keyboard hold-to-repeat (Stepper.svelte) - Add keyboard feedback to pressable, focus glow to glowHover (animate.ts)
This commit is contained in:
@@ -20,14 +20,14 @@
|
||||
role="switch"
|
||||
aria-label={label}
|
||||
aria-checked={checked}
|
||||
class="relative inline-flex h-[24px] w-[48px] shrink-0 cursor-pointer rounded-full
|
||||
class="relative inline-flex h-[28px] w-[52px] min-h-[44px] shrink-0 cursor-pointer rounded-full
|
||||
transition-colors duration-200 ease-in-out"
|
||||
style="background: {checked ? $config.accent_color : '#1a1a1a'};"
|
||||
onclick={toggle}
|
||||
>
|
||||
<span
|
||||
class="pointer-events-none inline-block h-[19px] w-[19px] rounded-full
|
||||
class="pointer-events-none inline-block h-[22px] w-[22px] rounded-full
|
||||
shadow-sm transition-transform duration-200 ease-in-out
|
||||
{checked ? 'translate-x-[26px] bg-white' : 'translate-x-[3px] bg-[#444]'} mt-[2.5px]"
|
||||
{checked ? 'translate-x-[27px] bg-white' : 'translate-x-[3px] bg-[#666]'} mt-[3px]"
|
||||
></span>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user