Update the aria-label value for the expand/collapse button on the navigation menu (#1684)

* Catch and rewrite expand/collapse button behaviour

* Set the aria-label before attaching an event

* Add logic for completely closed menu button

* Changed the logic to set the aria-label for the button

Co-authored-by: Nickii Miaro <[email protected]>

Author: musale

.storybook/manager-head.html

@@ -2,7 +2,7 @@
 <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 <link rel="manifest" href="manifest.json" />
 <script>
-  navigator.serviceWorker.register("sw.js")
+  navigator.serviceWorker.register("sw.js");
 </script>
 
 <footer class="storybook-footer">
@@ -18,11 +18,11 @@
 
   var config = {
     autoCapture: {
-      lineage: true
+      lineage: true,
     },
     coreData: {
-      appId: 'JS:GraphToolkit'
-    }
+      appId: "JS:GraphToolkit",
+    },
   };
   awa.init(config);
 
@@ -36,60 +36,58 @@
     const textStyle = 'margin-left: 0.25rem; font-size: 0.75rem;';
     const linkContentStyle = 'display: flex;';
 
-    const sidebarHeader = document.getElementsByClassName('sidebar-header');
+    const sidebarHeader = document.getElementsByClassName("sidebar-header");
     if (sidebarHeader.length === 0) {
       // sidebar container has not loaded in the page yet, retry in 500ms
       setTimeout(addUsefulLinks, 500);
       return false;
     }
 
     // This is a fix for an accessibility issue: https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/1085
-    sidebarHeader[0].innerHTML = '<h1 tabindex="0" class="css-1su1ft1">' + '<a href="https://aka.ms/mgt" target="_blank" class="css-ixbm00">' +
-      'Microsoft Graph Toolkit Playground</a>' +
-      '</h1>';
+    sidebarHeader[0].innerHTML = '<h1 tabindex="0" class="css-1su1ft1">' + '<a href="https://aka.ms/mgt" target="_blank" class="css-ixbm00">' + "Microsoft Graph Toolkit Playground</a>" + "</h1>";
 
     const sidebarNode = sidebarHeader[0].parentNode;
 
     // Github
     const ghSvgPath = "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12";
     const githubSvgElem = createSvg(ghSvgPath);
 
-    const githubText = document.createElement('span');
+    const githubText = document.createElement("span");
     githubText.style = textStyle;
-    githubText.innerText = 'GitHub';
+    githubText.innerText = "GitHub";
 
-    const repoLinkContent = document.createElement('span');
+    const repoLinkContent = document.createElement("span");
     repoLinkContent.style = linkContentStyle;
     repoLinkContent.append(githubSvgElem, githubText);
 
-    const repoLink = document.createElement('a');
-    repoLink.href = 'https://aka.ms/mgt';
-    repoLink.target = '_blank';
+    const repoLink = document.createElement("a");
+    repoLink.href = "https://aka.ms/mgt";
+    repoLink.target = "_blank";
     repoLink.style = linkStyle;
     repoLink.appendChild(repoLinkContent);
 
     // npm
     const npmSvgPath = "M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z";
     const npmSvgElem = createSvg(npmSvgPath);
 
-    const npmText = document.createElement('span');
+    const npmText = document.createElement("span");
     npmText.style = textStyle;
-    npmText.innerText = 'npm';
+    npmText.innerText = "npm";
 
-    const npmLinkContent = document.createElement('span');
+    const npmLinkContent = document.createElement("span");
     npmLinkContent.style = linkContentStyle;
     npmLinkContent.append(npmSvgElem, npmText);
 
-    const npmLink = document.createElement('a');
-    npmLink.href = 'https://www.npmjs.com/package/@microsoft/mgt';
-    npmLink.target = '_blank';
-    npmLink.style = linkStyle + ' margin-left: 0.5rem;';
+    const npmLink = document.createElement("a");
+    npmLink.href = "https://www.npmjs.com/package/@microsoft/mgt";
+    npmLink.target = "_blank";
+    npmLink.style = linkStyle + " margin-left: 0.5rem;";
     npmLink.appendChild(npmLinkContent);
 
     // links container
-    const usefulLinksContainer = document.createElement('div');
-    usefulLinksContainer.id = 'useful-links';
-    usefulLinksContainer.style = 'display: flex; margin: 1rem 0rem; font-size: 0.875rem;';
+    const usefulLinksContainer = document.createElement("div");
+    usefulLinksContainer.id = "useful-links";
+    usefulLinksContainer.style = "display: flex; margin: 1rem 0rem; font-size: 0.875rem;";
 
     usefulLinksContainer.append(repoLink, npmLink);
 
@@ -98,7 +96,7 @@
     const searchBox = document.querySelector(".search-field");
     if (searchBox) {
       searchBox.setAttribute("name", "Find Components");
-      searchBox.setAttribute("aria-expanded", "false")
+      searchBox.setAttribute("aria-expanded", "false");
 
       const searchInput = searchBox.querySelector("input");
       if (searchInput) {
@@ -150,6 +148,38 @@
       }
     }
 
+    function setEventOnMenuClick() {
+      const expandCollapseMenu = document.getElementsByClassName("css-ulso1l");
+      if (expandCollapseMenu) {
+        for (let i = 0; i < expandCollapseMenu.length; i++) {
+          const menu = expandCollapseMenu[i];
+          menu.addEventListener("click", setArialLabelForExpandCollapseBtn, { useCapture: true });
+        }
+      }
+    }
+    function setArialLabelForExpandCollapseBtn() {
+      const expandCollapseBtns = document.getElementsByClassName("css-rl1ij0");
+      if (expandCollapseBtns) {
+        for (let i = 0; i < expandCollapseBtns.length; i++) {
+          const button = expandCollapseBtns[i];
+          setButtonAriaLabel(button);
+          button.addEventListener("click", btnUpDown, { useCapture: true });
+        }
+      }
+    }
+
+    function btnUpDown(event) {
+      const element = event.target; // button when using tabs to navigate, svg when using mouse.
+      setButtonAriaLabel(element);
+    }
+
+    function setButtonAriaLabel(element) {
+      const dataExpandedState = element.getAttribute("data-expanded");
+      const ariaValue = dataExpandedState === "true" ? "expand" : "collapse";
+      element.setAttribute("aria-label", ariaValue);
+    }
+
+    setEventOnMenuClick();
     setListItemsAc11y();
   }
 
@@ -178,47 +208,55 @@
     const pr = window.devicePixelRatio;
     // Add an event listener to get any zoom changes based on
     // on the resolution.
-    matchMedia(`(resolution: ${pr}dppx)`).addEventListener("change", updateOnZoom, { once: true });
+    matchMedia(`(resolution: ${pr}dppx)`).addEventListener("change", updateOnZoom, {
+      once: true,
+    });
 
     if ((pr * 100).toFixed(0) > 110) {
       return setUpBottomBar();
     }
     return;
-  }
+  };
 
   // Whenever the browser is resized, also get the footer height and set the
   // bottom bar value offset to it.
   const updateOnWindowResize = () => {
     if (windowWidth.innerWidth != windowWidth) {
       setUpBottomBar();
     }
-    window.addEventListener("resize", updateOnWindowResize, { once: true });
+    window.addEventListener("resize", updateOnWindowResize, {
+      once: true,
+    });
     return;
-  }
+  };
 
   const updateOnOrientationChange = () => {
     const orientation = window.matchMedia("(orientation: landscape)");
     updateBottomBar();
     // This is just to detect whether there has been an orientation change
     // By default we expect to be in landscape so just in case it's something
     // else, we still do the updates.
-    orientation.addEventListener("change", updateOnOrientationChange, { once: true });
-  }
+    orientation.addEventListener("change", updateOnOrientationChange, {
+      once: true,
+    });
+  };
 
   const setUpBottomBar = () => {
-    const pr = (window.devicePixelRatio * 100).toFixed(0)
+    const pr = (window.devicePixelRatio * 100).toFixed(0);
     // This is a special case. When zooming in, in the first instance the content
     // has to make the side bar disappear, the content takes a while to load. This
     // makes the bottom bar unavailable hence it's hidden when the content loads.
     // This delay should allow that to happen so that we are able to do get the
     // bottom bar when we query it after 3 seconds.
     if (pr > 190 && pr < 310) {
-      sleep(3000).then(() => {
-        updateBottomBar();
-      }).catch(() => { })
+      sleep(3000)
+        .then(() => {
+          updateBottomBar();
+        })
+        .catch(() => { });
     }
     return updateBottomBar();
-  }
+  };
 
   function updateBottomBar() {
     const footer = document.getElementsByClassName("storybook-footer")[0];
@@ -230,7 +268,7 @@
   }
 
   function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
+    return new Promise((resolve) => setTimeout(resolve, ms));
   }
 
   updateOnZoom();
@@ -246,6 +284,7 @@
   }
 
   @media (forced-colors: active) and (prefers-color-scheme: dark) {
+
     #root,
     svg,
     svg>path,
@@ -280,6 +319,7 @@
   }
 
   @media (forced-colors: active) and (prefers-color-scheme: light) {
+
     #root,
     svg,
     svg>path,
@@ -377,6 +417,6 @@
   }
 
   .css-1en6m26 {
-    color: #616159 !important
+    color: #616159 !important;
   }
 </style>