fix: speaker-small list items should be <li>s

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",

src/components/Speaker.astro

@@ -10,22 +10,20 @@ 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,
 	...rest
 } = 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 {

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;

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"

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>

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),