siblinghood/js/dropdown.js

const dropdown = document.getElementById("dropdown");
const dropdownButton = document.getElementById("drop-button");
const dropdownContent = document.getElementById("drop-content");

const dropdownItems = dropdownContent.querySelectorAll("a");
const firstDropdownItem = dropdownItems[0];
const lastDropdownItem = dropdownItems[dropdownItems.length - 1];

const openDropdown = function() {
	dropdownContent.classList.add("show");
	dropdownContent.ariaHidden = "false";
	dropdownButton.ariaExpanded = "true";
}

const closeDropdown = function() {
	if (dropdownButton.ariaExpanded === "true") {
		dropdownContent.classList.remove("show");
		dropdownContent.ariaHidden = "true";
		dropdownButton.ariaExpanded = "false";
	}
}

dropdownButton.addEventListener("click", (event) => {
	if (dropdownButton.ariaExpanded === "false") openDropdown();
	else closeDropdown();
});

dropdownButton.addEventListener("keydown", (event) => {
	if (event.key === "Enter" || event.key === " ") { // Space or Enter key
		event.preventDefault(); // Prevent the default action to stop scrolling when pressing Space
		if (dropdownButton.ariaExpanded === "false") {
			openDropdown();
		} else {
			closeDropdown();
		}
	} else if (event.key === "Tab" && event.shiftKey) closeDropdown();
});

firstDropdownItem.addEventListener("keydown", (event) => {
	if (event.key === "Tab" && event.shiftKey) closeDropdown();
});

lastDropdownItem.addEventListener("keydown", (event) => {
	if (event.key === "Tab" && !event.shiftKey) closeDropdown();
});

document.addEventListener("keydown", (event) => {
	if (event.key === "Escape" && dropdownButton.ariaExpanded === "true") {
		closeDropdown();
		dropdownButton.focus();
	}
});

window.addEventListener("click", (event) => {
	if (!event.target.matches("#drop-button")) closeDropdown();
});