Bug 1464858 - make visually hidden / screenreader content not display:none, r?eeejay draft
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Tue, 19 Jun 2018 16:33:19 +0100
changeset 808441 1d96d1bea37a40d1b92b86f899d1a7ae02ee268b
parent 808416 257c191e7903523a1132e04460a0b2460d950809
push id113388
push userbmo:gijskruitbosch+bugs@gmail.com
push dateTue, 19 Jun 2018 15:34:01 +0000
reviewerseeejay
bugs1464858
milestone62.0a1
Bug 1464858 - make visually hidden / screenreader content not display:none, r?eeejay MozReview-Commit-ID: JzO7tyO4wv3
toolkit/themes/shared/aboutReader.css
--- a/toolkit/themes/shared/aboutReader.css
+++ b/toolkit/themes/shared/aboutReader.css
@@ -726,16 +726,26 @@ body:not(.loaded) .toolbar:-moz-locale-d
   list-style: disc;
 }
 
 .moz-reader-content ol {
   padding-inline-start: 30px;
   list-style: decimal;
 }
 
-/* Hide elements with common "hidden" class names */
+/* Visually hide (but don't display: none) screen reader elements */
 .moz-reader-content .visually-hidden,
 .moz-reader-content .visuallyhidden,
+.moz-reader-content .sr-only {
+  display: inline-block;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  border-width: 0;
+}
+
+/* Hide elements with common "hidden" class names */
 .moz-reader-content .hidden,
-.moz-reader-content .invisible,
-.moz-reader-content .sr-only {
+.moz-reader-content .invisible {
   display: none;
 }