From 36cfb460a030fbe6763cb5f9deb6c2cb76bc7a09 Mon Sep 17 00:00:00 2001
From: Tatiana Iskandar <tatermelon@users.noreply.github.com>
Date: Tue, 17 Oct 2017 21:06:01 -0700
Subject: [PATCH] Rearrangeable Listbox Examples: Add live regions that
 announce completed actions

For issue #123, add a live region to each example that announces the result of pressing an action button that moves one of the listbox options.
---
 examples/listbox/css/listbox.css             | 11 ++++++
 examples/listbox/js/listbox-rearrangeable.js | 41 ++++++++++++++++++++
 examples/listbox/js/listbox.js               | 15 ++++++-
 examples/listbox/listbox-rearrangeable.html  |  2 +
 4 files changed, 67 insertions(+), 2 deletions(-)

diff --git a/examples/listbox/css/listbox.css b/examples/listbox/css/listbox.css
index 15199f6700..4c085e2d67 100644
--- a/examples/listbox/css/listbox.css
+++ b/examples/listbox/css/listbox.css
@@ -112,3 +112,14 @@ button[aria-disabled="true"] {
 .toolbar-item[aria-disabled="false"]:focus {
 	background-color: #eee;
 }
+
+.offscreen {
+	clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+	font-size: 14px;
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
diff --git a/examples/listbox/js/listbox-rearrangeable.js b/examples/listbox/js/listbox-rearrangeable.js
index e1706f499a..47269c9fcd 100644
--- a/examples/listbox/js/listbox-rearrangeable.js
+++ b/examples/listbox/js/listbox-rearrangeable.js
@@ -15,6 +15,29 @@ window.addEventListener('load', function () {
     document.getElementById('ex1-down')
   );
   ex1ImportantListbox.setupMove(document.getElementById('ex1-delete'), ex1UnimportantListbox);
+  ex1ImportantListbox.setHandleItemChange(function (event, items) {
+    var updateText = '';
+
+    switch (event) {
+      case 'added':
+        updateText = 'Moved ' + items[0].innerText + ' to important features.';
+        break;
+      case 'removed':
+        updateText = 'Moved ' + items[0].innerText + ' to unimportant features.';
+        break;
+      case 'moved_up':
+      case 'moved_down':
+        var pos = Array.prototype.indexOf.call(this.listboxNode.children, items[0]);
+        pos++;
+        updateText = 'Moved to position ' + pos;
+        break;
+    }
+
+    if (updateText) {
+      var ex1LiveRegion = document.getElementById('ss_live_region');
+      ex1LiveRegion.innerText = updateText;
+    }
+  });
   ex1UnimportantListbox.setupMove(document.getElementById('ex1-add'), ex1ImportantListbox);
 
   var ex2 = document.getElementById('ex2');
@@ -23,4 +46,22 @@ window.addEventListener('load', function () {
 
   ex2ImportantListbox.setupMove(document.getElementById('ex2-add'), ex2UnimportantListbox);
   ex2UnimportantListbox.setupMove(document.getElementById('ex2-delete'), ex2ImportantListbox);
+  ex2UnimportantListbox.setHandleItemChange(function (event, items) {
+    var updateText = '';
+    var itemText = items.length === 1 ? '1 item' : items.length + ' items';
+
+    switch (event) {
+      case 'added':
+        updateText = 'Added ' + itemText + ' to chosen features.';
+        break;
+      case 'removed':
+        updateText = 'Removed ' + itemText + ' from chosen features.';
+        break;
+    }
+
+    if (updateText) {
+      var ex1LiveRegion = document.getElementById('ms_live_region');
+      ex1LiveRegion.innerText = updateText;
+    }
+  });
 });
diff --git a/examples/listbox/js/listbox.js b/examples/listbox/js/listbox.js
index 434fb75565..4322838d49 100644
--- a/examples/listbox/js/listbox.js
+++ b/examples/listbox/js/listbox.js
@@ -23,6 +23,8 @@ aria.Listbox = function (listboxNode) {
   this.moveButton = null;
   this.keysSoFar = '';
 
+  this.handleItemChange = function (event, items) {};
+
   this.registerEvents();
 };
 
@@ -221,8 +223,7 @@ aria.Listbox.prototype.findItemToFocus = function (key) {
       this.searchIndex
     );
   }
-
-  return nextMatch || itemList[this.searchIndex];
+  return nextMatch;
 };
 
 aria.Listbox.prototype.clearKeysSoFarAfterDelay = function () {
@@ -390,6 +391,8 @@ aria.Listbox.prototype.addItems = function (items) {
   if (!this.activeDescendant) {
     this.focusItem(items[0]);
   }
+
+  this.handleItemChange('added', items);
 };
 
 /**
@@ -423,6 +426,8 @@ aria.Listbox.prototype.deleteItems = function () {
     }
   }).bind(this));
 
+  this.handleItemChange('removed', itemsToDelete);
+
   return itemsToDelete;
 };
 
@@ -454,6 +459,7 @@ aria.Listbox.prototype.moveUpItems = function () {
 
   if (previousItem) {
     this.listboxNode.insertBefore(currentItem, previousItem);
+    this.handleItemChange('moved_up', [ currentItem ]);
   }
 
   this.checkUpDownButtons();
@@ -476,6 +482,7 @@ aria.Listbox.prototype.moveDownItems = function () {
 
   if (nextItem) {
     this.listboxNode.insertBefore(nextItem, currentItem);
+    this.handleItemChange('moved_down', [ currentItem ]);
   }
 
   this.checkUpDownButtons();
@@ -528,3 +535,7 @@ aria.Listbox.prototype.setupMove = function (button, siblingList) {
   this.moveButton = button;
   button.addEventListener('click', this.moveItems.bind(this));
 };
+
+aria.Listbox.prototype.setHandleItemChange = function (handlerFn) {
+  this.handleItemChange = handlerFn;
+};
diff --git a/examples/listbox/listbox-rearrangeable.html b/examples/listbox/listbox-rearrangeable.html
index 5e8477dcc0..4832e2c909 100644
--- a/examples/listbox/listbox-rearrangeable.html
+++ b/examples/listbox/listbox-rearrangeable.html
@@ -71,6 +71,7 @@ <h3 id="ex1_label">Example 1: Single-Select Listbox</h3>
             </ul>
             <button id="ex1-add" class="move-left-btn" aria-keyshortcuts="Alt+ArrowLeft Enter" aria-disabled="true">Important</button>
           </div>
+          <div class="offscreen">Last change: <span aria-live="polite" id="ss_live_region"></span></div>
         </div>
       </div>
       <div role="separator" id="ex1_end_sep" aria-labelledby="ex1_end_sep ex1_label" aria-label="End of"></div>
@@ -136,6 +137,7 @@ <h3 id="ex2_label">Example 2: Multi-Select Listbox</h3>
             </ul>
             <button id="ex2-delete" class="move-left-btn" aria-keyshortcuts="Alt+ArrowLeft Delete" aria-disabled="true">Remove</button>
           </div>
+          <div class="offscreen">Last change: <span aria-live="polite" id="ms_live_region"></span></div>
         </div>
       </div>
       <div role="separator" id="ex2_end_sep" aria-labelledby="ex2_end_sep ex2_label" aria-label="End of"></div>