JS Accessibility refinement

This commit is contained in:
nnwhen 2025-03-17 14:11:08 +02:00
parent a4ddfd609d
commit 6cc0d1c1ad
4 changed files with 53 additions and 19 deletions

View file

@ -14,16 +14,29 @@ function onlyPlayOneIn(container) {
);
}
document.addEventListener("DOMContentLoaded", function () {
onlyPlayOneIn(document.body);
});
function renderJSButtons() {
// If JS is disabled this won't run and therefore JS-powered buttons won't be displayed
let blockToggle = document.getElementsByClassName("block-toggle");
for (let i = 0; i < blockToggle.length; i++) {
blockToggle[i].style.display = "block";
// Accessibility is important!!!
blockToggle[i].ariaHidden = "false";
}
}
function blockToggle(id) {
var blockID = document.getElementById(id);
if (blockID.style.display === "block") {
blockID.style.display = "none";
blockID.ariaHidden = "true";
} else {
blockID.style.display = "block";
blockID.ariaHidden = "false";
}
}
document.addEventListener("DOMContentLoaded", function () {
onlyPlayOneIn(document.body);
renderJSButtons();
});

View file

@ -2,8 +2,12 @@ function nowPostID() {
// Thread Parents
let IDs = document.getElementsByClassName("now");
// If JS cannot run, the H4 must not be rendered for sake of screen-readers
for (let i = 0; i < IDs.length; i++) {
IDs[i].getElementsByTagName("h4")[0].innerHTML = "#" + IDs[i].id;
let IDsH4 = IDs[i].getElementsByTagName("h4");
IDsH4[0].innerHTML = "#" + IDs[i].id;
IDsH4[0].style.display = "block";
IDsH4[0].ariaHidden = "false";
}
// Thread Children
@ -11,14 +15,25 @@ function nowPostID() {
for (let i = 0; i < IDs.length; i++) {
for (let k = 0; k < IDs[i].getElementsByTagName("li").length; k++) {
IDs[i]
let IDsH4 = IDs[i]
.getElementsByTagName("li")
[k].getElementsByTagName("h4")[0].innerHTML =
"#" + IDs[i].getElementsByTagName("li")[k].id;
[k].getElementsByTagName("h4");
IDsH4[0].innerHTML = "#" + IDs[i].getElementsByTagName("li")[k].id;
IDsH4[0].style.display = "block";
IDsH4[0].ariaHidden = "false";
}
}
}
function initialiseLyrics() {
// If JS is disabled this won't run and therefore JS-powered lyrics will just display normally
let hideLyrics = document.getElementsByClassName("lyrics");
for (let i = 0; i < hideLyrics.length; i++) {
hideLyrics[i].style.display = "none";
}
}
document.addEventListener("DOMContentLoaded", function () {
nowPostID(document.body);
initialiseLyrics();
});