change aria-describedby for settings toggle when expanded / collapsed.

This commit is contained in:
westtle 2024-02-13 15:19:36 +07:00
parent d357eff591
commit 46e73cf978

View file

@ -1,6 +1,7 @@
// HTML.
const settings = document.querySelector(".settings");
const settingsToggle = document.querySelector(".settings__button--toggle-settings");
const settingsToggleDescription = document.querySelector(".settings__button-description--toggle-settings");
const settingsList = document.querySelector(".settings__buttons");
const settingsItems = settingsList.querySelectorAll("a, button");
@ -10,12 +11,14 @@ function toggleSettings() {
if (isExpanded) {
settings.setAttribute("data-expanded", false);
settingsToggle.setAttribute("aria-expanded", false);
settingsToggleDescription.innerText = "Press to open settings.";
settingsList.setAttribute("aria-hidden", true);
settingsList.tabIndex = -1;
settingsItems.forEach(item => {item.tabIndex = -1});
} else {
settings.setAttribute("data-expanded", true);
settingsToggle.setAttribute("aria-expanded", true);
settingsToggleDescription.innerText = "Press to close settings.";
settingsList.setAttribute("aria-hidden", false);
settingsList.removeAttribute("tabIndex");
settingsItems.forEach(item => {item.tabIndex = 0});