Improve HTML semantics of discrd role list

src/components/widgets/discord/DiscordServerList.tsx

@@ -75,11 +75,11 @@ function Guild({ id, name, iconHash, memberCount, inviteCode, roles, isMember }:
 				src={guildIconUrl}
 			/>
 			<div className="truncate">{name}</div>
-			<div className="flex flex-row flex-wrap items-center gap-2">
+			<ul className="flex flex-row flex-wrap items-center gap-2">
 				{roles.map(r => (
 					<RolePill key={r.id} {...r} />
 				))}
-			</div>
+			</ul>
 			<div className="flex flex-row gap-2 items-center">
 				<div className="w-2 h-2 bg-green-600 rounded-full" />
 				<Message
@@ -113,11 +113,12 @@ interface RolePillProps {
 function RolePill({ name, color }: RolePillProps) {
 	const colorString = colorToHex(color);
 	return (
-		<div
+		<li
 			className="flex flex-row items-baseline gap-1 border rounded-full text-gray-800 pl-1.5 pr-2 py-1"
 			style={{
 				borderColor: colorString,
-			}}>
+			}}
+			aria-label={`Discord Role: ${name}`}>
 			<div
 				className="w-3 h-3 rounded-full bg-teal-400"
 				style={{
@@ -125,6 +126,6 @@ function RolePill({ name, color }: RolePillProps) {
 				}}
 			/>
 			<div className="truncate max-w-[12rem]">{name}</div>
-		</div>
+		</li>
 	);
 }