improve dropdown accessibility
This commit is contained in:
@ -81,15 +81,15 @@ const lastDropdownItem = dropdownItems[dropdownItems.length - 1];
|
||||
|
||||
const openDropdown = function() {
|
||||
dropdownContent.classList.add("show");
|
||||
dropdownContent.setAttribute("aria-hidden", "false");
|
||||
dropdownButton.setAttribute("aria-expanded", "true");
|
||||
dropdownContent.ariaHidden = "false";
|
||||
dropdownButton.ariaExpanded = "true";
|
||||
}
|
||||
|
||||
const closeDropdown = function() {
|
||||
if (dropdownButton.ariaExpanded === "true") {
|
||||
dropdownContent.classList.remove("show");
|
||||
dropdownContent.setAttribute("aria-hidden", "true");
|
||||
dropdownButton.setAttribute("aria-expanded", "false");
|
||||
dropdownContent.ariaHidden = "true";
|
||||
dropdownButton.ariaExpanded = "false";
|
||||
}
|
||||
}
|
||||
|
||||
@ -106,7 +106,7 @@ dropdownButton.addEventListener("keydown", (event) => {
|
||||
} else {
|
||||
closeDropdown();
|
||||
}
|
||||
}
|
||||
} else if (event.key === "Tab" && event.shiftKey) closeDropdown();
|
||||
});
|
||||
|
||||
firstDropdownItem.addEventListener("keydown", (event) => {
|
||||
@ -118,7 +118,7 @@ lastDropdownItem.addEventListener("keydown", (event) => {
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape") {
|
||||
if (event.key === "Escape" && dropdownButton.ariaExpanded === "true") {
|
||||
closeDropdown();
|
||||
dropdownButton.focus();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user