site: make REPL user menu keyboard accessible (#8831)

Author: geoffrich

pnpm-lock.yaml

@@ -30,7 +30,7 @@
 		"@resvg/resvg-js": "^2.4.1",
 		"@sveltejs/adapter-vercel": "^3.0.1",
 		"@sveltejs/kit": "^1.20.5",
-		"@sveltejs/site-kit": "6.0.0-next.17",
+		"@sveltejs/site-kit": "6.0.0-next.18",
 		"@sveltejs/vite-plugin-svelte": "^2.4.2",
 		"@types/marked": "^5.0.0",
 		"@types/node": "^20.3.1",

sites/svelte.dev/package.json

@@ -191,7 +191,7 @@ export default app;`
 <div class="app-controls">
 	<input bind:value={name} on:focus={(e) => e.target.select()} use:enter={(e) => e.target.blur()} />
 
-	<div style="text-align: right; margin-right:.4rem">
+	<div class="buttons">
 		<button class="icon" on:click={() => (zen_mode = !zen_mode)} title="fullscreen editor">
 			{#if zen_mode}
 				<Icon name="close" />
@@ -251,23 +251,28 @@ export default app;`
 		flex: 0;
 	}
 
+	.buttons {
+		text-align: right;
+		margin-right: 0.4rem;
+		display: flex;
+		align-items: center;
+		gap: 0.2em;
+	}
+
 	.icon {
-		position: relative;
-		top: -0.1rem;
+		transform: translateY(0.1rem);
 		display: inline-block;
 		padding: 0.2em;
 		opacity: 0.7;
 		transition: opacity 0.3s;
 		font-family: var(--sk-font);
 		font-size: 1.6rem;
 		color: var(--sk-text-1);
-		/* width: 1.6em;
-		height: 1.6em; */
 		line-height: 1;
-		margin: 0 0 0 0.2em;
 	}
 
-	.icon:hover {
+	.icon:hover,
+	.icon:focus-visible {
 		opacity: 1;
 	}
 	.icon:disabled {

sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { getContext } from 'svelte';
-
+	import { Icon } from '@sveltejs/site-kit/components';
+	import { click_outside, focus_outside } from '@sveltejs/site-kit/actions';
 	const { logout } = getContext('app');
 
 	export let user;
@@ -11,9 +12,21 @@
 	$: name = user.github_name || user.github_login;
 </script>
 
-<div class="user" on:mouseenter={() => (showMenu = true)} on:mouseleave={() => (showMenu = false)}>
-	<span>{name}</span>
-	<img alt="{name} avatar" src={user.github_avatar_url} />
+<div
+	class="user"
+	use:focus_outside={() => (showMenu = false)}
+	use:click_outside={() => (showMenu = false)}
+>
+	<button
+		on:click={() => (showMenu = !showMenu)}
+		aria-expanded={showMenu}
+		class="trigger"
+		aria-label={name}
+	>
+		<span class="name">{name}</span>
+		<img alt="" src={user.github_avatar_url} />
+		<Icon name={showMenu ? 'chevron-up' : 'chevron-down'} />
+	</button>
 
 	{#if showMenu}
 		<div class="menu">
@@ -27,43 +40,44 @@
 	.user {
 		position: relative;
 		display: inline-block;
-		padding: 0em 1.2rem 0 1.6rem;
-		height: 0.8em;
-		line-height: 1;
+		padding: 0em 0 0 0.3rem;
 		z-index: 99;
 	}
 
-	.user::after {
-		/* embiggen hit zone, so log out menu doesn't disappear */
-		position: absolute;
-		content: '';
-		width: 100%;
-		height: 3.2rem;
-		left: 0;
-		top: 0;
+	.trigger {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		outline-offset: 2px;
+		transform: translateY(0.1rem);
+		--opacity: 0.7;
+	}
+
+	.trigger:hover,
+	.trigger:focus-visible,
+	.trigger[aria-expanded='true'] {
+		--opacity: 1;
 	}
 
-	span {
-		/* position: relative; padding: 0 2em 0 0; */
+	.name {
 		line-height: 1;
 		display: none;
 		font-family: var(--sk-font);
 		font-size: 1.6rem;
-		opacity: 0.7;
 	}
 
-	.user:hover span {
-		opacity: 1;
+	.name,
+	.trigger :global(.icon) {
+		display: none;
+		opacity: var(--opacity);
 	}
 
 	img {
-		position: absolute;
-		top: -0.05em;
-		right: 0;
 		width: 2.1rem;
 		height: 2.1rem;
 		border: 1px solid rgba(255, 255, 255, 0.3);
 		border-radius: 0.2rem;
+		transform: translateY(-0.1rem);
 	}
 
 	.menu {
@@ -95,22 +109,25 @@
 	}
 
 	.menu button:hover,
-	.menu a:hover {
+	.menu button:focus-visible,
+	.menu a:hover,
+	.menu a:focus-visible {
 		opacity: 1;
 		color: inherit;
 	}
 
 	@media (min-width: 600px) {
 		.user {
-			padding: 0em 3.2rem 0 1.6rem;
+			padding: 0em 0 0 1.6rem;
 		}
 
 		img {
 			width: 2.4rem;
 			height: 2.4rem;
 		}
 
-		span {
+		.name,
+		.trigger :global(.icon) {
 			display: inline-block;
 		}
 	}