Reinstate and cleanup mobile nav focus styles. (#1854)

* Tweaking focus styles for nav buttons * tweak signed out mobile nav --------- Co-authored-by: William B <[email protected]>
cds-snc · May 30, 2024 · 9cb9c04 · 9cb9c04
1 parent 4b66b90
commit 9cb9c04
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 16 deletions.
diff --git a/app/assets/javascripts/main.min.js b/app/assets/javascripts/main.min.js
diff --git a/app/assets/javascripts/scheduler.min.js b/app/assets/javascripts/scheduler.min.js
diff --git a/app/assets/stylesheets/index.css b/app/assets/stylesheets/index.css
diff --git a/app/templates/partials/nav/account_menu.html b/app/templates/partials/nav/account_menu.html
@@ -4,7 +4,7 @@
   <button
     aria-controls="account-menu-options"
     aria-expanded="false"
-    class="inline-flex items-center line-under shadow-sm text-smaller font-medium text-gray-700 px-4 py-1 border-b-2
+    class="inline-flex items-center line-under shadow-sm text-smaller font-medium text-blue px-4 py-1 border-b-2
       border-transparent focus:outline-none focus:bg-yellow focus:border-blue hover:bg-gray-50 hover:underline"
     id="account-menu"
     data-module="menu"

diff --git a/app/templates/partials/nav/account_menu_mobile.html b/app/templates/partials/nav/account_menu_mobile.html
@@ -1,13 +1,12 @@
 {% from "components/nav_menu_item_mobile.html" import nav_menu_item_mobile with context %}
 
 <!-- account menu dropdown / mobile -->
-<div class="md:hidden md:flex grid-flow-row relative justify-end inline-block text-left text-blue visited:text-blue
-link:text-blue no-underline text-small">
+<div class="md:hidden md:flex">
   <button
     aria-label="{{ _('Your account and language') if current_user.is_authenticated else _('Sign-in and language') }}"
     aria-expanded="false"
     id="account-icon-mobile"
-    class="inline-flex p-1 h-14 border-2 border-solid border-gray rounded-lg"
+    class="p-2 min-w-target min-h-target border-2 border-solid border-gray flex items-center justify-center line-under leading-none text-blue text-smaller underline hover:no-underline focus:outline-yellow"
     data-module="menu"
     data-menu-items="account-menu-mobile"
     type="button">

diff --git a/app/templates/partials/nav/gc_header_nav.html b/app/templates/partials/nav/gc_header_nav.html
@@ -8,7 +8,7 @@
   {% set long_lang_switch = 'Français' %}
 {% endif %}
 
-<hr class="m-0 md:hidden bg-blue h-2"/>
+<hr class="m-0 md:hidden bg-blue border-blue border-0 border-b-2"/>
 <nav class="md:hidden" aria-label="{{ _('Main menu - mobile') }}">
   <div class="container px-gutterHalf">
     <!-- Mobile menu and nav bar -->
@@ -21,7 +21,7 @@
             id="menu"
             data-module="menu"
             data-menu-items="main-menu-nav"
-            class="mr-5 p-4 bg-blue flex-shrink text-white text-smaller visited:text-white link:text-white no-underline"
+            class="mr-5 p-4 bg-blue flex-shrink text-white text-smaller focus:outline-yellow visited:text-white link:text-white no-underline"
             type="button">
             {{ _('Menu') }}
             <img alt="" aria-hidden="true" class="account-menu-arrow ml-2 inline arrow self-center" src="{{ asset_url('images/arrow-white.svg') }}" width="15"/>
@@ -33,31 +33,27 @@
       <!--  start mobile navigation -->
       {% include 'partials/nav/gc_header_nav_mobile.html' %}
       <!--  end mobile navigation -->
-      <div class="flex justify-end self-center">
+      <div class="flex justify-end self-start gap-4">
         {% if current_user.is_authenticated %}
           {% include 'partials/nav/account_menu_mobile.html' %}
         {% else %}
           <div class="self-center flex-shrink-0">
             <a
               id="nav-sign-in-desktop"
               href="{{ url_for('main.sign_in' ) }}"
-              class="px-5 line-under leading-none inline-block text-blue visited:text-blue link:text-blue text-smaller underline hover:no-underline">
+              class="min-h-target px-4 line-under leading-none inline-flex items-center text-blue visited:text-blue link:text-blue text-smaller underline hover:no-underline">
               {{ _('Sign in') }}
             </a>
           </div>
         {% endif %}
-        <div class="pl-5">
-          <div class="h-14 p-1 border-2 border-solid border-gray rounded-lg">
             <a
               id="nav-lang"
-              class="px-1 block line-under leading-none text-blue visited:text-blue link:text-blue text-smaller underline hover:no-underline"
+              class="p-2 min-w-target min-h-target border-2 border-solid border-gray flex items-center justify-center line-under leading-none text-blue visited:text-blue link:text-blue text-smaller underline hover:no-underline focus:outline-yellow focus:border-gray focus:bg-white"
               href="{{ url_for('main.set_lang') }}?from={{ lang_url or request.path }}"
               lang="{{ 'fr-CA' if lang_switch == 'FR' else 'en-CA' }}">
               <span class="sr-only">{{ long_lang_switch }}</span>
               <span role="presentation" aria-hidden="true">{{ lang_switch }}</span>
             </a>
-          </div>
-        </div>
       </div>
       <!-- Mobile menu and nav bar END -->
       <!-- MD-LG menu and nav bar -->

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -184,6 +184,9 @@ module.exports = {
       minHeight: {
         target: "45px",
       },
+      minWidth: {
+        target: "45px",
+      },
       flex: {
         2: "2 2 0%",
       },