Rearrangeable Listbox Examples: Add live regions that announce comple…

…ted 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

@@ -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;
+}

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;
+    }
+  });
 });

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;
+};

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>