Fix aria-expanded state for sidenav and expansion list entries

src/_includes/expansion-list.html

@@ -23,6 +23,7 @@
   <div class="expansion-panel">
     <a class="{{class}} collapsible"
        data-toggle="collapse"
+       data-target="#{{id}}"
        href="#{{id}}"
        role="button"
        aria-expanded="{{expanded}}"
@@ -32,7 +33,7 @@
           {%- if item.data.iconPath %}
             <img src="{{item.data.iconPath}}" alt="An icon showing a generic application." />
           {%- else %}
-            <img src="/assets/images/docs/app-architecture/design-patterns/kv-store-icon.svg" alt="A ivon showing a generic application." />
+            <img src="/assets/images/docs/app-architecture/design-patterns/kv-store-icon.svg" alt="A icon showing a generic application." />
           {%- endif %}
 
         </div>

src/_sass/components/_expansion-list.scss

@@ -112,6 +112,7 @@
   }
 
   .expansion-panel-body {
+    display: none;
     margin: auto;
     width: 90%;
     border-top: .05rem solid rgba(0, 0, 0, 0.125);
@@ -125,6 +126,10 @@
       margin-top: 1.5rem;
       border-top: .05rem solid rgba(0, 0, 0, 0.125);
     }
+
+    &.show {
+      display: block;
+    }
   }
 
   > :last-child {

src/_sass/components/_sidebar.scss

@@ -120,6 +120,10 @@
 
       + ul {
         display: none;
+
+        &.show {
+          display: block;
+        }
       }
 
       &:hover {
@@ -134,10 +138,6 @@
         .expander {
           transform: rotate(180deg);
         }
-
-        + ul {
-          display: block;
-        }
       }
 
       &.active {

src/content/assets/js/main.js

@@ -17,12 +17,29 @@ function setupSidenavInteractivity() {
       }
     }
   });
+}
 
-  // Set up collapse and expand for sidenav buttons.
-  const toggles = document.querySelectorAll('.nav-link.collapsible');
+function setupCollapsibleElements() {
+  const toggles = document.querySelectorAll('[data-toggle="collapse"]');
   toggles.forEach(function (toggle) {
+    const targetSelector = toggle.getAttribute('data-target');
+    if (!targetSelector) return;
+    const target = document.querySelector(targetSelector);
+    if (!target) return;
+
     toggle.addEventListener('click', (e) => {
-      toggle.classList.toggle('collapsed');
+      if (toggle.classList.contains('collapsed')) {
+        toggle.classList.remove('collapsed');
+        toggle.ariaExpanded = 'true';
+
+        target.classList.add('show');
+      } else {
+        toggle.classList.add('collapsed');
+        toggle.ariaExpanded = 'false';
+
+        target.classList.remove('show');
+      }
+
       e.preventDefault();
     });
   });
@@ -433,6 +450,7 @@ function setupSite() {
 
   setupToc();
   setupPlatformKeys();
+  setupCollapsibleElements();
   setupFeedback();
 }