Add WCAG 2.1 Level AA accessibility across all components
This commit is contained in:
@@ -4,9 +4,10 @@
|
||||
interface Props {
|
||||
checked: boolean;
|
||||
onchange?: (value: boolean) => void;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
let { checked = $bindable(), onchange }: Props = $props();
|
||||
let { checked = $bindable(), onchange, label = "Toggle" }: Props = $props();
|
||||
|
||||
function toggle() {
|
||||
checked = !checked;
|
||||
@@ -17,10 +18,10 @@
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-label="Toggle"
|
||||
aria-label={label}
|
||||
aria-checked={checked}
|
||||
class="relative inline-flex h-[24px] w-[48px] shrink-0 cursor-pointer rounded-full
|
||||
transition-colors duration-200 ease-in-out focus:outline-none"
|
||||
transition-colors duration-200 ease-in-out"
|
||||
style="background: {checked ? $config.accent_color : '#1a1a1a'};"
|
||||
onclick={toggle}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user