feat: improved tab navigation

src/assets/scripts/media-toggles.js

@@ -1,4 +1,4 @@
-window.onload = () => {
+window.addEventListener('load', () => {
   const initializeButtonSet = (buttonSet) => {
     const buttons = buttonSet.querySelectorAll('button')
     const buttonIds = Array.from(buttons).map(button => button.getAttribute('data-toggle'))
@@ -27,4 +27,4 @@ window.onload = () => {
 
   const buttonSets = document.querySelectorAll('.section-header-buttons')
   buttonSets.forEach(initializeButtonSet)
-}
+})

src/assets/scripts/menu.js

@@ -0,0 +1,64 @@
+window.addEventListener('load', () => {
+  const menuInput = document.getElementById('menu-toggle')
+  const menuButtonContainer = document.querySelector('.menu-button-container')
+  const menuItems = document.querySelectorAll('.menu-primary li[role="menu-item"]')
+  const isMobile = () => window.innerWidth <= 768
+
+  const updateTabIndex = () => {
+    const isExpanded = menuInput.checked
+    menuButtonContainer.setAttribute('aria-expanded', isExpanded)
+
+    menuItems.forEach(item => {
+      const link = item.querySelector('a')
+      if (link) link.setAttribute('tabindex', isMobile() && !isExpanded ? '-1' : '0')
+    })
+  }
+
+  const handleMenuChange = () => {
+    updateTabIndex()
+    if (menuInput.checked) {
+      const firstLink = menuItems[0].querySelector('a')
+      if (firstLink) firstLink.focus()
+    } else {
+      menuButtonContainer.focus()
+    }
+  }
+
+  updateTabIndex()
+
+  menuInput.addEventListener('change', handleMenuChange)
+
+  menuButtonContainer.addEventListener('keydown', e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      menuInput.checked = !menuInput.checked
+      handleMenuChange()
+    }
+  })
+
+  menuItems.forEach(item => {
+    item.addEventListener('keydown', e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        item.querySelector('a').click()
+      }
+    })
+  })
+
+  document.addEventListener('keydown', e => {
+    if (e.key === 'Escape') {
+      if (isMobile() && menuInput.checked) {
+        menuInput.checked = false
+        handleMenuChange()
+      }
+    }
+  })
+
+  window.addEventListener('resize', () => {
+    updateTabIndex()
+    if (!isMobile() && menuInput.checked) {
+      menuInput.checked = false
+      handleMenuChange()
+    }
+  })
+})

src/assets/scripts/text-toggle.js

@@ -1,4 +1,4 @@
-window.onload = () => {
+window.addEventListener('load', () => {
   const button = document.querySelector('[data-toggle-button]')
   const content = document.querySelector('[data-toggle-content]')
   const text = document.querySelectorAll('[data-toggle-content] p')
@@ -21,4 +21,4 @@ window.onload = () => {
       button.textContent = 'Show more'
     }
   });
-}
+})