Listbox Examples: Update scrolling of listbox item with focus into vi…

…ew when page is magnified (pull #2622) In the listbox examples, fixes #2545 with the following changes: * Updated code to scroll the element referenced by @aria-activedescendant@ into view when view is magnified * Updated accessibility features documentation in support of this change. While fixing this bug, the following additional changes were also made to improve code quality and implement the latest APG code guide practices: * Use `event.key` instead of `event.keyCode` for identifying keyboard commands. * Use `class` constructors instead of `prototype`. * Changed `mousedown` event to `pointerdown` event to support mobile devices. * Provide high contrast focus ring around option referenced by `aria-activedescendant`. * Fix bugs in keyboard support for the toolbar * Update documentation to improve consistency with current editorial practices --------- Co-authored-by: Matt King <a11yThinker@gmail.com> Co-authored-by: Mike Pennisi <mike@mikepennisi.com> Co-authored-by: Aleena <55119766+aleenaloves@users.noreply.github.com> Co-authored-by: Howard Edwards <howarde.edwards@gmail.com>
w3c · Sep 19, 2023 · eed124a · eed124a
1 parent 69e151a
commit eed124a
Show file tree

Hide file tree

Showing 14 changed files with 1,304 additions and 942 deletions.
diff --git a/content/index/index.html b/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>

diff --git a/content/patterns/listbox/examples/css/listbox.css b/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.checkmark::after {
+  content: " →";
+}
+
+.move-left-btn span.checkmark::before {
+  content: "← ";
+}
+
+[role="option"][aria-selected="true"] span.checkmark::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;

diff --git a/content/patterns/listbox/examples/js/listbox-collapsible.js b/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;
+  }
+}
diff --git a/content/patterns/listbox/examples/js/listbox-rearrangeable.js b/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
  *

diff --git a/content/patterns/listbox/examples/js/listbox-scrollable.js b/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
  *