improve dropdown accessibility
This commit is contained in:
@ -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();
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user