Minor adjustment to the alt text and layout

src/components/council/CouncilAvatar.svelte

@@ -20,7 +20,12 @@
 	class="bg-ecsess-600/50 relative aspect-square size-20 overflow-hidden rounded-full sm:size-24"
 >
 	{#if src && !imageError}
-		<img {src} alt={name} class="h-full w-full object-cover" onerror={handleImageError} />
+		<img
+			{src}
+			alt={`Profile picture of ${name}`}
+			class="h-full w-full object-cover"
+			onerror={handleImageError}
+		/>
 	{:else}
 		<div
 			class="bg-ecsess-500 text-ecsess-950 flex h-full w-full items-center justify-center text-lg font-bold"

src/components/council/CouncilCard.svelte

@@ -33,7 +33,7 @@
 		{#if image && !imageError}
 			<img
 				src={image}
-				alt={name}
+				alt={`Profile picture of ${name} for the position of ${position}`}
 				class="h-full w-full object-cover object-center"
 				onerror={handleImageError}
 			/>

src/components/council/CouncilCardPopUp.svelte

@@ -44,7 +44,7 @@
 			{#if image && !imageError}
 				<img
 					src={image}
-					alt={name}
+					alt={`Profile picture of ${name} for the position of ${position}`}
 					class="h-full w-full object-cover object-center"
 					onerror={handleImageError}
 				/>

src/routes/council/+page.svelte

@@ -181,7 +181,7 @@
 		<div
 			bind:this={modalRef}
 			tabindex="-1"
-			class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-black/70 p-4 backdrop-blur-sm outline-none"
+			class="focus-visible:ring-ecsess-400 fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-black/70 p-4 backdrop-blur-sm outline-none focus-visible:ring-2 focus-visible:ring-inset"
 			role="dialog"
 			aria-modal="true"
 			aria-labelledby="popup-title"