feat: keyboard accessibility

Author: eye-wave

src/lib/ImageKnob.svelte

@@ -23,6 +23,10 @@
 		unit = '',
 		onChange,
 		value = $bindable(),
+		step,
+		acceleration,
+		maxSpeed,
+		initialDelay,
 		defaultValue,
 		param,
 		stiffness = 0.5,
@@ -106,33 +110,58 @@
 </script>
 
 <KnobBase
+	{acceleration}
 	{colors}
 	{decimalDigits}
 	{defaultValue}
 	{disabled}
 	{draggable}
 	{label}
+	{maxSpeed}
 	{onChange}
 	{param}
 	{snapThreshold}
 	{snapValues}
+	{step}
 	{style}
 	{unit}
+	{initialDelay}
 	bind:value
 	{rotationDegrees}
 >
-	{#snippet ui({ handleTouchStart, handleMouseDown, handleDblClick })}
+	{#snippet ui({
+		handleTouchStart,
+		handleMouseDown,
+		handleDblClick,
+		handleKeyDown,
+		normalizedValue
+	})}
 		<canvas
+			role="slider"
+			tabindex="0"
+			aria-valuenow={normalizedValue}
 			bind:this={canvas}
 			{width}
 			{height}
 			class={className}
 			onmousedown={handleMouseDown}
 			ontouchstart={handleTouchStart}
+			onkeydown={handleKeyDown}
 			ondblclick={handleDblClick}
 			oncontextmenu={(e) => e.preventDefault()}
 			draggable={false}
 		>
 		</canvas>
 	{/snippet}
 </KnobBase>
+
+<style>
+	canvas {
+		outline: none;
+	}
+
+	canvas:active,
+	canvas:focus {
+		filter: drop-shadow(2px 0 2px currentColor);
+	}
+</style>

src/lib/KnobBase.svelte

@@ -7,15 +7,26 @@
 		handleTouchStart: (e: TouchEvent) => void;
 		handleMouseDown: ({ clientY }: MouseEvent) => void | boolean;
 		handleDblClick: () => void;
+		handleKeyDown: (e: KeyboardEvent) => void;
 	};
 
+	// TODO docs
 	export type SharedKnobProps = {
 		style?: string;
 		disabled?: boolean;
 		draggable?: boolean;
 		onChange?: (value: number | string) => void;
 		param: FloatParam | EnumParam<readonly string[]>;
 		value: number | string;
+
+		/** normalized value from 0.0 to 1.0 */
+		step?: number;
+		/** multiplier for acceleration */
+		acceleration?: number;
+		maxSpeed?: number;
+		/** initial delay before acceleration starts (ms) */
+		initialDelay?: number;
+
 		defaultValue?: number | string;
 		label?: string;
 		unit?: string;
@@ -45,13 +56,17 @@
 		unit = '',
 		onChange,
 		value = $bindable(),
+		step = 0.01,
+		acceleration = 1.4,
+		maxSpeed = 0.2,
+		initialDelay = 100,
 		defaultValue,
 		param,
 		rotationDegrees,
 		decimalDigits = 0,
 		snapValues = [],
 		snapThreshold = 0.1,
-		disabled = false,
+		disabled: isDisabled = false,
 		draggable = true,
 		colors = {}
 	}: KnobBaseProps = $props();
@@ -105,11 +120,11 @@
 
 	function handleMouseMove({ clientY }: MouseEvent) {
 		if (!draggable) return;
-		if (disabled) return;
+		if (isDisabled) return;
 		if (!isDragging) return;
 		const deltaY = startY - clientY;
 		const deltaValue = deltaY / 200;
-		setValue(clamp(startValue + deltaValue, 0, 1));
+		setValue(startValue + deltaValue);
 
 		return true;
 	}
@@ -125,12 +140,48 @@
 			(param as EnumParam<string[]>).variants?.[0];
 		if (val === undefined) return;
 
-		setValue(clamp(normalize(val, param), 0, 1));
+		setValue(normalize(val, param));
 	}
 
 	const handleTouchStart = toMobile(handleMouseDown);
 	const handleTouchMove = toMobile(handleMouseMove);
 
+	type Direction = 'left' | 'right';
+
+	let intervalId = -1;
+	let currentSpeed = step;
+
+	const directions: Record<string, Direction> = {
+		ArrowLeft: 'left',
+		ArrowDown: 'left',
+		ArrowRight: 'right',
+		ArrowUp: 'right'
+	};
+
+	function adjustValue(direction: Direction) {
+		const delta = direction === 'right' ? currentSpeed : -currentSpeed;
+		console.log(direction);
+		setValue(normalizedValue + delta);
+
+		currentSpeed = Math.min(maxSpeed, currentSpeed * acceleration);
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (isDisabled) return;
+		if (!(e.key in directions)) return;
+		if (intervalId > -1) return;
+
+		intervalId = window.setInterval(() => adjustValue(directions[e.key]), initialDelay);
+	}
+
+	function handleKeyUp() {
+		if (intervalId === -1) return;
+
+		window.clearInterval(intervalId);
+		intervalId = -1;
+		currentSpeed = step;
+	}
+
 	$effect(() => {
 		rotationDegrees.set(normalizedValue * 270 - 135);
 
@@ -151,7 +202,7 @@
 			return;
 		}
 
-		let newValue = unnormalizeToNumber(newNormalizedValue, param);
+		let newValue = unnormalizeToNumber(clamp(newNormalizedValue, 0, 1), param);
 
 		if (fixedSnapValues.length > 0) {
 			const nearestSnapValue = fixedSnapValues.reduce((prev, curr) => {
@@ -176,14 +227,20 @@
 	}
 </script>
 
-<svelte:window onmousemove={handleMouseMove} onmouseup={handleMouseUp} ontouchend={handleMouseUp} />
+<svelte:window
+	onmousemove={handleMouseMove}
+	onmouseup={handleMouseUp}
+	ontouchend={handleMouseUp}
+	onkeyup={handleKeyUp}
+/>
 
 <div class="container" {style}>
 	{@render ui?.({
 		normalizedValue,
 		handleTouchStart,
 		handleMouseDown,
-		handleDblClick
+		handleDblClick,
+		handleKeyDown
 	})}
 	{#if label}
 		<div class="label" style:background={bgColor}>{label}</div>

src/lib/Knob.svelte src/lib/SvgKnob.sveltesrc/lib/Knob.svelte renamed to src/lib/SvgKnob.svelte

@@ -8,6 +8,7 @@
 		size?: number;
 		stiffness?: number;
 		class?: string;
+		strokeWidth?: number;
 		colors?: {
 			arc?: string;
 			bg?: string;
@@ -17,12 +18,17 @@
 
 	let {
 		style,
+		strokeWidth,
 		class: className,
 		label = '',
 		unit = '',
 		size = 80,
 		onChange,
 		value = $bindable(),
+		step,
+		acceleration,
+		maxSpeed,
+		initialDelay,
 		defaultValue,
 		param,
 		stiffness = 0.5,
@@ -89,23 +95,34 @@
 </script>
 
 <KnobBase
+	{acceleration}
 	{colors}
 	{decimalDigits}
 	{defaultValue}
 	{disabled}
 	{draggable}
 	{label}
+	{maxSpeed}
 	{onChange}
 	{param}
+	{rotationDegrees}
 	{snapThreshold}
 	{snapValues}
+	{step}
 	{style}
 	{unit}
+	{initialDelay}
 	bind:value
-	{rotationDegrees}
 >
-	{#snippet ui({ normalizedValue, handleTouchStart, handleMouseDown, handleDblClick })}
+	{#snippet ui({
+		normalizedValue,
+		handleTouchStart,
+		handleMouseDown,
+		handleDblClick,
+		handleKeyDown
+	})}
 		<svg
+			style="--stroke-width: {strokeWidth ?? lineWidth}px"
 			class={className}
 			role="slider"
 			tabindex="0"
@@ -115,29 +132,32 @@
 			viewBox="0 0 {size} {size}"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			stroke-width={lineWidth}
 			onmousedown={handleMouseDown}
 			ontouchstart={handleTouchStart}
 			ondblclick={handleDblClick}
+			onkeydown={handleKeyDown}
 		>
 			<circle cx={center} cy={center} r={circleRadius} fill={bgColor}></circle>
 			{#if snapValues.length > 0 || param.type === 'enum-param'}
 				<!-- Snap markers -->
-				<path d={drawSnapMarkers()} stroke={bgColor} />
+				<path d={drawSnapMarkers()} stroke={bgColor} stroke-width={strokeWidth ?? lineWidth} />
 			{/if}
 			<!-- Arcs -->
 			<path
+				class="line"
 				d={describeArc(center, center, arcRadius, $rotationDegrees, 135)}
-				fill="none"
 				stroke={bgColor}
+				fill="none"
 			/>
 			<path
+				class="line"
 				d={describeArc(center, center, arcRadius, -135, $rotationDegrees)}
-				fill="none"
 				stroke={arcColor2}
+				fill="none"
 			/>
 			<!-- Knob indicator -->
 			<line
+				class="line"
 				x1={center}
 				y1={center * 0.7}
 				x2={center}
@@ -148,3 +168,28 @@
 		</svg>
 	{/snippet}
 </KnobBase>
+
+<style>
+	svg {
+		outline: none;
+	}
+
+	.line {
+		transition: stroke-width 200ms;
+		stroke-width: var(--stroke-width);
+	}
+
+	.focus {
+		display: none;
+	}
+
+	svg:active .focus,
+	svg:focus .focus {
+		display: block;
+	}
+
+	svg:active .line,
+	svg:focus .line {
+		stroke-width: calc(var(--stroke-width) * 1.8);
+	}
+</style>