correct focus order for nav header - issue #1782

src/components/NavBar.vue

@@ -12,6 +12,62 @@
       >
         <MobilizonLogo class="w-40" />
       </router-link>
+      <div
+        class="justify-between items-center w-full md:flex md:w-auto md:order-1"
+        id="mobile-menu-2"
+        :class="{ hidden: !showMobileMenu }"
+      >
+        <ul
+          class="flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:font-lightbold"
+        >
+          <li class="m-auto">
+            <router-link
+              :to="{ name: RouteName.SEARCH }"
+              class="block relative py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("Search") }}</router-link
+            >
+          </li>
+
+          <li class="m-auto">
+            <router-link
+              :to="{ name: RouteName.EVENT_CALENDAR }"
+              class="block relative py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("Calendar")
+              }}<span class="absolute right-0 text-xs"
+                ><br />(beta)</span
+              ></router-link
+            >
+          </li>
+          <li class="m-auto" v-if="currentActor?.id">
+            <router-link
+              :to="{ name: RouteName.MY_EVENTS }"
+              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("My events") }}</router-link
+            >
+          </li>
+          <li class="m-auto" v-if="currentActor?.id">
+            <router-link
+              :to="{ name: RouteName.MY_GROUPS }"
+              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("My groups") }}</router-link
+            >
+          </li>
+          <li class="m-auto" v-if="!currentUser?.isLoggedIn">
+            <router-link
+              :to="{ name: RouteName.LOGIN }"
+              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("Login") }}</router-link
+            >
+          </li>
+          <li class="m-auto" v-if="!currentUser?.isLoggedIn && canRegister">
+            <router-link
+              :to="{ name: RouteName.REGISTER }"
+              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("Register") }}</router-link
+            >
+          </li>
+        </ul>
+      </div>
       <div
         class="flex items-center md:order-2 ml-auto gap-2"
         v-if="currentUser?.isLoggedIn"
@@ -172,62 +228,6 @@
           ></path>
         </svg>
       </button>
-      <div
-        class="justify-between items-center w-full md:flex md:w-auto md:order-1"
-        id="mobile-menu-2"
-        :class="{ hidden: !showMobileMenu }"
-      >
-        <ul
-          class="flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:font-lightbold"
-        >
-          <li class="m-auto">
-            <router-link
-              :to="{ name: RouteName.SEARCH }"
-              class="block relative py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-              >{{ t("Search") }}</router-link
-            >
-          </li>
-
-          <li class="m-auto">
-            <router-link
-              :to="{ name: RouteName.EVENT_CALENDAR }"
-              class="block relative py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-              >{{ t("Calendar")
-              }}<span class="absolute right-0 text-xs"
-                ><br />(beta)</span
-              ></router-link
-            >
-          </li>
-          <li class="m-auto" v-if="currentActor?.id">
-            <router-link
-              :to="{ name: RouteName.MY_EVENTS }"
-              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-              >{{ t("My events") }}</router-link
-            >
-          </li>
-          <li class="m-auto" v-if="currentActor?.id">
-            <router-link
-              :to="{ name: RouteName.MY_GROUPS }"
-              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-              >{{ t("My groups") }}</router-link
-            >
-          </li>
-          <li class="m-auto" v-if="!currentUser?.isLoggedIn">
-            <router-link
-              :to="{ name: RouteName.LOGIN }"
-              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-              >{{ t("Login") }}</router-link
-            >
-          </li>
-          <li class="m-auto" v-if="!currentUser?.isLoggedIn && canRegister">
-            <router-link
-              :to="{ name: RouteName.REGISTER }"
-              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-              >{{ t("Register") }}</router-link
-            >
-          </li>
-        </ul>
-      </div>
     </div>
   </nav>
 </template>

tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap

@@ -6,9 +6,6 @@ exports[`App component > renders a Vue component 1`] = `
     <router-link to="[object Object]" aria-label="Back to homepage" class="flex items-center flex-1">
       <mobilizon-logo-stub invert="false" class="w-40"></mobilizon-logo-stub>
     </router-link>
-    <!--v-if--><button type="button" class="inline-flex items-center p-2 ml-1 text-sm text-zinc-500 rounded-lg md:hidden hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false"><span class="sr-only">Open main menu</span><svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
-      </svg></button>
     <div class="justify-between items-center w-full md:flex md:w-auto md:order-1 hidden" id="mobile-menu-2">
       <ul class="flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:font-lightbold">
         <li class="m-auto">
@@ -25,6 +22,9 @@ exports[`App component > renders a Vue component 1`] = `
         <!--v-if-->
       </ul>
     </div>
+    <!--v-if--><button type="button" class="inline-flex items-center p-2 ml-1 text-sm text-zinc-500 rounded-lg md:hidden hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false"><span class="sr-only">Open main menu</span><svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
+      </svg></button>
   </div>
 </nav>"
 `;