fix: assorted a11y fixes

SquiggleTools · Sep 11, 2024 · 0726797 · 0726797
1 parent 3351b94
commit 0726797
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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">