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

@@ -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;

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;

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') %>