Updated NUX description to describe new focus indicators

examples/grid/LayoutGrids.html

@@ -61,15 +61,23 @@ <h4 id="grid1_label">Related Documents</h4>
           </div>
         </div>
         <div id="grid-nux" class="grid-nux hidden" role="region" aria-label="Grid Instructions" tabindex="0">
-          <p>
+          <p class="grid-nux-header">
             Move keyboard focus inside a grid with arrow keys.
           </p>
+          <p class="indicator_description">
+            <img src="imgs/black_keys.png" width="100" alt="Arrow keypad"
+              class="indicator_graphic" />
+          </p>
           <p>
-            Arrow keys work any time you see this focus ring with the arrow
-            indicators.
+            This focus ring indicates that arrow keys can be used.
+            <span class="indicator_description">
+              When focus is in a widget that allows for keyboard controls,
+              a keypad graphic will also appear in the corner of the page.
+            </span>
           </p>
+
           <p>
-            When the arrow key focus ring appears, other keys, including Home,
+            When the focus indicators appear, other keys, including Home,
             End, Ctrl-Home, Ctrl-End, Page Up, and Page Down may also be
             available to make keyboard navigation easier.
           </p>

examples/grid/css/layoutGrids.css

@@ -12,10 +12,14 @@
 	background-size: contain;
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (max-width: 1000px) {
 	#arrow-keys-indicator {
 		display: none;
 	}
+
+	.indicator_description {
+		display: none;
+	}
 }
 
 .accessible_elem {
@@ -91,6 +95,15 @@
 	margin-left: -11px;
 }
 
+.grid-nux-header {
+	font-weight: bold;
+}
+
+.indicator_graphic {
+	float: right;
+	margin-left: 10px;
+}
+
 .close-nux-button {
 	color: #360;
 	cursor: default;