Toggle switch icon

Can't just rely on color b/c a11y

Author: fongandrew

src/shared/components/callbacks/toggle-switch.ts

@@ -1,13 +1,26 @@
 import { createHandler } from '~/shared/utility/callback-attrs/events';
 
+/** Data attribute for identifying which icon to show */
+export const TOGGLE_ICON_ATTR = 'data-toggle-icon';
+
 /**
  * Synchronize the toggle switch's `aria-checked` attribute with the `checked` property.
  * Kinda unclear whether this is necessary if underlying element *is* a checkbox
  * but https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/switch_role
  * says `aria-checked` is required.
+ *
+ * Also changes the icon
  */
 export const toggleSwitchChange = createHandler('change', '$c-toggle-switch__change', (event) => {
-	const target = event.currentTarget as HTMLElement;
-	const checked = (target as HTMLInputElement).checked;
+	const target = event.target as HTMLInputElement;
+	const checked = target.checked;
 	target.setAttribute('aria-checked', checked.toString());
+
+	// Assume this handler is on the container
+	event.currentTarget
+		?.querySelector<HTMLElement>(`[${TOGGLE_ICON_ATTR}='on']`)
+		?.classList.toggle('t-hidden', !checked);
+	event.currentTarget
+		?.querySelector<HTMLElement>(`[${TOGGLE_ICON_ATTR}='off']`)
+		?.classList.toggle('t-hidden', checked);
 });

src/shared/components/toggle-switch.css

@@ -35,19 +35,25 @@
 	}
 
 	.c-toggle-switch__thumb {
+		@mixin v-colors-tooltip;
+
 		position: absolute;
 		margin-inline: calc(0.5 * var(--v-space-sm) - var(--v-border-width));
 		height: calc(var(--v-input-height) - var(--v-space-sm));
 		width: calc(var(--v-input-height) - var(--v-space-sm));
 		border-radius: 9999em;
-		background-color: var(--v-input-fg);
+		color: color-mix(in hsl, var(--v-fg), transparent);
+		display: flex;
+		align-items: center;
+		justify-content: center;
 
 		@mixin t-transition transform;
 	}
 
 	.c-toggle-switch:has(input:checked) .c-toggle-switch__thumb {
 		transform: translateX(calc(0.75 * var(--v-input-height)));
 		background-color: var(--v-primary-fg);
+		color: var(--v-primary-bg);
 	}
 
 	.c-toggle-switch:has([aria-invalid='true']) {

src/shared/components/toggle-switch.tsx

@@ -1,8 +1,9 @@
 import cx from 'classix';
+import { CheckIcon, CircleIcon } from 'lucide-solid';
 import { splitProps } from 'solid-js';
 
 import { checkboxClick, checkboxEnter } from '~/shared/components/callbacks/checkbox';
-import { toggleSwitchChange } from '~/shared/components/callbacks/toggle-switch';
+import { TOGGLE_ICON_ATTR, toggleSwitchChange } from '~/shared/components/callbacks/toggle-switch';
 import {
 	type FormElementProps,
 	mergeFormElementProps,
@@ -34,16 +35,29 @@ export function ToggleSwitch(props: ToggleSwitchProps) {
 	const formProps = mergeFormElementProps<'input'>(rest);
 
 	return (
-		<div class={cx('c-toggle-switch', local.class)} {...callbackAttrs(checkboxClick)}>
+		<div
+			class={cx('c-toggle-switch', local.class)}
+			{...callbackAttrs(checkboxClick, toggleSwitchChange)}
+		>
 			<input
 				type="checkbox"
 				role="switch"
 				aria-checked={props.checked}
 				aria-readonly={props.readOnly}
 				{...formProps}
-				{...callbackAttrs(props, checkboxEnter, toggleSwitchChange)}
+				{...callbackAttrs(props, checkboxEnter)}
 			/>
-			<div class="c-toggle-switch__thumb" />
+			<div class="c-toggle-switch__thumb">
+				<CheckIcon
+					{...{ [TOGGLE_ICON_ATTR]: 'on' }}
+					class={cx(!props.checked && 't-hidden')}
+				/>
+
+				<CircleIcon
+					{...{ [TOGGLE_ICON_ATTR]: 'off' }}
+					class={cx(props.checked && 't-hidden')}
+				/>
+			</div>
 		</div>
 	);
 }