Layout Grid Example: Show Keyboard NUX only if Grid Focused With Tab Key

Introduce an enhancement for the layout grid example review in issue #227.

The first layout grid provides a NUX to help new keyboard users understand that arrow keys can be used to navigate. This change will cause the NUX to be displayed only if the grid receives focus via the tab key.

examples/grid/LayoutGrids.html

@@ -60,7 +60,7 @@ <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">
+        <div id="grid-nux" class="grid-nux hidden" role="region" aria-label="Grid Instructions" tabindex="0">
           <p>
             Move keyboard focus inside a grid with arrow keys.
           </p>

examples/grid/js/layoutGrids.js

@@ -24,15 +24,23 @@ window.addEventListener('load', function () {
   );
 
   var gridNUX = document.getElementById('grid-nux');
+  var firstGridCell = document.querySelector('#ex1 [tabindex="0"]');
+  firstGridCell.addEventListener(
+    'focus',
+    function () {
+      aria.Utils.removeClass(gridNUX, 'hidden');
+    },
+    {
+      once: true
+    }
+  );
+
   var NUXclose = document.getElementById('close-nux-button');
   var closeNUX = function () {
-    var cellToRefocus = document.querySelector('#ex1 [tabindex="0"]');
-    gridNUX.className = 'grid-nux hidden';
+    aria.Utils.addClass(gridNUX, 'hidden');
     try {
-      cellToRefocus.focus();
-    } catch (error) {
-
-    }
+      firstGridCell.focus();
+    } catch (error) { }
   };
   NUXclose.addEventListener('click', closeNUX);
   NUXclose.addEventListener('keyup', function (event) {