Use aria-expanded for chasm (#1039)

* Use aria-expanded for chasm This simplifies the chasm logic and uses an a11y aware attribute. * Remove unused var
dfinity · Nov 21, 2022 · c2eaaac · c2eaaac
1 parent 898f2ad
commit c2eaaac
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 11 deletions.
diff --git a/src/frontend/src/components/authenticateBox.ts b/src/frontend/src/components/authenticateBox.ts
@@ -151,18 +151,15 @@ const mkChasm = ({ info, message }: ChasmOpts): TemplateResult => {
   /* Toggle the chasm open/closed */
   const chasmToggle = () =>
     withRef(chasmRef, (chasm) => {
-      const classes = chasm.classList;
-
-      if (classes.contains("c-chasm--closed")) {
-        classes.remove("c-chasm--closed");
-        classes.add("c-chasm--open");
+      const expanded = chasm.getAttribute("aria-expanded") === "true";
+      if (!expanded) {
+        chasm.setAttribute("aria-expanded", "true");
 
         withRef(chasmToggleRef, (arrow) =>
           arrow.classList.add("c-chasm__button--flipped")
         );
-      } else if (classes.contains("c-chasm--open")) {
-        classes.remove("c-chasm--open");
-        classes.add("c-chasm--closed");
+      } else {
+        chasm.setAttribute("aria-expanded", "false");
 
         withRef(chasmToggleRef, (arrow) =>
           arrow.classList.remove("c-chasm__button--flipped")
@@ -174,7 +171,7 @@ const mkChasm = ({ info, message }: ChasmOpts): TemplateResult => {
     <p class="t-paragraph t-weak"><span id="alternative-origin-chasm-toggle" class="t-action" @click="${chasmToggle}" >${info} <span ${ref(
     chasmToggleRef
   )} class="t-link__icon c-chasm__button">${caretDownIcon}</span></span>
-      <div ${ref(chasmRef)} class="c-chasm c-chasm--closed">
+      <div ${ref(chasmRef)} class="c-chasm" aria-expanded="false">
         <div class="c-chasm__arrow"></div>
         <div class="t-weak c-chasm__content">
             ${message}

diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css
@@ -1176,13 +1176,13 @@ a:hover,
   margin-right: calc(-1.25 * var(--rs-card-bezel));
 }
 
-.c-chasm--closed {
+.c-chasm[aria-expanded="false"] {
   max-height: 0;
   visibility: hidden;
   transition: max-height 0.15s ease-out;
 }
 
-.c-chasm--open {
+.c-chasm[aria-expanded="true"] {
   max-height: calc(5em * var(--vs-line-height) + var(--rs-card-bezel) * 2);
   visibility: visible;
   transition: max-height 400ms cubic-bezier(0.3, 0.7, 0, 1);