Fixes for dropdowns

rocky/assets/css/components/dropdown.scss

@@ -12,10 +12,12 @@
     overflow: hidden;
     min-width: 0;
     display: flex;
+    width: 100%;
   }
 
   .dropdown-list {
     display: none;
+    left: 0;
     position: absolute;
     top: 3.25rem;
     z-index: 2;
@@ -29,112 +31,111 @@
     border: 1px solid var(--colors-grey-200);
     background-color: var(--colors-white);
 
-    &[aria-expanded="true"] {
-      display: flex;
-      flex-direction: column;
-      min-width: 100%;
-
-      > ul {
-        width: 100%;
-        padding: 0;
-        background-color: var(--colors-white);
-        list-style-type: disc;
-        gap: 0;
-        border-radius: var(--border-radius-s);
+    > ul {
+      margin: 0;
+      width: 100%;
+      padding: 0;
+      background-color: var(--colors-white);
+      list-style-type: disc;
+      gap: 0;
+      border-radius: var(--border-radius-s);
+
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--colors-grey-200);
+      }
 
-        &:not(:last-child) {
-          border-bottom: 1px solid var(--colors-grey-200);
-        }
+      li {
+        $icon-width: 1.25rem;
 
-        li {
-          $icon-width: 1.25rem;
+        border-top: 1px $offwhite solid;
+        padding: 0;
+        width: 100%;
 
-          border-top: 1px $offwhite solid;
-          padding: 0;
+        > a {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: flex-start;
+          gap: var(--spacing-grid-100);
+          color: var(--text-color-dark);
+          margin: 0;
+          min-height: 2.75rem;
+          padding: var(--spacing-grid-150);
+          text-decoration: none;
           width: 100%;
 
-          > a {
+          .icon {
             display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: flex-start;
-            gap: var(--spacing-grid-100);
-            color: var(--text-color-dark);
-            margin: 0;
-            min-height: 2.75rem;
-            padding: var(--spacing-grid-150);
-            text-decoration: none;
-            width: 100%;
-
-            .icon {
-              display: flex;
-              width: $icon-width;
-              max-height: $icon-width;
-
-              &::before {
-                color: var(--text-color-dark);
-              }
-            }
+            width: $icon-width;
+            max-height: $icon-width;
 
-            &:hover {
+            &::before {
               color: var(--text-color-dark);
             }
-
-            /* Styling with subtitle */
-            &:has(> div) {
-              flex-direction: column;
-              align-items: flex-start;
-              gap: var(--spacing-grid-0);
-            }
-
-            > div {
-              display: flex;
-              flex-direction: row;
-              gap: var(--spacing-grid-100);
-              align-items: center;
-            }
-
-            .nota-bene {
-              padding-left: calc($icon-width + var(--spacing-grid-100));
-            }
           }
 
-          &[aria-current="true"] {
-            a::before {
-              content: "\ea5e";
-              font-family: var(
-                --language-selector-list-button-icon-font-family
-              );
-              margin-left: var(
-                --language-selector-list-button-icon-margin-left
-              );
-              font-size: var(--language-selector-list-button-icon-font-size);
-              color: var(--language-selector-list-button-icon-text-color);
-              margin-right: 0.5rem;
-              width: 1.25rem;
-            }
+          &:hover {
+            color: var(--text-color-dark);
           }
 
-          &::marker {
-            content: none;
+          /* Styling with subtitle */
+          &:has(> div) {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: var(--spacing-grid-0);
           }
 
-          &:first-child {
-            border-top: none;
+          > div {
+            display: flex;
+            flex-direction: row;
+            gap: var(--spacing-grid-100);
+            align-items: center;
           }
 
-          &:last-child {
-            // border-top should still inherit
-            border-left: none;
-            border-right: none;
-            border-bottom: none;
+          .nota-bene {
+            padding-left: calc($icon-width + var(--spacing-grid-100));
           }
+        }
 
-          &:hover {
-            background-color: #f2f2f2;
+        &[aria-current="true"] {
+          a::before {
+            content: "\ea5e";
+            font-family: var(--language-selector-list-button-icon-font-family);
+            margin-left: var(--language-selector-list-button-icon-margin-left);
+            font-size: var(--language-selector-list-button-icon-font-size);
+            color: var(--language-selector-list-button-icon-text-color);
+            margin-right: 0.5rem;
+            width: 1.25rem;
           }
         }
+
+        &::marker {
+          content: none;
+        }
+
+        &:first-child {
+          border-top: none;
+        }
+
+        &:last-child {
+          // border-top should still inherit
+          border-left: none;
+          border-right: none;
+          border-bottom: none;
+        }
+
+        &:hover {
+          background-color: #f2f2f2;
+        }
       }
     }
   }
 }
+
+.dropdown-list {
+  [aria-expanded="true"] + & {
+    display: flex;
+    flex-direction: column;
+    min-width: 100%;
+  }
+}

rocky/assets/js/dropdown.js

@@ -1,30 +1,29 @@
-const dropdowns = document.querySelectorAll(".dropdown");
+function toggleAriaExpanded(event) {
+  const currentButton = event.target;
+  const isExpanded = currentButton.getAttribute("aria-expanded") === "true";
+  const activeButton = document.querySelector(
+    ".dropdown-button[aria-expanded='true']",
+  );
 
-dropdowns.forEach((dropdown) => {
-  const dropdownButton = dropdown.querySelector(".dropdown-button");
-  const dropdownList = dropdown.querySelector(".dropdown-list");
+  if (activeButton && currentButton !== activeButton) {
+    activeButton.setAttribute("aria-expanded", "false");
+  }
 
-  const toggle = () => {
-    if (dropdownList.getAttribute("aria-expanded") == "true") {
-      closeDropdown();
-    } else {
-      dropdownList.setAttribute("aria-expanded", "true");
-      document.addEventListener("click", handleClose);
-    }
-  };
-
-  const handleClose = (event) => {
-    if (event.target == dropdownButton) {
-      return;
-    }
+  currentButton.setAttribute("aria-expanded", !isExpanded);
+}
 
-    closeDropdown();
-  };
+document.addEventListener("click", (event) => {
+  const isDropdownButtonClicked =
+    event.target.classList.contains("dropdown-button");
 
-  const closeDropdown = () => {
-    document.removeEventListener("click", handleClose);
-    dropdownList.setAttribute("aria-expanded", "false");
-  };
-
-  dropdownButton.addEventListener("click", () => toggle());
+  if (isDropdownButtonClicked) {
+    toggleAriaExpanded(event);
+  } else {
+    activeButton = document.querySelector(
+      ".dropdown-button[aria-expanded='true']",
+    );
+    if (activeButton) {
+      activeButton.setAttribute("aria-expanded", "false");
+    }
+  }
 });

rocky/reports/report_types/aggregate_organisation_report/introduction.html

@@ -5,10 +5,12 @@
         <div class="horizontal-view toolbar">
             <h1>{{ report_ooi.name }}</h1>
             <div class="dropdown">
-                <button aria-controls="export-add" class="dropdown-button ghost">
+                <button aria-controls="download-report"
+                        aria-expanded="false"
+                        class="dropdown-button ghost">
                     {% translate "Export" %}<span aria-hidden="true" class="icon ti-chevron-down"></span>
                 </button>
-                <div id="export-add" aria-expanded="false" class="dropdown-list">
+                <div id="download-report" class="dropdown-list">
                     <ul>
                         <li>
                             <a href="{{ report_download_pdf_url }}" target="_blank">{% translate "Download PDF" %}</a>

rocky/reports/templates/partials/report_header.html

@@ -5,10 +5,12 @@
         <div class="horizontal-view toolbar">
             <h1>{{ report_ooi.name }}</h1>
             <div class="dropdown">
-                <button aria-controls="export-add" class="dropdown-button ghost">
+                <button aria-controls="download-report"
+                        aria-expanded="false"
+                        class="dropdown-button ghost">
                     {% translate "Export" %}<span aria-hidden="true" class="icon ti-chevron-down"></span>
                 </button>
-                <div id="export-add" aria-expanded="false" class="dropdown-list">
+                <div id="download-report" class="dropdown-list">
                     <ul>
                         <li>
                             <a href="{{ report_download_pdf_url }}" target="_blank"><span class="icon ti-download" aria-hidden="true"></span>{% translate "Download report" %} (PDF)</a>

rocky/rocky/locale/django.pot

@@ -9,7 +9,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-10-28 12:38+0000\n"
+"POT-Creation-Date: 2024-10-29 11:51+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
@@ -6164,7 +6164,6 @@ msgstr ""
 msgid "Forgot password"
 msgstr ""
 
-#: rocky/templates/partials/form/field_input.html
 #: rocky/templates/partials/form/field_input_checkbox.html
 #: rocky/templates/partials/form/field_input_radio.html
 msgid "This field is required"
@@ -6216,16 +6215,6 @@ msgstr ""
 msgid "Only show objects of type %(type)s"
 msgstr ""
 
-#: rocky/templates/partials/language-switcher.html
-msgid "Select your language"
-msgstr ""
-
-#: rocky/templates/partials/language-switcher.html
-#, python-format
-msgid ""
-"Current language is %(current_language)s. Choose your preferred language."
-msgstr ""
-
 #: rocky/templates/partials/list_filters.html
 msgid "Hide filter options"
 msgstr ""

rocky/rocky/templates/organizations/organization_member_list.html

@@ -25,10 +25,10 @@ <h2>
                 {% if perms.tools.add_organizationmember %}
                     <div class="horizontal-view toolbar">
                         <div class="dropdown">
-                            <button aria-controls="export-add" class="dropdown-button ghost">
+                            <button aria-controls="add-member" class="dropdown-button ghost">
                                 {% translate "Add member(s)" %}<span aria-hidden="true" class="icon ti-chevron-down"></span>
                             </button>
-                            <div id="export-add" aria-expanded="false" class="dropdown-list">
+                            <div id="add-member" class="dropdown-list">
                                 <ul>
                                     <li>
                                         <a href="{% url "organization_member_add_account_type" organization.code %}"><span class="icon ti-plus" aria-hidden="true"></span>{% translate "Manually" %}</a>