JS Accessibility refinement
This commit is contained in:
parent
a4ddfd609d
commit
6cc0d1c1ad
4 changed files with 53 additions and 19 deletions
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue