improve dropdown accessibility

This commit is contained in:
2026-03-12 10:08:09 -07:00
parent dc57309584
commit eccf4465eb

View File

@ -81,15 +81,15 @@ const lastDropdownItem = dropdownItems[dropdownItems.length - 1];
const openDropdown = function() { const openDropdown = function() {
dropdownContent.classList.add("show"); dropdownContent.classList.add("show");
dropdownContent.setAttribute("aria-hidden", "false"); dropdownContent.ariaHidden = "false";
dropdownButton.setAttribute("aria-expanded", "true"); dropdownButton.ariaExpanded = "true";
} }
const closeDropdown = function() { const closeDropdown = function() {
if (dropdownButton.ariaExpanded === "true") { if (dropdownButton.ariaExpanded === "true") {
dropdownContent.classList.remove("show"); dropdownContent.classList.remove("show");
dropdownContent.setAttribute("aria-hidden", "true"); dropdownContent.ariaHidden = "true";
dropdownButton.setAttribute("aria-expanded", "false"); dropdownButton.ariaExpanded = "false";
} }
} }
@ -106,7 +106,7 @@ dropdownButton.addEventListener("keydown", (event) => {
} else { } else {
closeDropdown(); closeDropdown();
} }
} } else if (event.key === "Tab" && event.shiftKey) closeDropdown();
}); });
firstDropdownItem.addEventListener("keydown", (event) => { firstDropdownItem.addEventListener("keydown", (event) => {
@ -118,7 +118,7 @@ lastDropdownItem.addEventListener("keydown", (event) => {
}); });
document.addEventListener("keydown", (event) => { document.addEventListener("keydown", (event) => {
if (event.key === "Escape") { if (event.key === "Escape" && dropdownButton.ariaExpanded === "true") {
closeDropdown(); closeDropdown();
dropdownButton.focus(); dropdownButton.focus();
} }