add grid arrow key indicator to corner of page

examples/grid/LayoutGrids.html

@@ -358,6 +358,7 @@ <h4>Notes</h4>
         </li>
       </ol>
     </section>
+    <div id="arrow-keys-indicator" class="hidden" />
   </section>
 
   <section>

examples/grid/css/layoutGrids.css

@@ -2,6 +2,16 @@
 	display: none !important;
 }
 
+#arrow-keys-indicator {
+	bottom: 0;
+	left: 0;
+	position: fixed;
+	height: 75px;
+	width: 100px;
+	background: url('../imgs/black_keys.png') no-repeat;
+	background-size: contain;
+}
+
 .accessible_elem {
 	clip: rect(1px 1px 1px 1px);
 	clip: rect(1px, 1px, 1px, 1px);
@@ -36,7 +46,7 @@
 
 [role="gridcell"]:focus::before, [role="gridcell"] *:focus::before {
 	content: ' ';
-	background: url('../imgs/arrows-group-in-four-directions-3.png');
+	background: url('../imgs/keys.png');
 	background-color: white;
 	background-position: center;
 	background-repeat: no-repeat;

examples/grid/js/dataGrid.js

@@ -59,6 +59,8 @@ aria.Grid = function (gridNode) {
   this.shouldRestructure = this.gridNode.hasAttribute('data-restructure');
   this.topIndex = 0;
 
+  this.keysIndicator = document.getElementById('arrow-keys-indicator');
+
   this.setupFocusGrid();
   this.setFocusPointer(0, 0);
 
@@ -139,13 +141,23 @@ aria.Grid.prototype.setFocusPointer = function (row, col) {
     this.grid[this.focusedRow][this.focusedCol].setAttribute('tabindex', -1);
   }
 
+  this.grid[row][col]
+    .removeEventListener('focus', this.showKeysIndicator.bind(this));
+  this.grid[row][col]
+    .removeEventListener('blur', this.hideKeysIndicator.bind(this));
+
   // Disable navigation if focused on an input
   this.navigationDisabled = aria.Utils.matches(this.grid[row][col], 'input');
 
   this.grid[row][col].setAttribute('tabindex', 0);
   this.focusedRow = row;
   this.focusedCol = col;
 
+  this.grid[row][col]
+    .addEventListener('focus', this.showKeysIndicator.bind(this));
+  this.grid[row][col]
+    .addEventListener('blur', this.hideKeysIndicator.bind(this));
+
   return true;
 };
 
@@ -205,6 +217,11 @@ aria.Grid.prototype.clearEvents = function () {
   if (this.shouldRestructure) {
     window.removeEventListener('resize', this.checkRestructureGrid.bind(this));
   }
+
+  this.grid[this.focusedRow][this.focusedCol]
+    .removeEventListener('focus', this.showKeysIndicator.bind(this));
+  this.grid[this.focusedRow][this.focusedCol]
+    .removeEventListener('blur', this.hideKeysIndicator.bind(this));
 };
 
 /**
@@ -244,6 +261,19 @@ aria.Grid.prototype.focusCell = function (row, col) {
   }
 };
 
+aria.Grid.prototype.showKeysIndicator = function () {
+  if (this.keysIndicator) {
+    aria.Utils.removeClass(this.keysIndicator, 'hidden');
+  }
+};
+
+aria.Grid.prototype.hideKeysIndicator = function () {
+  if (this.keysIndicator
+      && this.grid[this.focusedRow][this.focusedCol].tabIndex === 0) {
+    aria.Utils.addClass(this.keysIndicator, 'hidden');
+  }
+};
+
 /**
  * @desc
  *  Triggered on keydown. Checks if an arrow key was pressed, and (if possible)