Improve focus handling and accessibility of dialogs (#122)

Author: andreas-taranetz

src/components/SpeakersDetailDialog.astro src/components/SpeakerDetailModal.astrosrc/components/SpeakersDetailDialog.astro renamed to src/components/SpeakerDetailModal.astro

@@ -8,26 +8,29 @@ import type { CollectionEntry } from "astro:content";
 type Speaker = CollectionEntry<"speakers">["data"];
 
 interface Props {
-	speakers: Speaker[];
+	speaker: Speaker;
 	showSessions?: boolean;
 }
 
-const { speakers, showSessions = true } = Astro.props;
+const { speaker, showSessions = true } = Astro.props;
 ---
 
 {
-	speakers.map((speaker) => (
+	(
 		<dialog
 			id={`speaker-${speaker.id}`}
 			closedby="any"
 			aria-labelledby={`speaker-${speaker.id}-name`}
 		>
 			<header>
-				<form method="dialog">
-					<button type="submit" class="close-button" aria-label="Close modal">
-						✕
-					</button>
-				</form>
+				<button
+					autofocus
+					commandfor={`speaker-${speaker.id}`}
+					command="close"
+					aria-label="Close speaker details"
+				>
+					✕
+				</button>
 				<div>
 					<PersonCard
 						name={speaker.fullName}
@@ -75,7 +78,7 @@ const { speakers, showSessions = true } = Astro.props;
 				)}
 			</div>
 		</dialog>
-	))
+	)
 }
 
 <style>
@@ -165,25 +168,22 @@ const { speakers, showSessions = true } = Astro.props;
 		justify-content: center;
 	}
 
-	.close-button {
+	button {
 		all: unset;
-		cursor: pointer;
 		font-size: var(--text-xl);
-		line-height: 1;
+		padding-inline: 0.5rem;
 		color: var(--color-text-light);
 		transition: color 0.2s ease;
-		flex-shrink: 0;
-		align-self: flex-start;
 		position: absolute;
 		top: var(--space-6);
 		right: var(--space-6);
 	}
 
-	.close-button:hover {
+	button:hover {
 		color: var(--color-text);
 	}
 
-	.close-button:focus-visible {
+	button:focus-visible {
 		outline: 2px solid var(--color-purple);
 		outline-offset: 2px;
 		border-radius: var(--radius);
@@ -266,7 +266,7 @@ const { speakers, showSessions = true } = Astro.props;
 			padding: var(--space-4);
 		}
 
-		.close-button {
+		button {
 			top: var(--space-4);
 			right: var(--space-4);
 		}

src/pages/home-page/sections/Tickets.astro

@@ -1,7 +1,7 @@
 ---
 import Button from "@components/Button.astro";
 import PersonCard from "@components/PersonCard.astro";
-import SpeakersDetailDialog from "@components/SpeakersDetailDialog.astro";
+import SpeakerDetailModal from "@components/SpeakerDetailModal.astro";
 import { getCollection } from "astro:content";
 
 const speakers = (await getCollection("speakers")).map((entry) => entry.data);
@@ -12,26 +12,29 @@ const displayedSpeakers = speakers.slice(0, 5);
 <section aria-labelledby="tickets">
 	<h2 id="tickets">Tickets</h2>
 	<div>
-		<div>
+		<ul>
 			{
 				displayedSpeakers.map((speaker) => (
-					<button
-						type="button"
-						commandfor={`speaker-${speaker.id}`}
-						command="show-modal"
-						data-speaker-target={`speaker-${speaker.id}`}
-						aria-label={`View details for ${speaker.fullName}`}
-					>
-						<PersonCard
-							name={speaker.fullName}
-							image={speaker.profilePicture}
-							showMeta={false}
-							sizes="(max-width: 768px) 80px, 120px"
-						/>
-					</button>
+					<li>
+						<SpeakerDetailModal speaker={speaker} />
+						<button
+							type="button"
+							commandfor={`speaker-${speaker.id}`}
+							command="show-modal"
+							data-speaker-target={`speaker-${speaker.id}`}
+							aria-label={`View details for ${speaker.fullName}`}
+						>
+							<PersonCard
+								name={speaker.fullName}
+								image={speaker.profilePicture}
+								showMeta={false}
+								sizes="(max-width: 768px) 80px, 120px"
+							/>
+						</button>
+					</li>
 				))
 			}
-		</div>
+		</ul>
 
 		<div>
 			<p>
@@ -48,8 +51,6 @@ const displayedSpeakers = speakers.slice(0, 5);
 	</div>
 </section>
 
-<SpeakersDetailDialog speakers={displayedSpeakers} />
-
 <style>
 	section {
 		display: flex;
@@ -74,14 +75,24 @@ const displayedSpeakers = speakers.slice(0, 5);
 		margin-inline: auto;
 	}
 
-	section > div > div:first-child {
+	section > div > ul {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		max-width: 700px;
+		padding: 0;
+		margin: 0;
 	}
 
-	section > div > div:first-child > button {
+	ul > li {
+		list-style: none;
+	}
+
+	ul > li:not(:first-child) {
+		margin-left: -24px;
+	}
+
+	ul > li > button {
 		display: block;
 		all: unset;
 		cursor: pointer;
@@ -93,64 +104,60 @@ const displayedSpeakers = speakers.slice(0, 5);
 		transition: transform 0.2s ease;
 	}
 
-	section > div > div:first-child > button:hover {
+	ul > li > button:hover {
 		--lift: -10px;
 		z-index: 6;
 	}
 
-	section > div > div:first-child > button:focus-visible {
+	ul > li > button:focus-visible {
 		--lift: -10px;
 		z-index: 6;
 		outline: 2px solid var(--color-purple);
 		outline-offset: 4px;
 		border-radius: var(--radius);
 	}
 
-	section > div > div:first-child > button + button {
-		margin-left: -24px;
-	}
-
 	@media (min-width: 768px) {
-		section > div > div:first-child > button {
+		ul > li > button {
 			width: 120px;
 		}
 
-		section > div > div:first-child > button + button {
+		ul > li:not(:first-child) {
 			margin-left: -36px;
 		}
 	}
 
-	section > div > div:first-child > button:nth-child(1) {
+	ul > li:nth-child(1) {
 		--base-y: 8px;
 		--tilt: -8deg;
 		z-index: 1;
 	}
 
-	section > div > div:first-child > button:nth-child(2) {
+	ul > li:nth-child(2) {
 		--base-y: 3px;
 		--tilt: -4deg;
 		z-index: 2;
 	}
 
-	section > div > div:first-child > button:nth-child(3) {
+	section > div > ul > li:nth-child(3) {
 		--base-y: 0px;
 		--tilt: 0deg;
 		z-index: 3;
 	}
 
-	section > div > div:first-child > button:nth-child(4) {
+	section > div > ul > li:nth-child(4) {
 		--base-y: 3px;
 		--tilt: 4deg;
 		z-index: 4;
 	}
 
-	section > div > div:first-child > button:nth-child(5) {
+	section > div > ul > li:nth-child(5) {
 		--base-y: 8px;
 		--tilt: 8deg;
 		z-index: 5;
 	}
 
-	section > div > div:nth-child(2) {
+	section > div > div:last-child {
 		text-align: center;
 		display: flex;
 		flex-direction: column;
@@ -182,12 +189,12 @@ const displayedSpeakers = speakers.slice(0, 5);
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		section > div > div:first-child > button {
+		section > div > ul > li > button {
 			transition: none;
 		}
 
-		section > div > div:first-child > button:hover,
-		section > div > div:first-child > button:focus-visible {
+		section > div > ul > li > button:hover,
+		section > div > ul > li > button:focus-visible {
 			--lift: 0;
 		}
 	}

src/pages/sessions.astro

@@ -1,8 +1,9 @@
 ---
 import PersonCard from "@components/PersonCard.astro";
-import SpeakersDetailDialog from "@components/SpeakersDetailDialog.astro";
+import SpeakerDetailModal from "@components/SpeakerDetailModal.astro";
 import Layout from "@layouts/Layout.astro";
 import { getCollection } from "astro:content";
+import Speakers from "./speakers.astro";
 
 const speakers = await getCollection("speakers");
 const speakersById = new Map(speakers.map((entry) => [entry.data.id, entry.data]));
@@ -40,6 +41,7 @@ const sessionSpeakers = speakers
 									{session.speakers.map(
 										(speaker) =>
 											speaker.profilePicture && (
+												<SpeakerDetailModal speaker={sessionSpeakers.find((s) => s.id === speaker.id)!} showSessions={false} />
 												<button
 													type="button"
 													commandfor={`speaker-${speaker.id}`}
@@ -96,8 +98,6 @@ const sessionSpeakers = speakers
 		)
 	}
 
-	<SpeakersDetailDialog speakers={sessionSpeakers} showSessions={false} />
-
 	<style>
 		h1 {
 			text-align: center;

src/pages/speakers.astro

@@ -1,6 +1,6 @@
 ---
 import PersonCard from "@components/PersonCard.astro";
-import SpeakersDetailDialog from "@components/SpeakersDetailDialog.astro";
+import SpeakerDetailModal from "@components/SpeakerDetailModal.astro";
 import Layout from "@layouts/Layout.astro";
 import { getCollection, type CollectionEntry } from "astro:content";
 
@@ -17,6 +17,7 @@ const speakers = (await getCollection("speakers")).map((entry) => entry.data) as
 	<section class="speakers-grid">
 		{
 			speakers.map((speaker) => (
+				<SpeakerDetailModal speaker={speaker} />
 				<button
 					type="button"
 					commandfor={`speaker-${speaker.id}`}
@@ -35,8 +36,6 @@ const speakers = (await getCollection("speakers")).map((entry) => entry.data) as
 		}
 	</section>
 
-	<SpeakersDetailDialog speakers={speakers} />
-
 	<style>
 		h1 {
 			text-align: center;