cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: nesting + index behavior

Browse source
This commit is contained in:
Cory Dransfeldt 2024-06-19 09:20:28 -07:00
parent 881ed4d874
commit 897ef64d3c
No known key found for this signature in database
4 changed files with 27 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/assets/scripts/menu.js
View file

@ -5,28 +5,23 @@ window.addEventListener('load', () => {
const menuItems = document.querySelectorAll('.menu-primary li[role="menu-item"]')
const isMobile = () => window.innerWidth <= 768
const updateTabIndex = () => {
const udpateMenuState = () => {
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')
})
if(isExpanded) menuLabelText.textContent = 'Close mobile menu'
if (!isExpanded) menuLabelText.textContent = 'Open mobile menu'
}
updateTabIndex()
udpateMenuState()
menuInput.addEventListener('change', updateTabIndex)
menuInput.addEventListener('change', udpateMenuState)
menuButtonContainer.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault()
menuInput.checked = !menuInput.checked
updateTabIndex()
udpateMenuState()
}
})
@ -42,7 +37,7 @@ window.addEventListener('load', () => {
document.addEventListener('keydown', e => {
if (e.key === 'Escape' && isMobile() && menuInput.checked) {
menuInput.checked = false
updateTabIndex()
udpateMenuState()
}
})
})