Merge pull request #5265 from nebulab/waiting-for-dev/admin/accessibl…

…e_account_nav [Admin] Make account navigation accessible
solidusio · Jul 21, 2023 · e9051b3 · e9051b3
2 parents ff433bb + 5906f9c
commit e9051b3
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 19 deletions.
diff --git a/admin/app/components/solidus_admin/sidebar/account_nav/component.html.erb b/admin/app/components/solidus_admin/sidebar/account_nav/component.html.erb
@@ -1,9 +1,27 @@
-<nav class="mt-auto w-48"
+<nav class="flex flex-col-reverse w-48 mt-auto"
   data-controller="<%= stimulus_id %>"
   data-<%= stimulus_id %>-active-class="bg-gray-25"
   aria-label="<%= t('.account.account') %>"
 >
+  <button data-action="
+    click-><%= stimulus_id %>#toggleLinks
+    "
+    data-<%= stimulus_id %>-target="button"
+    aria-expanded="false" aria-controls="account-menu"
+    class="
+      flex gap-1.5
+      p-3 mt-2
+      body-small-bold text-gray-500
+      hover:bg-gray-25
+      cursor-pointer
+  ">
+    <%= icon_tag("user-smile-fill", class: "inline-block align-text-bottom shrink-0 w-6 h-6 rounded-[4.81rem] mr-[1.5] body-small fill-yellow bg-black") %>
+    <span class="overflow-hidden whitespace-nowrap text-ellipsis">
+      <%= @user_label %>
+    </span>
+  </button>
   <ul data-<%= stimulus_id %>-target="links"
+    id="account-menu"
     class="
       hidden
       p-2
@@ -16,27 +34,15 @@
         <%= t('.account.account') %>
       <% end %>
     </li>
-    <li class="h-8 flex items-center hover:bg-gray-25">
+    <li class="h-8 flex items-center hover:bg-gray-25"
+      data-action="
+        focusout-><%= stimulus_id %>#hideLinks
+      "
+    >
       <%= link_to @logout_path, method: @logout_method do %>
         <%= icon_tag("logout-box-line", class: "inline-block align-text-bottom w-[0.98rem] h-[1.04rem] mx-2 fill-current") %>
         <%= t('.account.logout') %>
       <% end %>
     </li>
   </ul>
-  <p data-action="
-    click-><%= stimulus_id %>#toggleLinks
-    "
-    data-<%= stimulus_id %>-target="button"
-    class="
-      flex gap-1.5
-      p-3 mt-2
-      body-small-bold text-gray-500
-      hover:bg-gray-25
-      cursor-pointer
-  ">
-    <%= icon_tag("user-smile-fill", class: "inline-block align-text-bottom shrink-0 w-6 h-6 rounded-[4.81rem] mr-[1.5] body-small fill-yellow bg-black") %>
-    <span class="overflow-hidden whitespace-nowrap text-ellipsis">
-      <%= @user_label %>
-    </span class="">
-  </p>
 </nav>
diff --git a/admin/app/components/solidus_admin/sidebar/account_nav/component.js b/admin/app/components/solidus_admin/sidebar/account_nav/component.js
@@ -5,11 +5,33 @@ export default class extends Controller {
 
   static classes = ["active"]
 
-  // Toggle the visibility of the links and mark the button as active
   toggleLinks() {
+    // Toggle button's active state
     this.buttonTarget.classList.toggle(
       this.activeClass,
     )
+    // Toggle aria-expanded state
+    this.buttonTarget.setAttribute(
+      "aria-expanded",
+      this.buttonTarget.classList.contains(
+        this.activeClass,
+      ),
+    )
+    // Toggle links' visibility
     this.linksTarget.classList.toggle("hidden")
   }
+
+  hideLinks() {
+    // Remove button's active state
+    this.buttonTarget.classList.remove(
+      this.activeClass,
+    )
+    // Set aria-expanded to false
+    this.buttonTarget.setAttribute(
+      "aria-expanded",
+      "false"
+    )
+    // Hide the links
+    this.linksTarget.classList.add("hidden")
+  }
 }