Add Visual Indicators That Arrow Keys Work to Layout Grid Example

For issue #227, in the first layout grid example in examples/grid/LayoutGrids.html:
1. Change the focus ring in the grid to include indicators that directional navigation is available with the arrow keys.
2. Add a NUX in a labeled region after the grid. The NUX explains the meaning of the indicators.
3. The NUX is the first item in the tab sequence after the grid.
4. When users close the NUX, focus returns to the grid.

examples/grid/LayoutGrids.html

@@ -60,6 +60,23 @@ <h4 id="grid1_label">Related Documents</h4>
             <span role="gridcell" class="list-link"><a tabindex="-1" href="https://www.w3.org/TR/2015/WD-SVG2-20150915/">SVG 2 Specification</a></span>
           </div>
         </div>
+        <div id="grid-nux" class="grid-nux" role="region" aria-label="Grid Instructions" tabindex="0">
+          <p>
+            Move keyboard focus inside a grid with arrow keys.
+          </p>
+          <p>
+            Arrow keys work any time you see this focus ring with the arrow
+            indicators.
+          </p>
+          <p>
+            When the arrow key focus ring appears, other keys, including Home,
+            End, Ctrl-Home, Ctrl-End, Page Up, and Page Down may also be
+            available to make keyboard navigation easier.
+          </p>
+          <a id="close-nux-button" class="close-nux-button" role="button" tabindex="0">
+            Close Tutorial
+          </a>
+        </div>
       </div>
       <div role="separator" id="ex1_end_sep" aria-labelledby="ex1_end_sep ex1_label" aria-label="End of"></div>
       <h4>Notes</h4>

examples/grid/css/layoutGrids.css

@@ -24,10 +24,76 @@
   height: 40px;
   margin: 5px 0 0 0;
   padding: 5px;
+	position: relative;
   vertical-align: middle;
   width: 120px;
 }
 
+[role="gridcell"], [role="gridcell"] [tabindex] {
+	display: inline-block;
+	position: relative;
+}
+
+[role="gridcell"]:focus::before, [role="gridcell"] *:focus::before {
+	content: ' ';
+	background: url('../imgs/arrows-group-in-four-directions-3.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;
+}
+
+.grid-nux {
+	background: #eaf9ef;
+	position: absolute;
+	max-width: 500px;
+	border: 1px solid #bbb;
+	padding: 0 15px 20px;
+	margin-top: 20px;
+	box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
+}
+
+.grid-nux:after, .grid-nux:before {
+	bottom: 100%;
+	left: 20px;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+}
+
+.grid-nux:after {
+	border-color: rgba(136, 183, 213, 0);
+	border-bottom-color: #eaf9ef;
+	border-width: 10px;
+	margin-left: -10px;
+}
+
+.grid-nux:before {
+	border-color: rgba(194, 225, 245, 0);
+	border-bottom-color: #bbb;
+	border-width: 11px;
+	margin-left: -11px;
+}
+
+.close-nux-button {
+	color: #360;
+	cursor: default;
+	position: absolute;
+  right: 10px;
+  bottom: 10px;
+  text-decoration: underline;
+}
+
 .recipient-list {
 	background: #eee;
 	border: 1px solid #ddd;

examples/grid/js/layoutGrids.js

@@ -1,3 +1,5 @@
+var aria = aria || {};
+
 /**
  * ARIA Grid Examples
  * @function onload
@@ -20,6 +22,25 @@ window.addEventListener('load', function () {
     document.getElementById('add-recipient-button'),
     document.getElementById('form-action-text')
   );
+
+  var gridNUX = document.getElementById('grid-nux');
+  var NUXclose = document.getElementById('close-nux-button');
+  var closeNUX = function () {
+    var cellToRefocus = document.querySelector('#ex1 [tabindex="0"]');
+    gridNUX.className = 'grid-nux hidden';
+    try {
+      cellToRefocus.focus();
+    } catch (error) {
+
+    }
+  };
+  NUXclose.addEventListener('click', closeNUX);
+  NUXclose.addEventListener('keyup', function (event) {
+    var key = event.which || event.keyCode;
+    if (key === aria.KeyCode.RETURN) {
+      closeNUX();
+    }
+  });
 });
 
 function PillList (grid, input, submitButton, formUpdateText) {