From a1bf2a0d0068a5f4a9f12c3b597a2c83d529dc3c Mon Sep 17 00:00:00 2001
From: Josh Goldberg <git@joshuakgoldberg.com>
Date: Thu, 22 Aug 2024 14:39:42 -0400
Subject: [PATCH] fix: speaker-small list items should be <li>s

---
 package.json                         | 2 +-
 src/components/Speaker.astro         | 6 ++----
 src/components/SpeakerSmall.astro    | 6 +++---
 src/components/SpeakersContent.astro | 2 +-
 src/components/SubtleCard.astro      | 8 +++++---
 src/pages/speakers.astro             | 1 -
 6 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 67c6e10..8fc9220 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
 		"@fontsource-variable/josefin-sans": "5.0.21",
 		"@fontsource/urbanist": "5.0.20",
 		"@types/eslint-plugin-markdown": "2.0.2",
-		"accessible-astro-components": "2.3.6",
+		"accessible-astro-components": "^2.3.6",
 		"astro": "4.11.5",
 		"cspell": "8.10.4",
 		"eslint": "8.57.0",
diff --git a/src/components/Speaker.astro b/src/components/Speaker.astro
index fdbdcd1..d967f59 100644
--- a/src/components/Speaker.astro
+++ b/src/components/Speaker.astro
@@ -10,14 +10,12 @@ import SubtleCard from "./SubtleCard.astro";
 interface Props {
 	class?: string;
 	showBioLinkText?: boolean;
-	renderAs: "div" | "li";
 	speaker: Person;
 	talks: TalkInfo[];
 }
 
 const {
 	class: className,
-	renderAs: As,
 	showBioLinkText,
 	speaker: { links, qualification, name, role, slug },
 	talks,
@@ -25,7 +23,7 @@ const {
 } = Astro.props;
 ---
 
-<As class:list={["speaker", className]} id={slug} {...rest}>
+<li class:list={["speaker", className]} id={slug} {...rest}>
 	<SubtleCard>
 		<div class="speaker-top">
 			<div class="speaker-top-content">
@@ -81,7 +79,7 @@ const {
 			}
 		</div>
 	</SubtleCard>
-</As>
+</li>
 
 <style>
 	.speaker {
diff --git a/src/components/SpeakerSmall.astro b/src/components/SpeakerSmall.astro
index f976d4a..43f0a86 100644
--- a/src/components/SpeakerSmall.astro
+++ b/src/components/SpeakerSmall.astro
@@ -13,7 +13,7 @@ interface Props {
 const { class: className, href, person: speaker, ...rest } = Astro.props;
 ---
 
-<li class:list={["speaker", className]} {...rest}>
+<div class:list={["speaker-small", className]} {...rest}>
 	<div class="speaker-image-container">
 		<SpeakerImage name={speaker.name} slug={speaker.slug} />
 	</div>
@@ -42,10 +42,10 @@ const { class: className, href, person: speaker, ...rest } = Astro.props;
 		</div>
 		<slot />
 	</div>
-</li>
+</div>
 
 <style>
-	.speaker {
+	.speaker-small {
 		position: relative;
 		align-items: center;
 		display: flex;
diff --git a/src/components/SpeakersContent.astro b/src/components/SpeakersContent.astro
index 161d153..009bfa5 100644
--- a/src/components/SpeakersContent.astro
+++ b/src/components/SpeakersContent.astro
@@ -23,7 +23,7 @@ import BioLinks from "./BioLinks.astro";
 		{
 			talks.flatMap((talk) =>
 				talk.people.map((person) => (
-					<SubtleCard class="speaker-card">
+					<SubtleCard class="speaker-card" renderAs="li">
 						<SpeakerSmall href={`/talks#${talk.slug}`} person={person}>
 							<BioLinks
 								class="speaker-bio-links"
diff --git a/src/components/SubtleCard.astro b/src/components/SubtleCard.astro
index 6a92f8a..efda028 100644
--- a/src/components/SubtleCard.astro
+++ b/src/components/SubtleCard.astro
@@ -1,14 +1,15 @@
 ---
 interface Props {
 	class?: string;
+	renderAs?: "div" | "li";
 }
 
-const { class: className, ...rest } = Astro.props;
+const { class: className, renderAs: As = "div", ...rest } = Astro.props;
 ---
 
-<div class:list={["subtle-card", className]} {...rest}>
+<As class:list={["subtle-card", className]} {...rest}>
 	<slot />
-</div>
+</As>
 
 <style>
 	.subtle-card {
@@ -19,6 +20,7 @@ const { class: className, ...rest } = Astro.props;
 		border: 1px solid var(--colorBackdropOff);
 		box-shadow: 0 0 0.125rem var(--colorTextShadow);
 		font-family: var(--fontFamilyBody);
+		list-style: none;
 		padding: var(--cardPadding);
 	}
 </style>
diff --git a/src/pages/speakers.astro b/src/pages/speakers.astro
index 3a6f872..e1979c1 100644
--- a/src/pages/speakers.astro
+++ b/src/pages/speakers.astro
@@ -32,7 +32,6 @@ const speakersToExclude = new Set([
 					)
 					.map((person) => (
 						<Speaker
-							renderAs="li"
 							speaker={person}
 							talks={Object.values(talksBySlug).filter((talk) =>
 								talk.people.includes(person),