Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified

content/index/index.html

@@ -620,6 +620,9 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td>
               <ul>
                 <li><a href="../patterns/button/examples/button_idl.html">Button  (IDL Version)</a></li>
+                <li><a href="../patterns/listbox/examples/listbox-grouped.html">Listbox  with Grouped Options</a></li>
+                <li><a href="../patterns/listbox/examples/listbox-rearrangeable.html">Listboxes with Rearrangeable Options</a></li>
+                <li><a href="../patterns/listbox/examples/listbox-scrollable.html">Scrollable Listbox</a></li>
                 <li><a href="../patterns/menubar/examples/menubar-editor.html">Editor Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider-multithumb/examples/slider-multithumb.html">Horizontal Multi-Thumb Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../patterns/slider/examples/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>

content/patterns/listbox/examples/css/listbox.css

@@ -44,15 +44,30 @@
 [role="option"] {
   position: relative;
   display: block;
-  padding: 0 1em 0 1.5em;
+  margin: 2px;
+  padding: 2px 1em 2px 1.5em;
   line-height: 1.8em;
+  cursor: pointer;
 }
 
-[role="option"].focused {
+[role="listbox"]:focus [role="option"].focused {
   background: #bde4ff;
 }
 
-[role="option"][aria-selected="true"]::before {
+[role="listbox"]:focus [role="option"].focused,
+[role="option"]:hover {
+  outline: 2px solid currentcolor;
+}
+
+.move-right-btn span.icon::after {
+  content: " →";
+}
+
+.move-left-btn span.icon::before {
+  content: "← ";
+}
+
+[role="option"][aria-selected="true"] span.icon::before {
   position: absolute;
   left: 0.5em;
   content: "✓";
@@ -120,14 +135,6 @@ button[aria-disabled="true"] {
   opacity: 0.5;
 }
 
-.move-right-btn::after {
-  content: " →";
-}
-
-.move-left-btn::before {
-  content: "← ";
-}
-
 .annotate {
   color: #366ed4;
   font-style: italic;

content/patterns/listbox/examples/js/listbox-collapsible.js

@@ -1,4 +1,18 @@
+/*
+ *   This content is licensed according to the W3C Software License at
+ *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ */
+
 'use strict';
+
+/**
+ * @namespace aria
+ * @description
+ * The aria namespace is used to support sharing class definitions between example files
+ * without causing eslint errors for undefined classes
+ */
+var aria = aria || {};
+
 /**
  * ARIA Collapsible Dropdown Listbox Example
  *
@@ -7,70 +21,66 @@
  */
 
 window.addEventListener('load', function () {
-  var button = document.getElementById('exp_button');
-  var exListbox = new aria.Listbox(document.getElementById('exp_elem_list'));
-  new aria.ListboxButton(button, exListbox);
+  const button = document.getElementById('exp_button');
+  const exListbox = new aria.Listbox(document.getElementById('exp_elem_list'));
+  new ListboxButton(button, exListbox);
 });
 
-var aria = aria || {};
-
-aria.ListboxButton = function (button, listbox) {
-  this.button = button;
-  this.listbox = listbox;
-  this.registerEvents();
-};
-
-aria.ListboxButton.prototype.registerEvents = function () {
-  this.button.addEventListener('click', this.showListbox.bind(this));
-  this.button.addEventListener('keyup', this.checkShow.bind(this));
-  this.listbox.listboxNode.addEventListener(
-    'blur',
-    this.hideListbox.bind(this)
-  );
-  this.listbox.listboxNode.addEventListener(
-    'keydown',
-    this.checkHide.bind(this)
-  );
-  this.listbox.setHandleFocusChange(this.onFocusChange.bind(this));
-};
-
-aria.ListboxButton.prototype.checkShow = function (evt) {
-  var key = evt.which || evt.keyCode;
+class ListboxButton {
+  constructor(button, listbox) {
+    this.button = button;
+    this.listbox = listbox;
+    this.registerEvents();
+  }
 
-  switch (key) {
-    case aria.KeyCode.UP:
-    case aria.KeyCode.DOWN:
-      evt.preventDefault();
-      this.showListbox();
-      this.listbox.checkKeyPress(evt);
-      break;
+  registerEvents() {
+    this.button.addEventListener('click', this.showListbox.bind(this));
+    this.button.addEventListener('keyup', this.checkShow.bind(this));
+    this.listbox.listboxNode.addEventListener(
+      'blur',
+      this.hideListbox.bind(this)
+    );
+    this.listbox.listboxNode.addEventListener(
+      'keydown',
+      this.checkHide.bind(this)
+    );
+    this.listbox.setHandleFocusChange(this.onFocusChange.bind(this));
   }
-};
 
-aria.ListboxButton.prototype.checkHide = function (evt) {
-  var key = evt.which || evt.keyCode;
+  checkShow(evt) {
+    switch (evt.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+        evt.preventDefault();
+        this.showListbox();
+        this.listbox.checkKeyPress(evt);
+        break;
+    }
+  }
 
-  switch (key) {
-    case aria.KeyCode.RETURN:
-    case aria.KeyCode.ESC:
-      evt.preventDefault();
-      this.hideListbox();
-      this.button.focus();
-      break;
+  checkHide(evt) {
+    switch (evt.key) {
+      case 'Enter':
+      case 'Escape':
+        evt.preventDefault();
+        this.hideListbox();
+        this.button.focus();
+        break;
+    }
   }
-};
 
-aria.ListboxButton.prototype.showListbox = function () {
-  aria.Utils.removeClass(this.listbox.listboxNode, 'hidden');
-  this.button.setAttribute('aria-expanded', 'true');
-  this.listbox.listboxNode.focus();
-};
+  showListbox() {
+    this.listbox.listboxNode.classList.remove('hidden');
+    this.button.setAttribute('aria-expanded', 'true');
+    this.listbox.listboxNode.focus();
+  }
 
-aria.ListboxButton.prototype.hideListbox = function () {
-  aria.Utils.addClass(this.listbox.listboxNode, 'hidden');
-  this.button.removeAttribute('aria-expanded');
-};
+  hideListbox() {
+    this.listbox.listboxNode.classList.add('hidden');
+    this.button.removeAttribute('aria-expanded');
+  }
 
-aria.ListboxButton.prototype.onFocusChange = function (focusedItem) {
-  this.button.innerText = focusedItem.innerText;
-};
+  onFocusChange(focusedItem) {
+    this.button.innerText = focusedItem.innerText;
+  }
+}

content/patterns/listbox/examples/js/listbox-rearrangeable.js

@@ -3,10 +3,16 @@
  *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
  */
 
-/* global aria */
-
 'use strict';
 
+/**
+ * @namespace aria
+ * @description
+ * The aria namespace is used to support sharing class definitions between example files
+ * without causing eslint errors for undefined classes
+ */
+var aria = aria || {};
+
 /**
  * ARIA Listbox Examples
  *

content/patterns/listbox/examples/js/listbox-scrollable.js

@@ -3,10 +3,16 @@
  *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
  */
 
-/* global aria */
-
 'use strict';
 
+/**
+ * @namespace aria
+ * @description
+ * The aria namespace is used to support sharing class definitions between example files
+ * without causing eslint errors for undefined classes
+ */
+var aria = aria || {};
+
 /**
  * ARIA Scrollable Listbox Example
  *