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
Show stats Download patch file Download diff file Expand all files Collapse all files

10
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "19.5.7", "version": "19.5.9",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "coryd.dev", "name": "coryd.dev",
"version": "19.5.7", "version": "19.5.9",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@cdransf/api-text": "^1.4.0", "@cdransf/api-text": "^1.4.0",
@ -532,9 +532,9 @@
"peer": true "peer": true
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "20.14.5", "version": "20.14.6",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.5.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.6.tgz",
"integrity": "sha512-aoRR+fJkZT2l0aGOJhuA8frnCSoNX6W7U2mpNq63+BxBIj5BQFt8rHy627kijCmm63ijdSdwvGgpUsU6MBsZZA==", "integrity": "sha512-JbA0XIJPL1IiNnU7PFxDXyfAwcwVVrOoqyzzyQTyMeVhBzkJVMSkC1LlVsRQ2lpqiY4n6Bb9oCS6lzDKVQxbZw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "19.5.8", "version": "19.5.9",
"description": "The source for my personal site. Built using 11ty.", "description": "The source for my personal site. Built using 11ty.",
"type": "module", "type": "module",
"scripts": { "scripts": {

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

28
src/assets/styles/components/menu.css
View file

@ -51,22 +51,26 @@
#menu-toggle { #menu-toggle {
display: none; display: none;
}
#menu-toggle:checked + .menu-button-container .menu-closed { &:checked + .menu-button-container {
display: none; & .menu-closed {
} display: none;
}
#menu-toggle:checked + .menu-button-container .menu-open { & .menu-open {
display: block; display: block;
} }
}
#menu-toggle:not(:checked) + .menu-button-container .menu-closed { &:not(:checked) + .menu-button-container {
display: block; & .menu-closed {
} display: block;
}
#menu-toggle:not(:checked) + .menu-button-container .menu-open { & .menu-open {
display: none; display: none;
}
}
} }
a[role="menu-item"]:focus { a[role="menu-item"]:focus {