From e9ec27169c062821e3396793ca97958e000c6eeb Mon Sep 17 00:00:00 2001
From: chylex <contact@chylex.com>
Date: Mon, 25 Sep 2017 21:12:47 +0200
Subject: [PATCH] Improve guide for small width screens and screen readers
---
Resources/Guide/script.js | 3 +++
Resources/Guide/style.css | 6 ++++++
2 files changed, 9 insertions(+)
diff --git a/Resources/Guide/script.js b/Resources/Guide/script.js
index 3932f4c6..6de64b09 100644
--- a/Resources/Guide/script.js
+++ b/Resources/Guide/script.js
@@ -10,11 +10,13 @@ document.addEventListener("DOMContentLoaded", function(){
if (parent.hasAttribute("open")){
parent.removeAttribute("open");
summary.setAttribute("aria-expanded", "false");
+ contents.setAttribute("aria-hidden", "true");
contents.style.display = "none";
}
else{
parent.setAttribute("open", "");
summary.setAttribute("aria-expanded", "true");
+ contents.setAttribute("aria-hidden", "false");
contents.style.display = "block";
}
};
@@ -41,6 +43,7 @@ document.addEventListener("DOMContentLoaded", function(){
summary.addEventListener("click", onClick);
summary.addEventListener("keydown", onKey);
+ contents.setAttribute("aria-hidden", "true");
contents.style.display = "none";
}
}
diff --git a/Resources/Guide/style.css b/Resources/Guide/style.css
index 0d2d97e1..81c3b652 100644
--- a/Resources/Guide/style.css
+++ b/Resources/Guide/style.css
@@ -23,6 +23,12 @@ body {
flex-direction: column;
}
+@media(max-width: 408px) {
+ #guide section {
+ min-width: calc(100vw - 48px);
+ }
+}
+
#guide h2 {
margin: 20px 0 10px;
font-size: 32px;