From 2a93ca91721da255a33fc933a31d3a88409921de Mon Sep 17 00:00:00 2001 From: Geoff Rich <4992896+geoffrich@users.noreply.github.com> Date: Mon, 26 Jun 2023 23:24:45 -0700 Subject: [PATCH] site: make REPL user menu keyboard accessible (#8831) --- pnpm-lock.yaml | 8 +-- sites/svelte.dev/package.json | 2 +- .../(authed)/repl/[id]/AppControls.svelte | 19 +++-- .../routes/(authed)/repl/[id]/UserMenu.svelte | 69 ++++++++++++------- 4 files changed, 60 insertions(+), 38 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0100d8dd1610..c898c9f4d9bd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -185,8 +185,8 @@ importers: specifier: ^1.20.5 version: 1.20.5(svelte@packages+svelte)(vite@4.3.9) '@sveltejs/site-kit': - specifier: 6.0.0-next.17 - version: 6.0.0-next.17(@sveltejs/kit@1.20.5)(svelte@packages+svelte) + specifier: 6.0.0-next.18 + version: 6.0.0-next.18(@sveltejs/kit@1.20.5)(svelte@packages+svelte) '@sveltejs/vite-plugin-svelte': specifier: ^2.4.2 version: 2.4.2(svelte@packages+svelte)(vite@4.3.9) @@ -1800,8 +1800,8 @@ packages: svelte-local-storage-store: 0.4.0(svelte@packages+svelte) dev: false - /@sveltejs/site-kit@6.0.0-next.17(@sveltejs/kit@1.20.5)(svelte@packages+svelte): - resolution: {integrity: sha512-+2AlkIwKtwrfcsvoxSXkRZ5EFI1Rz/8ZZVMi6qmLhPgX0CYm+yyyCslaASmAB+Ztq3JYVwNx+4eQ6Mafeitjiw==} + /@sveltejs/site-kit@6.0.0-next.18(@sveltejs/kit@1.20.5)(svelte@packages+svelte): + resolution: {integrity: sha512-8uWjP61UAkCqWf9UuQQWSCpyPNk4cqnGaQozjIr3sGbQnauTQDiS4K8AxqyBSyphEIrhxd68iYMEFQDQVAHjcg==} peerDependencies: '@sveltejs/kit': ^1.0.0 svelte: ^3.54.0 || ^4.0.0-next.1 || ^4.0.0 diff --git a/sites/svelte.dev/package.json b/sites/svelte.dev/package.json index 3c10ade3f683..6b5cdb603925 100644 --- a/sites/svelte.dev/package.json +++ b/sites/svelte.dev/package.json @@ -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", diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte b/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte index d9598518fb72..9f53f2ee89db 100644 --- a/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte +++ b/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte @@ -191,7 +191,7 @@ export default app;`
e.target.select()} use:enter={(e) => e.target.blur()} /> -
+
{#if showMenu}
@@ -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,14 +109,16 @@ } .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 { @@ -110,7 +126,8 @@ height: 2.4rem; } - span { + .name, + .trigger :global(.icon) { display: inline-block; } }