SAK-31549 - Ensure screen reader specific content is rendered off-scr…

…een (sakaiproject#3334)
alaminreaz · Sep 16, 2016 · 10d80c2 · 10d80c2
1 parent a55a796
commit 10d80c2
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/jsf/jsf-resource/src/webapp/css/sakai.css b/jsf/jsf-resource/src/webapp/css/sakai.css
@@ -138,5 +138,3 @@ ul.attachList li
 
 /*subgroup 4.4 - not sure - not used?*/
 hr.itemSeparator{}
-.skip
-{display:inline;position:absolute;top:-999px;left:-999px;height:0}
diff --git a/reference/library/src/morpheus-master/sass/base/_defaults.scss b/reference/library/src/morpheus-master/sass/base/_defaults.scss
@@ -96,7 +96,12 @@ h4{
 }
 
 .skip{
-	display: none;
+	position: absolute !important;
+	height: 1px; width: 1px; 
+	overflow: hidden;
+	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
 }
 
 input[type="submit"],input[type="button"]{

diff --git a/reference/library/src/webapp/skin/tool_base.css b/reference/library/src/webapp/skin/tool_base.css
@@ -545,11 +545,12 @@ input.upload{
 
 /*informational texts intended for screen readers - renders offscreen*/
 .skip, .fl-offScreen-hidden {
-	display: inline;
-	position: absolute;
-	top: -999px;
-	left: -999px;
-	height: 0;
+	position: absolute !important;
+	height: 1px; width: 1px; 
+	overflow: hidden;
+	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px); 
 }
 /*"inactive" gets applied to a container whose children you want to make look grayed out (not inactive per se) - applies to all textual elements and images
 placeholder till more standard way of doing it*/