548 navbar accessibility (#559)

* Create dropdown Stimulus controller

* Create custom dropdown css ruleset mimicking geeksui styles

* Apply new dropdown controller and custom styles to nav dropdown

* Remove random comment

* Add aria attributes to navbar button and menu

* Add closing dropdown by clicking outside of it

* Add comments for custom code

* Refactor to erb comment

app/assets/stylesheets/custom.scss

@@ -9,3 +9,20 @@
 label.required:after {
   content: " *";
 }
+
+// This class is intended to be used in conjunction with dropdown_controller.js
+// to avoid theme default dropdown behaviors (hover-open in desktop view).
+.aria-dropdown-menu {
+  display: block;
+  background-color: white;
+  border: none;
+  border-radius: 0.5rem;
+  box-shadow: var(--geeks-dropdown-shadow);
+  color: var(--geeks-gray-800);
+  font-size: 0.875rem;
+  line-height: 1.2rem;
+  margin: 1.125rem 0;
+  min-width: 12rem;
+  padding: 1rem 0;
+  top: 28px;
+}

app/javascript/controllers/dropdown_controller.js

@@ -0,0 +1,44 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Dropdown menu controller
+// Use only where theme dropdown menu defaults (hover-open) are undesirable.
+export default class extends Controller {
+  static targets = ["button", "menu"];
+
+  initialize() {
+    this.close();
+    this.closeMenuOnOutsideClick = this.closeMenuOnOutsideClick.bind(this);
+  }
+
+  connect() {
+    window.addEventListener("click", this.closeMenuOnOutsideClick);
+  }
+
+  disconnect() {
+    window.removeEventListener("click", this.closeMenuOnOutsideClick);
+  }
+
+  toggle() {
+    this.menuTarget.hidden === true ? this.open() : this.close();
+  }
+
+  open() {
+    this.menuTarget.hidden = false;
+    this.menuTarget.setAttribute("aria-hidden", "false");
+    this.buttonTarget.setAttribute("aria-expanded", "true");
+  }
+
+  close() {
+    this.menuTarget.hidden = true;
+    this.menuTarget.setAttribute("aria-hidden", "true");
+    this.buttonTarget.setAttribute("aria-expanded", "false");
+  }
+
+  closeMenuOnOutsideClick(event) {
+    if (this.element === event.target || this.element.contains(event.target)) {
+      return;
+    }
+
+    this.close();
+  }
+}

app/views/layouts/shared/_navbar.html.erb

@@ -19,14 +19,15 @@
         <%= active_link_to 'Log In', new_user_session_path, class: 'btn btn-primary' %>
       <% end %>
 
-      <li class="dropdown ms-2 list-unstyled">
-        <a class="rounded-circle" href="#" role="button" id="dropdownUser" data-bs-toggle="dropdown" aria-expanded="false">
+      <div class="dropdown ms-2 list-unstyled position-relative" data-controller="dropdown">
+        <button class="btn p-0 border-0" id="nav-dropdown-button" data-action="dropdown#toggle" data-dropdown-target="button" aria-expanded="false">
           <% if user_signed_in? %>
            <%= render_avatar_partial %>
           <% end %>
-        </a>
+        </button>
 
-        <div class="dropdown-menu dropdown-menu-end pb-0" aria-labelledby="dropdownUser" style='z-index: 1000'>
+        <%# Use "aria-dropdown-menu" here to avoid the theme's default hover-open behavior for accessibility concerns. %>
+        <div class="aria-dropdown-menu position-absolute end-0" data-dropdown-target="menu" hidden aria-hidden="true" aria-labelledby="nav-dropdown-button" style='z-index: 1000'>
           <% if user_signed_in? %>
             <ul class="list-unstyled">
               <% if current_user.adopter_account && current_user.adopter_account.adopter_foster_profile.nil? %>
@@ -71,12 +72,11 @@
             <% end %>
           <% end %>
         </div>
-      </li>
+      </div>
     </div>
-    <!-- Button -->
 
     <!-- Collapse -->
-    <div class="justify-content-end collapse navbar-collapse " id="navbar-default3">
+    <div class="justify-content-end collapse navbar-collapse" id="navbar-default3">
       <ul class="navbar-nav">
 
         <li class='nav-item'>