ok big chunk o' everything

js/dropdown.js

@@ -0,0 +1,56 @@
+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();
+});