From 072679758bd81502c941e63fb100ff95983f3de2 Mon Sep 17 00:00:00 2001
From: Josh Goldberg <git@joshuakgoldberg.com>
Date: Wed, 11 Sep 2024 08:27:58 -0400
Subject: [PATCH] fix: assorted a11y fixes

---
 src/components/BioLinks.astro     |  9 ++++++---
 src/components/Session.astro      |  6 +++++-
 src/components/SpeakerSmall.astro | 13 ++++++++++---
 src/pages/travel.astro            |  1 +
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/BioLinks.astro b/src/components/BioLinks.astro
index 188d91f..7932da5 100644
--- a/src/components/BioLinks.astro
+++ b/src/components/BioLinks.astro
@@ -88,11 +88,13 @@ const aliases = [
 		align-items: center;
 		display: flex;
 		flex-wrap: wrap;
-		gap: 0.25rem 0.5rem;
+		gap: 0 var(--bioLinkPadding);
+		margin-left: calc(-1 * var(--bioLinkPadding));
+		--bioLinkPadding: 0.25rem;
 	}
 
 	.bio-links-normal {
-		--bioLinkImageSize: 1.15rem;
+		--bioLinkImageSize: 1.2rem;
 	}
 
 	.bio-links-large {
@@ -101,7 +103,8 @@ const aliases = [
 
 	.bio-link {
 		display: flex;
-		gap: 0.25rem;
+		gap: var(--bioLinkPadding);
+		padding: var(--bioLinkPadding);
 		text-decoration: none;
 	}
 
diff --git a/src/components/Session.astro b/src/components/Session.astro
index 3f3b6b4..1342aca 100644
--- a/src/components/Session.astro
+++ b/src/components/Session.astro
@@ -33,7 +33,11 @@ const {
 			<ul class="speakers">
 				{
 					people.map((person) => (
-						<SpeakerSmall href={`/speakers#${person.slug}`} person={person} />
+						<SpeakerSmall
+							as="li"
+							href={`/speakers#${person.slug}`}
+							person={person}
+						/>
 					))
 				}
 			</ul>
diff --git a/src/components/SpeakerSmall.astro b/src/components/SpeakerSmall.astro
index c86284a..c69a0e8 100644
--- a/src/components/SpeakerSmall.astro
+++ b/src/components/SpeakerSmall.astro
@@ -5,15 +5,22 @@ import SafeMarkdown from "./SafeMarkdown.astro";
 import SpeakerImage from "./SpeakerImage.astro";
 
 interface Props {
+	as: "div" | "li";
 	class?: string;
 	href?: string;
 	person: Person;
 }
 
-const { class: className, href, person: speaker, ...rest } = Astro.props;
+const {
+	as: As = "div",
+	class: className,
+	href,
+	person: speaker,
+	...rest
+} = Astro.props;
 ---
 
-<div class:list={["speaker-small", className]} {...rest}>
+<As class:list={["speaker-small", className]} {...rest}>
 	<div class="speaker-image-container">
 		<SpeakerImage name={speaker.name} slug={speaker.slug} />
 	</div>
@@ -42,7 +49,7 @@ const { class: className, href, person: speaker, ...rest } = Astro.props;
 		</div>
 		<slot />
 	</div>
-</div>
+</As>
 
 <style>
 	.speaker-small {
diff --git a/src/pages/travel.astro b/src/pages/travel.astro
index f7f4ee0..168d872 100644
--- a/src/pages/travel.astro
+++ b/src/pages/travel.astro
@@ -28,6 +28,7 @@ import ContentLayout from "~/layouts/ContentLayout.astro";
 			referrerpolicy="no-referrer-when-downgrade"
 			src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2948.2374277204103!2d-71.05276952319306!3d42.35877907119312!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e3708790db7415%3A0xa9fbb8bf1c5e8e24!2sSimons%20Theatre!5e0!3m2!1sen!2sus!4v1724284919111!5m2!1sen!2sus"
 			style="border:0;"
+			title="Simons Theatre on Google Maps"
 			width="600"></iframe>
 
 		<div class="travel-links">