Your Name
2f7aa074bc
- Upgrade accessibility from WCAG 2.1 AA to WCAG 2.2 AAA conformance - 42 accessibility fixes across 18 frontend components - Enhanced contrast ratios (7:1 body text, 4.5:1 large text, 3:1 non-text) - 44px minimum touch/click targets on all interactive elements - Full WAI-ARIA 1.2: tablist, radiogroup, alertdialog, progressbar, switch - Screen-reader-only data tables behind chart, dynamic page titles - Skip navigation link, semantic heading hierarchy (h1 > h2) - Celebration popups persist on hover/focus with keyboard dismiss - Fix ToggleSwitch visual height (44px hit area, 28px visual track) - Update README with detailed WCAG 2.2 AAA accessibility section - Include WCAG design doc and implementation plan in docs/plans/
39 lines
1.1 KiB
Svelte
39 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { config } from "../stores/config";
|
|
|
|
interface Props {
|
|
checked: boolean;
|
|
onchange?: (value: boolean) => void;
|
|
label?: string;
|
|
}
|
|
|
|
let { checked = $bindable(), onchange, label = "Toggle" }: Props = $props();
|
|
|
|
function toggle() {
|
|
checked = !checked;
|
|
onchange?.(checked);
|
|
}
|
|
</script>
|
|
|
|
<!-- 44px hit area wrapper (WCAG 2.5.8) with compact visual toggle inside -->
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-label={label}
|
|
aria-checked={checked}
|
|
class="relative inline-flex min-h-[44px] min-w-[52px] shrink-0 cursor-pointer items-center justify-center
|
|
bg-transparent border-none p-0"
|
|
onclick={toggle}
|
|
>
|
|
<span
|
|
class="inline-flex h-[28px] w-[52px] items-center rounded-full transition-colors duration-200 ease-in-out"
|
|
style="background: {checked ? $config.accent_color : '#1a1a1a'};"
|
|
>
|
|
<span
|
|
class="pointer-events-none inline-block h-[22px] w-[22px] rounded-full
|
|
shadow-sm transition-transform duration-200 ease-in-out
|
|
{checked ? 'translate-x-[27px] bg-white' : 'translate-x-[3px] bg-[#666]'}"
|
|
></span>
|
|
</span>
|
|
</button>
|