Removing the need for keyboard_arrow_up.

mlibrary · Dec 11, 2024 · 7cdc1b5 · 7cdc1b5
1 parent 7b19120
commit 7cdc1b5
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 19 deletions.
diff --git a/css/_dropdown.scss b/css/_dropdown.scss
@@ -24,18 +24,23 @@
   gap: 0.25rem;
   font-weight: normal;
   padding: 0;
-  @include breakpoints.breakpoint('medium') {
-    &[aria-expanded="true"] > .username {
-      text-decoration: underline;
-      text-decoration-thickness: 0.125rem;
+  &[aria-expanded="true"] {
+    & > .material-symbols-rounded {
+      transform: rotate(180deg);
+    }
+    @include breakpoints.breakpoint('medium') {
+      & > .username {
+        text-decoration: underline;
+        text-decoration-thickness: 0.125rem;
+      }
     }
   }
 }
 
 .dropdown-container {
   @include breakpoints.breakpoint('medium') {
     background: white;
-    border-radius: 	0.25rem;
+    border-radius: 0.25rem;
     box-shadow: var(--z-space-medium);
     padding: 1rem 1.5rem;
     position: absolute;

diff --git a/js/index.js b/js/index.js
@@ -98,13 +98,8 @@
       // Toggle `aria-expanded` as true or false
       getAriaExpanded = !getAriaExpanded;
       event.target.setAttribute('aria-expanded', getAriaExpanded);
-      // Toggle display for dropdown and arrow keys
-      const getArrowKeys = [...dropdown.children].filter((arrowKey) => {
-        return arrowKey.innerText.startsWith('keyboard_arrow_');
-      });
-      [getDropdown, ...getArrowKeys].forEach((toggle) => {
-        toggle.style.display = toggle.style.display === 'block' ? 'none' : 'block';
-      });
+      // Toggle display for dropdown
+      getDropdown.style.display = getDropdown.style.display === 'block' ? 'none' : 'block';
     });
     // Close dropdown if `Escape` has been pressed or clicked outside of dropdown
     ['click', 'keyup'].forEach((listener) => {

diff --git a/views/layout.erb b/views/layout.erb
@@ -22,19 +22,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,600,0..1,200&icon_names=attach_money,book,close,date_range,history,home,info,keyboard_arrow_down,keyboard_arrow_left,keyboard_arrow_right,keyboard_arrow_up,open_in_new,person,radio_button_checked,radio_button_unchecked,settings,warning" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,600,0..1,200&icon_names=attach_money,book,close,date_range,history,home,info,keyboard_arrow_down,keyboard_arrow_left,keyboard_arrow_right,open_in_new,person,radio_button_checked,radio_button_unchecked,settings,warning" rel="stylesheet" />
     <link href="https://cdn.jsdelivr.net/npm/@umich-lib/web@latest/umich-lib.css" rel="stylesheet"/>
-    <link href='/bundles/index.css' rel="stylesheet" />
+    <link href="/bundles/index.css" rel="stylesheet" />
 
     <script type="module" src="https://cdn.jsdelivr.net/npm/@umich-lib/web@latest/dist/umich-lib/umich-lib.esm.js"></script>
 
     <%
       title = Navigation::Title.for(request.path_info)
-    %>
-    <title><%= title %> | University of Michigan Library</title>
-    <%
       description = Navigation::Description.for(request.path_info)
     %>
+    <title><%= title %> | University of Michigan Library</title>
     <meta name="description" content="<%= description %>"/>
     <meta name="version" content="<%=S.version%>">
 

diff --git a/views/layout/user_drop_down.erb b/views/layout/user_drop_down.erb
@@ -5,8 +5,7 @@
     <button aria-expanded="false" data-dropdown="user-nav-dropdown" class="button--dropdown">
       <span class="material-symbols-rounded" aria-hidden="true">person</span>
       <span class="username"><%=session[:uniqname]%></span>
-      <span class="material-symbols-rounded" style="display: block;" aria-hidden="true">keyboard_arrow_down</span>
-      <span class="material-symbols-rounded" style="display: none;" aria-hidden="true">keyboard_arrow_up</span>
+      <span class="material-symbols-rounded" aria-hidden="true">keyboard_arrow_down</span>
     </button>
     <div class="navigation-lists dropdown-container" id="user-nav-dropdown" style="display: none;">
       <ul class="site-navigation-list">