chylex/TweetDuck
1
0
Fork 0
mirror of https://github.com/chylex/TweetDuck.git synced 2025-05-05 11:34:07 +02:00
Code

Improve guide for small width screens and screen readers

Browse Source
This commit is contained in:
chylex 2017-09-25 21:12:47 +02:00
parent 2e24cb634c
commit e9ec27169c
2 changed files with 9 additions and 0 deletions
Resources/Guide
script.jsstyle.css

3
Resources/Guide/script.js
View File

@ -10,11 +10,13 @@ document.addEventListener("DOMContentLoaded", function(){
if (parent.hasAttribute("open")){ if (parent.hasAttribute("open")){
parent.removeAttribute("open"); parent.removeAttribute("open");
summary.setAttribute("aria-expanded", "false"); summary.setAttribute("aria-expanded", "false");
contents.setAttribute("aria-hidden", "true");
contents.style.display = "none"; contents.style.display = "none";
} }
else{ else{
parent.setAttribute("open", ""); parent.setAttribute("open", "");
summary.setAttribute("aria-expanded", "true"); summary.setAttribute("aria-expanded", "true");
contents.setAttribute("aria-hidden", "false");
contents.style.display = "block"; contents.style.display = "block";
} }
}; };
@ -41,6 +43,7 @@ document.addEventListener("DOMContentLoaded", function(){
summary.addEventListener("click", onClick); summary.addEventListener("click", onClick);
summary.addEventListener("keydown", onKey); summary.addEventListener("keydown", onKey);
contents.setAttribute("aria-hidden", "true");
contents.style.display = "none"; contents.style.display = "none";
} }
} }

6
Resources/Guide/style.css
View File

@ -23,6 +23,12 @@ body {
flex-direction: column; flex-direction: column;
} }
@media(max-width: 408px) {
#guide section {
min-width: calc(100vw - 48px);
}
}
#guide h2 { #guide h2 {
margin: 20px 0 10px; margin: 20px 0 10px;
font-size: 32px; font-size: 32px;