[bugfix/frontend] Fix photoswipe layout issues, keyboard shortcuts (#4010)

* fix photoswipe layout issues (chrome)

* aaaaaaaaaaaaaa

* wwwwwwwwwwww
This commit is contained in:
tobi
2025-04-14 15:12:21 +02:00
committed by GitHub
parent f5ce219844
commit b510f3c539
18 changed files with 257 additions and 125 deletions

View File

@ -179,19 +179,24 @@ dynamicSpoiler("text-spoiler", (details) => {
const summary = details.children[0];
const button = details.querySelector(".button");
// Use button inside summary to
// toggle post body visibility.
// Use button *instead of summary*
// to toggle post visibility.
summary.tabIndex = "-1";
button.tabIndex = "0";
button.setAttribute("aria-role", "button");
button.onclick = () => {
details.click();
button.onclick = (e) => {
e.preventDefault();
return details.hasAttribute("open")
? details.removeAttribute("open")
: details.setAttribute("open", "");
};
// Let enter also trigger the button
// (for those using keyboard to navigate).
button.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
summary.click();
e.preventDefault();
button.click();
}
});
@ -215,15 +220,19 @@ dynamicSpoiler("media-spoiler", (details) => {
summary.tabIndex = "-1";
button.tabIndex = "0";
button.setAttribute("aria-role", "button");
button.onclick = () => {
details.click();
button.onclick = (e) => {
e.preventDefault();
return details.hasAttribute("open")
? details.removeAttribute("open")
: details.setAttribute("open", "");
};
// Let enter also trigger the button
// (for those using keyboard to navigate).
button.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
summary.click();
e.preventDefault();
button.click();
}
});