fix(UI): better focus (#934)

**Before** <img width="68" alt="Capture d’écran 2025-02-04 à 18 54 16" src="https://github.com/user-attachments/assets/01e6a58a-d554-4a4c-a89c-3ec751f88469" /> **After** <img width="315" alt="Capture d’écran 2025-02-04 à 19 01 24" src="https://github.com/user-attachments/assets/826a1ed4-9041-4202-9a84-7e6c8e9a8903" /> <img width="411" alt="Capture d’écran 2025-02-04 à 18 54 28" src="https://github.com/user-attachments/assets/0fe1acc8-3945-4883-a04d-67f98e66dfa4" /> Fixe #926
jsr-io · Feb 5, 2025 · 69b0a6a · 69b0a6a
1 parent 95d73e2
commit 69b0a6a
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/frontend/components/Nav.tsx b/frontend/components/Nav.tsx
@@ -49,7 +49,7 @@ export interface NavItemProps {
 export function NavItem(props: NavItemProps) {
   return (
     <a
-      class={`md:px-3 px-4 py-2 text-sm md:text-base min-h-10 leading-none rounded-md hover:bg-jsr-cyan-100 flex items-center select-none ${
+      class={`md:px-3 px-4 py-2 text-sm md:text-base min-h-10 leading-none rounded-md hover:bg-jsr-cyan-100 flex items-center select-none focus:outline-none focus:border-1 focus:border-jsr-cyan-300 focus:ring-1 focus:ring-jsr-cyan-300 focus:ring-opacity-50 ${
         props.active
           ? "bg-jsr-cyan-50 border-1 border-jsr-cyan-300/30 font-semibold"
           : ""

diff --git a/frontend/islands/UserMenu.tsx b/frontend/islands/UserMenu.tsx
@@ -36,7 +36,7 @@ export function UserMenu({ user, sudo, logoutUrl }: {
     <div class="relative select-none" ref={ref}>
       <button
         id={`${prefix}-user-menu`}
-        class="flex items-center rounded-full"
+        class="flex items-center rounded-full focus-visible:ring-2 ring-inset outline-none *:focus-visible:ring-jsr-cyan-400 *:focus-visible:ring-offset-1"
         onClick={() => setOpen((v) => !v)}
         aria-expanded={open ? "true" : "false"}
       >