kyfx
/
hugo-geekdoc
mirror of https://github.com/thegeeklab/hugo-geekdoc.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: fix accessibility helper for desktop (#991)

This commit is contained in:
Robert Kaussow 2025-03-04 07:50:04 +01:00 committed by GitHub
parent 78e46d2af6
commit 2675bec266
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 31 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/js/accessibility.js
View File

@ -1,13 +1,27 @@
document.addEventListener("DOMContentLoaded", function () {
// Find all elements with role="button"
const buttonRoleElements = document.querySelectorAll('[role="button"]')
const gdocNav = document.querySelector(".gdoc-nav")
const gdocPage = document.querySelector(".gdoc-page")
const menuControl = document.getElementById("menu-control")
buttonRoleElements.forEach((buttonElement) => {
// Check if this button controls a checkbox
const controlId = buttonElement.parentElement.getAttribute("for")
// Helper function for menu navigation accessibility
function updateMenuAccessibility() {
if (!gdocNav || !gdocPage || !menuControl) return
const isMenuOpen = menuControl.checked
const isDesktop = window.matchMedia("(min-width: 41rem)").matches
// Set nav accessibility attributes
gdocNav.toggleAttribute("inert", !isDesktop && !isMenuOpen)
gdocNav.setAttribute("aria-hidden", (!isDesktop && !isMenuOpen).toString())
// Set page accessibility attributes
gdocPage.toggleAttribute("inert", !isDesktop && isMenuOpen)
gdocPage.setAttribute("aria-hidden", (!isDesktop && isMenuOpen).toString())
}
// Process all button role elements
document.querySelectorAll('[role="button"]').forEach((buttonElement) => {
const controlId = buttonElement.parentElement?.getAttribute("for")
if (!controlId) return
const controlElement = document.getElementById(controlId)
@ -16,48 +30,24 @@ document.addEventListener("DOMContentLoaded", function () {
// Set initial accessibility state
buttonElement.setAttribute("aria-pressed", controlElement.checked)
if (controlId === "menu-control" && gdocNav && gdocPage) {
updateMenuAccessibility(controlElement.checked)
// Handle accessibility updates
const updateButton = () => {
buttonElement.setAttribute("aria-pressed", controlElement.checked)
if (controlId === "menu-control") updateMenuAccessibility()
}
buttonElement.addEventListener("click", function () {
this.setAttribute("aria-pressed", controlElement.checked)
if (controlId === "menu-control" && gdocNav && gdocPage) {
updateMenuAccessibility(controlElement.checked)
}
})
buttonElement.addEventListener("keydown", function (event) {
// Event listeners
buttonElement.addEventListener("click", updateButton)
buttonElement.addEventListener("keydown", (event) => {
if (event.key === "Enter") {
controlElement.checked = !controlElement.checked
this.setAttribute("aria-pressed", controlElement.checked)
if (controlId === "menu-control" && gdocNav && gdocPage) {
updateMenuAccessibility(controlElement.checked)
}
updateButton()
event.preventDefault()
}
})
})
// Helper function for menu navigation accessibility
function updateMenuAccessibility(isMenuOpen) {
if (!gdocNav || !gdocPage) return
if (isMenuOpen) {
gdocNav.removeAttribute("inert")
gdocNav.setAttribute("aria-hidden", false)
gdocPage.setAttribute("inert", "")
gdocPage.setAttribute("aria-hidden", true)
} else {
gdocNav.setAttribute("inert", "")
gdocNav.setAttribute("aria-hidden", true)
gdocPage.removeAttribute("inert")
gdocPage.setAttribute("aria-hidden", false)
}
}
// Initial call and resize handler
updateMenuAccessibility()
window.addEventListener("resize", updateMenuAccessibility)
})