From 9f2a01344631be935ed08a00c839b7b91d8e2693 Mon Sep 17 00:00:00 2001
From: Tatiana <tatermelon@gmail.com>
Date: Mon, 20 Mar 2017 09:57:33 -0700
Subject: [PATCH] add grid arrow key indicator to corner of page

---
 examples/grid/LayoutGrids.html    |   1 +
 examples/grid/css/layoutGrids.css |  12 +++++++++++-
 examples/grid/imgs/black_keys.png | Bin 0 -> 8414 bytes
 examples/grid/imgs/keys.png       | Bin 0 -> 372 bytes
 examples/grid/js/dataGrid.js      |  30 ++++++++++++++++++++++++++++++
 5 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 examples/grid/imgs/black_keys.png
 create mode 100644 examples/grid/imgs/keys.png

diff --git a/examples/grid/LayoutGrids.html b/examples/grid/LayoutGrids.html
index 0665ed417b..f9aa842b02 100644
--- a/examples/grid/LayoutGrids.html
+++ b/examples/grid/LayoutGrids.html
@@ -358,6 +358,7 @@ <h4>Notes</h4>
         </li>
       </ol>
     </section>
+    <div id="arrow-keys-indicator" class="hidden" />
   </section>
 
   <section>
diff --git a/examples/grid/css/layoutGrids.css b/examples/grid/css/layoutGrids.css
index 86d12b5b4c..276eea8c05 100644
--- a/examples/grid/css/layoutGrids.css
+++ b/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;
diff --git a/examples/grid/imgs/black_keys.png b/examples/grid/imgs/black_keys.png
new file mode 100644
index 0000000000000000000000000000000000000000..7d8c7b8ac9b171fd948f9b80e7c325c90bf7e6c6
GIT binary patch
literal 8414
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

literal 0
HcmV?d00001

diff --git a/examples/grid/imgs/keys.png b/examples/grid/imgs/keys.png
new file mode 100644
index 0000000000000000000000000000000000000000..01d47a0da08efd46bb0aa8f7abd8784448c0b181
GIT binary patch
literal 372
zcmV-)0gL{LP)<h;3K|Lk000e1NJLTq0018V000#T0ssI2F;}7p0003yNkl<ZI8U`y
zy-ve05WcHQ9kUSeN(`9vU9vDFAXTJ7LS<m_yEJMCUI~>2_h&c;BRh$m*bV9@E3)pp
z`|RA0k%-`8n1&pns@41E;Mxnps*Jn#CNOyS+sE&pqsQlZhF>2yuDyxLFbx3eM2Mi*
z(*rYmbqc36tZq;W_LA{Zu#lrgth$y4fU^z==bh&}z0r<{mQphHMOcJ;#-OPiiP+4H
zLs-4&$#S2)iE!TkgDC)1wUVDlw|^J&<oP~%+wNc2dpB}`<yV;B&8mze5%GLS<S&|%
zsp*+`R;wwQcJm(J%P!p5mbw|45g_smnpHQ_-ZGbhDVgdu@PC~HtomwmSk}rH(qfmj
zTKOJiUA7L}npI8o&7@|%(i-l;-Kq`*k6<SNPzdI|?_!>q?^!J3-y~mlR(}CEDvf4D
Sg1}Dz0000<MNUMnLSTX)9j&|o

literal 0
HcmV?d00001

diff --git a/examples/grid/js/dataGrid.js b/examples/grid/js/dataGrid.js
index 43a324a07f..1bd28f5a75 100644
--- a/examples/grid/js/dataGrid.js
+++ b/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,6 +141,11 @@ 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');
 
@@ -146,6 +153,11 @@ aria.Grid.prototype.setFocusPointer = function (row, col) {
   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)