changed focus outline for grid to dotted line

w3c · Mar 24, 2017 · 23f171f · 23f171f
1 parent 9f2a013
commit 23f171f
Showing 1 changed file with 11 additions and 15 deletions.
diff --git a/examples/grid/css/layoutGrids.css b/examples/grid/css/layoutGrids.css
@@ -3,7 +3,7 @@
 }
 
 #arrow-keys-indicator {
-	bottom: 0;
+	bottom: 10px;
 	left: 0;
 	position: fixed;
 	height: 75px;
@@ -12,6 +12,12 @@
 	background-size: contain;
 }
 
+@media screen and (min-width: 1000px) {
+	#arrow-keys-indicator {
+		display: none;
+	}
+}
+
 .accessible_elem {
 	clip: rect(1px 1px 1px 1px);
 	clip: rect(1px, 1px, 1px, 1px);
@@ -44,20 +50,10 @@
 	position: relative;
 }
 
-[role="gridcell"]:focus::before, [role="gridcell"] *:focus::before {
-	content: ' ';
-	background: url('../imgs/keys.png');
-	background-color: white;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: 12px;
-	width: 12px;
-	height: 12px;
-	display: block;
-	position: absolute;
-	top: 0px;
-	left: -15px;
-	z-index: 1;
+[role="gridcell"]:focus, [role="gridcell"] *:focus {
+	outline: #005a9c;
+	outline-style: dotted;
+	outline-width: 3px;
 }
 
 .grid-nux {