Ik heb vandaag de sprint review voorbereid. Dit heb gedaan door vast te stellen wat mijn doelen zijn, mijn demonstratie voor te bereiden en concrete feedback vragen op te stellen. Zie hier het document met alle voorbereiding: https://docs.google.com/document/d/1aGELZ31Uqxx284060BJQSLiAVzfrhFJp0QmmZ4eAKfw/edit?usp=sharing

Zie onderstaande afbeelding voor het overzicht van onze code vragen:

Mijn vraag was: Hoe maak ik een accessible, responsive hamburger menu?

Ik liep er namelijk tijdens het handmatig testen van de website tegenaan, dat de links onder het hamburger menu focusable zijn wanneer het menu gesloten is. Ik dacht op te kunnen lossen met een tabindex="-1", maar hiermee leest een screen reader de links alsnog voor én zijn de links niet focusable op een grotere scherm breedte, waar de links altijd zichtbaar zijn en de hamburger weg is.

Sanne heeft mij op inert gewezen. Hiermee wordt een element door een screen reader genegeerd én krijgt het geen focus. Met Javascript kun je vervolgens deze inert toggelen. Dit hebben we samen toegepast op de hamburger én we hebben een functie geschreven die de scherm breedte checkt en op basis daarvan bepaalt of er überhaupt een inert getoggled moet worden.

Zie hier de issue waarin ik dit beschrijf

En zie hier de code:

<ul class="nav-links primary veronica-primary" inert>
    <li> Item in hamburger</li>
    <li> Item in hamburger</li>
    <li> Item in hamburger</li>
</ul>

// Hamburger navigatie in nav
const navHamburger = document.querySelector("nav button");
const navMenu = document.querySelector("nav ul");
const navButton = document.querySelector(".nav-button img");

navHamburger.addEventListener("click", toggleMenu);

function toggleMenu() {
    navMenu.classList.toggle("showMenu");
    navButton.classList.toggle("showMenu");

    if (navMenu.hasAttribute("inert")) {
        navMenu.removeAttribute("inert");
    } else {
        navMenu.setAttribute("inert", true);
    }
}

// hamburger als je resized
function reportWindowSize() {
    const windowWidth = window.innerWidth;

    if (windowWidth >= 800) {
        navMenu.removeAttribute("inert");
    } else {
        navMenu.setAttribute("inert", true);
    }
}

// checken als het schermbreedte verandert
window.onresize = reportWindowSize;

// checken bij laden pagina
reportWindowSize();