fix: aria-expanded not toggled on mobile menu toggle

astro.config.mjs

@@ -70,6 +70,7 @@ export default defineConfig({
       components: {
         // Override the default `SocialIcons` component.
         Header: './src/components/FCCHeader.astro',
+        MobileMenuToggle: './src/components/FCCMobileMenuToggle.astro',
         ThemeProvider: './src/components/FCCThemeProvider.astro',
         ThemeSelect: './src/components/FCCThemeSelect.astro'
       },

src/components/FCCMobileMenuToggle.astro

@@ -0,0 +1,110 @@
+---
+import type { Props } from '@astrojs/starlight/props';
+import { Icon } from '@astrojs/starlight/components';
+
+const { labels } = Astro.props;
+---
+
+<starlight-menu-button>
+  <button
+    aria-expanded='false'
+    aria-label={labels['menuButton.accessibleLabel']}
+    aria-controls='starlight__sidebar'
+    class='sl-flex md:sl-hidden'
+  >
+    <Icon name="bars" />
+    <Icon name="close" class="hidden" />
+  </button>
+</starlight-menu-button>
+
+<script>
+  class StarlightMenuButton extends HTMLElement {
+    btn = this.querySelector('button')!;
+    bars = this.btn.querySelector(':first-child')!;
+    close = this.btn.querySelector(':nth-child(2)')!;
+
+    constructor() {
+      super();
+      // Toggle `aria-expanded` state when a user clicks the button.
+      this.btn.addEventListener('click', () => this.toggleExpanded());
+
+      // Close the menu when a user presses the escape key.
+      const parentNav = this.closest('nav');
+      if (parentNav) {
+        parentNav.addEventListener('keyup', e => this.closeOnEscape(e));
+      }
+    }
+
+    setExpanded(expanded: boolean) {
+      this.btn.setAttribute('aria-expanded', String(expanded));
+      document.body.toggleAttribute('data-mobile-menu-expanded');
+      this.bars.classList.toggle('hidden');
+      this.close.classList.toggle('hidden');
+    }
+
+    toggleExpanded() {
+      this.setExpanded(this.btn.getAttribute('aria-expanded') !== 'true');
+    }
+
+    closeOnEscape(e: KeyboardEvent) {
+      if (e.code === 'Escape') {
+        this.setExpanded(false);
+        this.btn.focus();
+      }
+    }
+  }
+
+  customElements.define('starlight-menu-button', StarlightMenuButton);
+</script>
+
+<style>
+  button {
+    position: fixed;
+    top: calc((var(--sl-nav-height) - var(--sl-menu-button-size)) / 2);
+    inset-inline-end: var(--sl-nav-pad-x);
+    z-index: var(--sl-z-index-navbar);
+    border: 0;
+    border-radius: 50%;
+    width: var(--sl-menu-button-size);
+    height: var(--sl-menu-button-size);
+    padding: 0.5rem;
+    background-color: var(--sl-color-white);
+    color: var(--sl-color-black);
+    box-shadow: var(--sl-shadow-md);
+    cursor: pointer;
+  }
+
+  button[aria-expanded='true'] {
+    background-color: var(--sl-color-gray-2);
+    box-shadow: none;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  :global(:has(button[aria-expanded='true']) ~ .sidebar-pane) {
+    --sl-sidebar-visibility: visible;
+  }
+
+  :global([data-theme='light']) button {
+    background-color: var(--sl-color-black);
+    color: var(--sl-color-white);
+  }
+
+  :global([data-theme='light']) button[aria-expanded='true'] {
+    background-color: var(--sl-color-gray-5);
+  }
+</style>
+
+<style is:global>
+  [data-mobile-menu-expanded] {
+    overflow: hidden;
+  }
+
+  @media (min-width: 50rem) {
+    [data-mobile-menu-expanded] {
+      overflow: auto;
+    }
+  }
+</style>