From 89040eef90c80415a67047f4aee0249bb80d7b1a Mon Sep 17 00:00:00 2001
From: Marcelo Paiva <mpaiva@gmail.com>
Date: Thu, 26 Feb 2026 08:09:11 -0500
Subject: [PATCH] Fix focus ring conflicts in user menu

- Change tabindex="0" -> tabindex="-1" on <ul class="menu"> so the
  dropdown container is not in the keyboard tab order (user_menu.js
  handles focus programmatically; tabindex="-1" still allows mouse
  click to satisfy DaisyUI :focus-within dropdown CSS)
- Add .menu li > a:focus-visible and .menu li > button:focus-visible
  to global focus rule to override DaisyUI's menu-item focus selectors

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/javascript/application.scss   | 4 +++-
 app/javascript/form.scss          | 4 +++-
 app/views/shared/_navbar.html.erb | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/javascript/application.scss b/app/javascript/application.scss
index d43970a9..713db71d 100644
--- a/app/javascript/application.scss
+++ b/app/javascript/application.scss
@@ -12,7 +12,9 @@
 .radio:focus-visible,
 .toggle:focus-visible,
 .tab:focus-visible,
-.link:focus-visible {
+.link:focus-visible,
+.menu li > a:focus-visible,
+.menu li > button:focus-visible {
   outline-color: rgb(14, 99, 200);
   outline-style: solid;
   outline-width: 8px;
diff --git a/app/javascript/form.scss b/app/javascript/form.scss
index 608b2dfc..28ac4b1a 100644
--- a/app/javascript/form.scss
+++ b/app/javascript/form.scss
@@ -12,7 +12,9 @@
 .radio:focus-visible,
 .toggle:focus-visible,
 .tab:focus-visible,
-.link:focus-visible {
+.link:focus-visible,
+.menu li > a:focus-visible,
+.menu li > button:focus-visible {
   outline-color: rgb(14, 99, 200);
   outline-style: solid;
   outline-width: 8px;
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index d99b2c8d..a890aab3 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -28,7 +28,7 @@
         <label tabindex="0" class="cursor-pointer bg-base-content text-purple-300 rounded-full p-2 w-9 justify-center flex" role="button" aria-label="<%= t('user_menu') %>" aria-haspopup="menu" aria-expanded="false">
           <span class="text-sm align-text-top" aria-hidden="true"><%= current_user.initials %></span>
         </label>
-        <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box min-w-[160px] text-right">
+        <ul tabindex="-1" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box min-w-[160px] text-right">
           <li>
             <%= link_to settings_profile_index_path, class: 'flex items-center' do %>
               <%= svg_icon('adjustments', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>