fix(UI): better focus (#934)

**Before**
<img width="68" alt="Capture d’écran 2025-02-04 à 18 54 16"
src="https://github.com/user-attachments/assets/01e6a58a-d554-4a4c-a89c-3ec751f88469"
/>
**After**
<img width="315" alt="Capture d’écran 2025-02-04 à 19 01 24"
src="https://github.com/user-attachments/assets/826a1ed4-9041-4202-9a84-7e6c8e9a8903"
/>
<img width="411" alt="Capture d’écran 2025-02-04 à 18 54 28"
src="https://github.com/user-attachments/assets/0fe1acc8-3945-4883-a04d-67f98e66dfa4"
/>

Fixe #926

Author: AugustinMauroy

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"
           : ""

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"}
       >