tweaks

Author: Rich-Harris

packages/site-kit/src/lib/actions/focus.ts

@@ -15,27 +15,29 @@ export function focusable_children(node: HTMLElement) {
 		nodes[i].focus();
 	};
 
-	return {
-		next: (selector?: string) => {
-			const reordered = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)];
+	function traverse(d: number, selector?: string) {
+		const reordered = [...nodes.slice(index), ...nodes.slice(0, index)];
+
+		let i = (reordered.length + d) % reordered.length;
+		let node;
+
+		while ((node = reordered[i])) {
+			i += d;
 
-			for (let i = 0; i < reordered.length; i += 1) {
-				if (!selector || reordered[i].matches(selector)) {
-					reordered[i].focus();
-					return;
-				}
+			if (node.matches('details:not([open]) *')) {
+				continue;
 			}
-		},
-		prev: (selector?: string) => {
-			const reordered = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)];
 
-			for (let i = reordered.length - 2; i >= 0; i -= 1) {
-				if (!selector || reordered[i].matches(selector)) {
-					reordered[i].focus();
-					return;
-				}
+			if (!selector || node.matches(selector)) {
+				node.focus();
+				return;
 			}
-		},
+		}
+	}
+
+	return {
+		next: (selector?: string) => traverse(1, selector),
+		prev: (selector?: string) => traverse(-1, selector),
 		update
 	};
 }

packages/site-kit/src/lib/search/SearchBox.svelte

@@ -181,7 +181,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			/>
 
 			<button aria-label="Close" onclick={close}>
-				<Icon name="close" />
+				<!-- <Icon name="close" /> -->
+				<kbd>Esc</kbd>
 			</button>
 
 			<span id="search-description" class="visually-hidden">
@@ -305,6 +306,10 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			opacity: 1;
 			outline-offset: -3px;
 		}
+
+		kbd {
+			text-transform: uppercase;
+		}
 	}
 
 	ul {

packages/site-kit/src/lib/search/SearchResultList.svelte

@@ -81,7 +81,7 @@
 			&::after {
 				content: '';
 				position: absolute;
-				right: 1rem;
+				right: 1.6rem;
 				top: calc(50% - 1rem);
 				width: 2rem;
 				height: 2rem;