Fixed keyboard accessibility of dropdowns.

Author: amyjko

CHANGELOG

@@ -9,6 +9,7 @@ Dates should be in`YYYY-MM-DD` format and versions are in [semantic versioning](
 
 - Replaced how delete button with confirm button, to prevent data loss.
 - Fixed incorrect next date in periods computations. All off by one.
+- Fixed keyboard accessibility of dropdowns.
 
 ## v0.7.12 2025-02-18
 

src/lib/Button.svelte

@@ -13,6 +13,7 @@
 		end?: boolean;
 		chromeless?: boolean;
 		children?: import('svelte').Snippet;
+		onkeydown?: (event: KeyboardEvent) => void;
 	}
 
 	let {
@@ -23,7 +24,8 @@
 		warning = false,
 		end = false,
 		chromeless = false,
-		children
+		children,
+		onkeydown
 	}: Props = $props();
 
 	let confirm = $state(false);
@@ -34,6 +36,7 @@
 		<button onclick={() => (confirm = false)}>{Delete}</button><button
 			type={submit ? 'submit' : null}
 			class:warning
+			{onkeydown}
 			onclick={action}>{Confirm}</button
 		>
 	</div>
@@ -46,6 +49,7 @@
 		aria-disabled={!active}
 		title={tip}
 		aria-label={tip}
+		{onkeydown}
 		onclick={(event) => {
 			if (warning) confirm = true;
 			else if (active) {

src/lib/Options.svelte

@@ -52,41 +52,49 @@
 
 	function handleKey(event: KeyboardEvent, option: string | undefined) {
 		if (!(event.currentTarget instanceof HTMLElement)) return;
+		const isOption = event.currentTarget.classList.contains('option');
 		switch (event.key) {
 			case 'Enter':
-				if (event.currentTarget === dropdown) {
+				if (!isOption) {
 					expanded = !expanded;
 					event.stopPropagation();
 				} else {
 					choose(option);
 					event.stopPropagation();
 					event.preventDefault();
+					dropdown?.focus();
 					break;
 				}
 			case 'ArrowDown':
-				if (event.currentTarget === search || event.currentTarget === dropdown) {
+				if (!isOption) {
 					if (list?.firstElementChild instanceof HTMLElement) {
 						expanded = true;
 						list.firstElementChild.focus();
+						event.stopPropagation();
+						event.preventDefault();
 					}
-				} else if (event.currentTarget.parentElement === list) {
+				} else {
 					const next = event.currentTarget.nextElementSibling;
 					if (next instanceof HTMLElement) next.focus();
+					event.stopPropagation();
+					event.preventDefault();
 				}
-				event.stopPropagation();
-				event.preventDefault();
 				break;
 			case 'ArrowUp':
-				if (event.currentTarget.parentElement === list) {
+				if (isOption) {
 					const prev = event.currentTarget.previousElementSibling;
 					if (prev instanceof HTMLElement) prev.focus();
 					else search !== undefined ? search?.focus() : dropdown?.focus();
+					event.stopPropagation();
+					event.preventDefault();
 				}
-				event.stopPropagation();
-				event.preventDefault();
 				break;
 			case 'Escape':
 				expanded = false;
+				dropdown?.focus();
+				event.stopPropagation();
+				event.preventDefault();
+				break;
 		}
 	}
 </script>
@@ -144,6 +152,7 @@
 			<Button
 				chromeless
 				tip="search"
+				onkeydown={(event) => handleKey(event, undefined)}
 				action={() => {
 					searching = !searching;
 					tick().then(() => search?.focus());
@@ -154,6 +163,7 @@
 				chromeless
 				{tip}
 				{active}
+				onkeydown={(event) => handleKey(event, undefined)}
 				action={() => {
 					expanded = !expanded;
 				}}

src/routes/org/[orgid]/process/[processid]/+page.svelte

@@ -149,6 +149,8 @@
 {#snippet concernView(value: string | undefined)}
 	{#if value}
 		<Concern concern={value} />
+	{:else}
+		&mdash;
 	{/if}
 {/snippet}