fix: aria-expanded should be on the button

zendesk · Jul 13, 2023 · 8df6493 · 8df6493
1 parent 014b3fa
commit 8df6493
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/script.js b/script.js
@@ -95,7 +95,7 @@
 
   Dropdown.prototype = {
     get isExpanded() {
-      return this.menu.getAttribute("aria-expanded") === "true";
+      return this.toggle.getAttribute("aria-expanded") === "true";
     },
 
     get menuItems() {
@@ -107,14 +107,14 @@
     dismiss: function () {
       if (!this.isExpanded) return;
 
-      this.menu.setAttribute("aria-expanded", false);
+      this.toggle.setAttribute("aria-expanded", false);
       this.menu.classList.remove("dropdown-menu-end", "dropdown-menu-top");
     },
 
     open: function () {
       if (this.isExpanded) return;
 
-      this.menu.setAttribute("aria-expanded", true);
+      this.toggle.setAttribute("aria-expanded", true);
       this.handleOverflow();
     },
 

diff --git a/src/Dropdown.js b/src/Dropdown.js
@@ -16,7 +16,7 @@ export default function Dropdown(toggle, menu) {
 
 Dropdown.prototype = {
   get isExpanded() {
-    return this.menu.getAttribute("aria-expanded") === "true";
+    return this.toggle.getAttribute("aria-expanded") === "true";
   },
 
   get menuItems() {
@@ -28,14 +28,14 @@ Dropdown.prototype = {
   dismiss: function () {
     if (!this.isExpanded) return;
 
-    this.menu.setAttribute("aria-expanded", false);
+    this.toggle.setAttribute("aria-expanded", false);
     this.menu.classList.remove("dropdown-menu-end", "dropdown-menu-top");
   },
 
   open: function () {
     if (this.isExpanded) return;
 
-    this.menu.setAttribute("aria-expanded", true);
+    this.toggle.setAttribute("aria-expanded", true);
     this.handleOverflow();
   },
 

diff --git a/style.css b/style.css
@@ -4545,6 +4545,9 @@ html[dir=rtl] .notification-left-aligned {
 .dropdown-toggle > * {
   display: inline-block;
 }
+.dropdown-toggle[aria-expanded=true] + .dropdown-menu {
+  display: block;
+}
 
 .dropdown-menu {
   background: #fff;
@@ -4566,9 +4569,6 @@ html[dir=rtl] .notification-left-aligned {
 [dir=rtl] .dropdown-menu {
   text-align: right;
 }
-.dropdown-menu[aria-expanded=true] {
-  display: block;
-}
 .dropdown-menu [role=separator] {
   border-bottom: 1px solid #e9ebed;
   margin: 4px 0;

diff --git a/styles/_dropdowns.scss b/styles/_dropdowns.scss
@@ -19,6 +19,10 @@
   > * {
     display: inline-block;
   }
+
+  &[aria-expanded="true"] + .dropdown-menu {
+    display: block;
+  }
 }
 
 .dropdown-menu {
@@ -42,10 +46,6 @@
     text-align: right;
   }
 
-  &[aria-expanded="true"] {
-    display: block;
-  }
-
   [role="separator"] {
     border-bottom: 1px solid #e9ebed;
     margin: 4px 0;