From 6ed5b1c8e3dc1c1d389e9b36e71b71d9d1d1447c Mon Sep 17 00:00:00 2001
From: Dan Gibbs <daniel.gibbs@gmail.com>
Date: Sun, 12 Apr 2026 15:04:28 +0100
Subject: [PATCH 1/6] Remove autofocus from tools. Increase checkbox label
 size. Use meaningful labels

---
 src/pages/tools/dns.astro      |  9 ++++-----
 src/pages/tools/mkpasswd.astro |  1 -
 src/pages/tools/pwgen.astro    | 10 +++++-----
 src/styles/forms.css           |  2 +-
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/pages/tools/dns.astro b/src/pages/tools/dns.astro
index 843be1a..e4ba8b8 100644
--- a/src/pages/tools/dns.astro
+++ b/src/pages/tools/dns.astro
@@ -125,16 +125,15 @@ const records: { name: string; title: string; selected: boolean }[] = [
 				<legend class="hidden">DNS Tool</legend>
 
 				<div class="col">
-					<label for="name">Name</label>
+					<label for="name">Hostname</label>
 					<input
 						type="text"
 						id="name"
 						name="name"
-						placeholder="e.g. google.com"
+						placeholder="google.com"
 						minlength="1"
 						maxlength="255"
 						autocomplete="off"
-						autofocus
 						required
 					/>
 				</div>
@@ -164,8 +163,8 @@ const records: { name: string; title: string; selected: boolean }[] = [
 								id={`type_${type.name}`}
 								checked={type.selected}
 							/>
-							<label class="" for={`type_${type.name}`}>
-								{type.title}
+							<label for={`type_${type.name}`}>
+								{type.title}<span class="sr-only"> record</span>
 							</label>
 						</>
 					))
diff --git a/src/pages/tools/mkpasswd.astro b/src/pages/tools/mkpasswd.astro
index 1a4a2ec..9c8886e 100644
--- a/src/pages/tools/mkpasswd.astro
+++ b/src/pages/tools/mkpasswd.astro
@@ -26,7 +26,6 @@ const frontmatter = generateFrontmatter(tool);
 						pattern="([A-z0-9À-ž\s]){1,}"
 						x-bind:disabled="loading"
 						autocomplete="off"
-						autofocus
 						required
 					/>
 				</div>
diff --git a/src/pages/tools/pwgen.astro b/src/pages/tools/pwgen.astro
index f0ad593..0f8f534 100644
--- a/src/pages/tools/pwgen.astro
+++ b/src/pages/tools/pwgen.astro
@@ -74,7 +74,7 @@ const pwgenCheckboxes: { name: string; title: string; desc: string }[] = [
 						required
 						x-bind:disabled="loading"
 					/>
-					<span class="form-helper form-helper--active all">Password length (max 1024)</span>
+					<span class="form-helper form-helper--active all">The password length (max 1024)</span>
 				</div>
 
 				<div class="col">
@@ -90,11 +90,11 @@ const pwgenCheckboxes: { name: string; title: string; desc: string }[] = [
 						required
 						x-bind:disabled="loading"
 					/>
-					<span class="form-helper form-helper--active all">Number of passwords (max 100)</span>
+					<span class="form-helper form-helper--active all">The number of passwords to generate (max 100)</span>
 				</div>
 
 				<div class="col">
-					<label for="remove-chars" class="form-label">Remove Characters</label>
+					<label for="remove-chars" class="form-label">Character Removal</label>
 					<input
 						type="text"
 						class="form-control"
@@ -103,10 +103,10 @@ const pwgenCheckboxes: { name: string; title: string; desc: string }[] = [
 						minlength="0"
 						maxlength="65"
 						value=""
-						placeholder="e.g. !£$%^&*()"
+						placeholder="!£$%^&*()"
 						x-bind:disabled="loading"
 					/>
-					<span class="form-helper form-helper--active all">Ignore the specified characters</span>
+					<span class="form-helper form-helper--active all">Characters to be ignored.</span>
 				</div>
 
 				<div class="col" style="align-self: center;">
diff --git a/src/styles/forms.css b/src/styles/forms.css
index dcd085a..3264df0 100644
--- a/src/styles/forms.css
+++ b/src/styles/forms.css
@@ -134,7 +134,7 @@ body {
 
 	.form-checkbox-label {
 		font-weight: normal;
-		font-size: small;
+		font-size: normal;
 		margin: var(--gap-xs) 0;
 	}
 

From c0528d13682176611bbdd05347013585c39b4393 Mon Sep 17 00:00:00 2001
From: Dan Gibbs <daniel.gibbs@gmail.com>
Date: Sun, 12 Apr 2026 15:25:29 +0100
Subject: [PATCH 2/6] Sizing and opacity adjustments

---
 src/components/Block/SchemePreference.astro | 4 ++--
 src/components/Block/TechStack.astro        | 2 +-
 src/pages/index.astro                       | 2 +-
 src/styles/layout.css                       | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Block/SchemePreference.astro b/src/components/Block/SchemePreference.astro
index 857145d..1b4422f 100644
--- a/src/components/Block/SchemePreference.astro
+++ b/src/components/Block/SchemePreference.astro
@@ -14,8 +14,8 @@
 >
 	<svg
 		fill="#000000"
-		width="100px"
-		height="100px"
+		width="20px"
+		height="20px"
 		viewBox="0 0 32 32"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/Block/TechStack.astro b/src/components/Block/TechStack.astro
index 84962c7..c78bfe7 100644
--- a/src/components/Block/TechStack.astro
+++ b/src/components/Block/TechStack.astro
@@ -145,7 +145,7 @@ const tabs = sections.map((section) => ({
 		background-image: none;
 		background-color: var(--surface-1);
 		border: var(--border-width) solid var(--surface-2);
-		padding: var(--gap-xs) var(--gap);
+		padding: var(--gap) var(--gap);
 		white-space: nowrap;
 		border-radius: calc(var(--border-radius));
 	}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cbae398..3250509 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -90,7 +90,7 @@ const frontmatter = generateFrontmatter(page, 'Website');
 	}
 
 	.header::before {
-		background-color: oklch(0% 0 0 / 0.45);
+		background-color: oklch(0% 0 0 / 0.75);
 	}
 
 	.header::after {
diff --git a/src/styles/layout.css b/src/styles/layout.css
index 6827985..4f861cc 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -118,7 +118,7 @@ td, th {
 	left: 0;
 	width: 100%;
 	height: 100%;
-	background-color: light-dark(hsla(0, 0%, 0%, 0.6), transparent);
+	background-color: light-dark(hsla(0, 0%, 0%, 0.8), transparent);
 	z-index: -1;
 }
 

From 0a1a913aba824244b8e8ae059a70f4753d874e07 Mon Sep 17 00:00:00 2001
From: Dan Gibbs <daniel.gibbs@gmail.com>
Date: Sun, 12 Apr 2026 15:34:47 +0100
Subject: [PATCH 3/6] Remove hardcoded shortcut for input focus

---
 src/components/Block/SearchBar.astro | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/components/Block/SearchBar.astro b/src/components/Block/SearchBar.astro
index b82f958..0b6c41a 100644
--- a/src/components/Block/SearchBar.astro
+++ b/src/components/Block/SearchBar.astro
@@ -41,7 +41,6 @@ const {
 		@keydown.arrow-up.stop.prevent="highlightPrev()"
 		@keydown.enter.stop.prevent="goToLink()"
 		@keydown.escape.stop.prevent="closeResults()"
-		@keydown.slash.window="focusShortcut($event)"
 		data-search-url={searchUrl}
 		data-search-index={searchIndex}
 		data-search-key={searchKey}
@@ -249,22 +248,6 @@ const {
 				});
 			},
 
-			focusShortcut(e) {
-				if (e.target instanceof HTMLElement && e.target.isContentEditable) {
-					return;
-				}
-
-				if (
-					e.target instanceof HTMLInputElement ||
-					e.target instanceof HTMLTextAreaElement ||
-					e.target instanceof HTMLSelectElement
-				) {
-					return;
-				}
-
-				e.preventDefault();
-				this.getSearchInput().focus();
-			},
 
 			handleFocusOut(e) {
 				if (e.relatedTarget instanceof HTMLElement && this.$el.contains(e.relatedTarget)) {

From ce85706d0474a7f66cd03db8330ec8fced142ba4 Mon Sep 17 00:00:00 2001
From: Dan Gibbs <daniel.gibbs@gmail.com>
Date: Sun, 12 Apr 2026 16:04:15 +0100
Subject: [PATCH 4/6] Remove CSS ordering of elements, reorder header structure
 for consistency.

---
 src/components/Layout/Header.astro |  4 ++--
 src/styles/layout.css              | 10 ----------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/components/Layout/Header.astro b/src/components/Layout/Header.astro
index 70c0634..2c5a106 100644
--- a/src/components/Layout/Header.astro
+++ b/src/components/Layout/Header.astro
@@ -5,9 +5,9 @@ import SearchBar from '@components/Block/SearchBar.astro';
 ---
 
 <header class="header">
-	<SchemePreference />
-	<SearchBar />
 	<Navigation />
+	<SearchBar />
+	<SchemePreference />
 
 	<slot name="header" slot="header" />
 </header>
diff --git a/src/styles/layout.css b/src/styles/layout.css
index 4f861cc..490164d 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -365,21 +365,11 @@ td, th {
 		border-radius: var(--gap-xs) 0;
 	}
 
-	.logo,
-	.scheme-preference {
-		order: 2;
-	}
-
 	.nav {
 		flex-direction: row;
-		order: 0;
 		padding: var(--gap-xs) 0;
 	}
 
-	.search-bar {
-		order: 1;
-	}
-
 	.nav-item {
 		width: min-content;
 		transition: flex-grow ease-in-out var(--transition-duration);

From bd64c1200714838b2b91f192071e0a74319d8c56 Mon Sep 17 00:00:00 2001
From: Dan Gibbs <daniel.gibbs@gmail.com>
Date: Sun, 12 Apr 2026 16:05:17 +0100
Subject: [PATCH 5/6] Add initial keyboard navigation improvements for tab
 elements

---
 src/components/Block/Tabs.astro | 76 +++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)

diff --git a/src/components/Block/Tabs.astro b/src/components/Block/Tabs.astro
index 98799b9..4c1bd5f 100644
--- a/src/components/Block/Tabs.astro
+++ b/src/components/Block/Tabs.astro
@@ -36,6 +36,10 @@ const isVertical = orientation === 'vertical';
 		class={`${className}-tablist ${isVertical ? 'col' : 'row'}`}
 		role="tablist"
 		aria-label={title}
+		data-orientation={orientation}
+		@keydown="handleTabKeydown"
+		@keydown.home.prevent="focusFirst"
+		@keydown.end.prevent="focusLast"
 	>
 		{
 			tabs.map((tab, i) => (
@@ -83,6 +87,7 @@ const isVertical = orientation === 'vertical';
 
 					this.activeTab = checkedTab?.dataset.tab || null;
 				},
+
 				setActiveTab(e) {
 					const tab = e.target.closest('[role="tab"]');
 
@@ -90,6 +95,18 @@ const isVertical = orientation === 'vertical';
 						return;
 					}
 
+					this.activateTab(tab);
+				},
+
+				activateTab(tab) {
+					const tabs = Array.from(this.$el.querySelectorAll('[role="tab"]'));
+
+					tabs.forEach((t) => {
+						const isActive = t === tab;
+						t.setAttribute('tabindex', isActive ? '0' : '-1');
+						t.setAttribute('aria-selected', isActive ? 'true' : 'false');
+					});
+
 					this.activeTab = tab.dataset.tab;
 					tab.focus();
 
@@ -101,6 +118,65 @@ const isVertical = orientation === 'vertical';
 						}
 					}, 0);
 				},
+
+				focusAdjacentTab(direction) {
+					const tabs = Array.from(this.$el.querySelectorAll('[role="tab"]'));
+					const currentIndex = tabs.indexOf(document.activeElement?.closest('[role="tab"]'));
+
+					if (currentIndex === -1) {
+						return;
+					}
+
+					const newIndex = (currentIndex + direction + tabs.length) % tabs.length;
+					const newTab = tabs[newIndex];
+					const radio = newTab.querySelector('input[type="radio"]');
+
+					if (radio) {
+						radio.checked = true;
+					}
+
+					this.activateTab(newTab);
+				},
+
+				focusFirst() {
+					const tabs = Array.from(this.$el.querySelectorAll('[role="tab"]'));
+					const first = tabs[0];
+					const radio = first?.querySelector('input[type="radio"]');
+
+					if (radio) {
+						radio.checked = true;
+					}
+
+					this.activateTab(first);
+				},
+
+				focusLast() {
+					const tabs = Array.from(this.$el.querySelectorAll('[role="tab"]'));
+					const last = tabs[tabs.length - 1];
+					const radio = last?.querySelector('input[type="radio"]');
+
+					if (radio) {
+						radio.checked = true;
+					}
+
+					this.activateTab(last);
+				},
+
+				handleTabKeydown(e) {
+					const isVertical = e.currentTarget?.dataset.orientation === 'vertical';
+					const keyToDirection = isVertical
+						? { ArrowUp: -1, ArrowDown: 1 }
+						: { ArrowLeft: -1, ArrowRight: 1 };
+					const direction = keyToDirection[e.key];
+
+					if (direction === undefined) {
+						return;
+					}
+
+					e.preventDefault();
+					this.focusAdjacentTab(direction);
+				},
+
 				isActiveTab() {
 					return this.activeTab === this.$el.dataset.tabPanel;
 				},

From c0f9b16c5367fc544d8f0f75689ecd518cd786f7 Mon Sep 17 00:00:00 2001
From: Dan Gibbs <daniel.gibbs@gmail.com>
Date: Sun, 12 Apr 2026 16:05:54 +0100
Subject: [PATCH 6/6] Minor spacing and layout amendments

---
 src/components/Block/GithubActivityFeed.astro | 2 +-
 src/components/Block/SearchBar.astro          | 1 -
 src/components/Block/TechStack.astro          | 4 ++--
 src/pages/index.astro                         | 3 ++-
 src/pages/tools/dns.astro                     | 3 ++-
 src/pages/tools/pwgen.astro                   | 4 +++-
 6 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/Block/GithubActivityFeed.astro b/src/components/Block/GithubActivityFeed.astro
index 2755a8a..18b72ca 100644
--- a/src/components/Block/GithubActivityFeed.astro
+++ b/src/components/Block/GithubActivityFeed.astro
@@ -37,7 +37,7 @@ import '@styles/icons.css';
 								class="xat-link"
 								:href="item.commit.url"
 								:title="'Commit: ' + item.commit.hash"
-								x-text="item.commit.hash">item.commit.hash</a
+								x-text="item.commit.hash"><span class="sr-only">Commit </span>item.commit.hash</a
 							>
 						</li>
 					</template>
diff --git a/src/components/Block/SearchBar.astro b/src/components/Block/SearchBar.astro
index 0b6c41a..2c32419 100644
--- a/src/components/Block/SearchBar.astro
+++ b/src/components/Block/SearchBar.astro
@@ -248,7 +248,6 @@ const {
 				});
 			},
 
-
 			handleFocusOut(e) {
 				if (e.relatedTarget instanceof HTMLElement && this.$el.contains(e.relatedTarget)) {
 					return;
diff --git a/src/components/Block/TechStack.astro b/src/components/Block/TechStack.astro
index c78bfe7..1db3fe4 100644
--- a/src/components/Block/TechStack.astro
+++ b/src/components/Block/TechStack.astro
@@ -129,7 +129,7 @@ const tabs = sections.map((section) => ({
 		flex-direction: row;
 		flex-wrap: nowrap;
 		gap: var(--gap-xs);
-		padding: var(--gap);
+		padding: var(--gap) 0;
 		max-width: 100%;
 		overflow: scroll;
 		scrollbar-width: none;
@@ -196,7 +196,7 @@ const tabs = sections.map((section) => ({
 		.xt-stack-tablist {
 			flex-direction: row;
 			gap: var(--gap-sm);
-			margin: 0 0 var(--gap) 0;
+			margin: 0;
 		}
 	}
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3250509..1745739 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -101,7 +101,7 @@ const frontmatter = generateFrontmatter(page, 'Website');
 		color-scheme: dark;
 		min-height: 100svh;
 		align-content: center;
-		padding: var(--gap);
+		padding: var(--gap) var(--gap) 0 var(--gap);
 		width: 100%;
 		justify-content: center;
 		text-align: center;
@@ -176,6 +176,7 @@ const frontmatter = generateFrontmatter(page, 'Website');
 
 	.container-feed {
 		position: relative;
+		padding-top: 0;
 		padding-bottom: 0;
 	}
 
diff --git a/src/pages/tools/dns.astro b/src/pages/tools/dns.astro
index e4ba8b8..9119d4a 100644
--- a/src/pages/tools/dns.astro
+++ b/src/pages/tools/dns.astro
@@ -164,7 +164,8 @@ const records: { name: string; title: string; selected: boolean }[] = [
 								checked={type.selected}
 							/>
 							<label for={`type_${type.name}`}>
-								{type.title}<span class="sr-only"> record</span>
+								{type.title}
+								<span class="sr-only"> record</span>
 							</label>
 						</>
 					))
diff --git a/src/pages/tools/pwgen.astro b/src/pages/tools/pwgen.astro
index 0f8f534..2ecd6f5 100644
--- a/src/pages/tools/pwgen.astro
+++ b/src/pages/tools/pwgen.astro
@@ -90,7 +90,9 @@ const pwgenCheckboxes: { name: string; title: string; desc: string }[] = [
 						required
 						x-bind:disabled="loading"
 					/>
-					<span class="form-helper form-helper--active all">The number of passwords to generate (max 100)</span>
+					<span class="form-helper form-helper--active all"
+						>The number of passwords to generate (max 100)</span
+					>
 				</div>
 
 				<div class="col">