refactor: various a11y improvements

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>

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"

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,23 +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)) {
 					return;

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,13 +87,26 @@ const isVertical = orientation === 'vertical';
 
 					this.activeTab = checkedTab?.dataset.tab || null;
 				},
+
 				setActiveTab(e) {
 					const tab = e.target.closest('[role="tab"]');
 
 					if (!tab) {
 						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;
 				},

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;
@@ -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));
 	}
@@ -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>

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>

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 {
@@ -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;
 	}
 

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,9 @@ const records: { name: string; title: string; selected: boolean }[] = [
 								id={`type_${type.name}`}
 								checked={type.selected}
 							/>
-							<label class="" for={`type_${type.name}`}>
+							<label for={`type_${type.name}`}>
 								{type.title}
+								<span class="sr-only"> record</span>
 							</label>
 						</>
 					))

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>

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,13 @@ 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 +105,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;">

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;
 	}
 

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;
 }
 
@@ -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);