w3c · IsaDC · Apr 26, 2022 · Apr 26, 2022 · Apr 26, 2022 · Apr 26, 2022
diff --git a/tests/combobox-select-only/data/references.csv b/tests/combobox-select-only/data/references.csv
@@ -1,8 +1,8 @@
 refId,value
 author,James Scholes
 authorEmail,[email protected]
-title,Select Only Combobox Example
-reference,reference/combobox-select-only.html
+title,Select Only Combobox
+reference,reference/2022-4-26_144616/combobox-select-only.html
 example,https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html
 combobox,https://w3c.github.io/aria-practices/#combobox
 listbox,https://w3c.github.io/aria/#listbox

diff --git a/...-only/reference/combobox-select-only.html → ...022-4-26_144616/combobox-select-only.html b/...-only/reference/combobox-select-only.html → ...022-4-26_144616/combobox-select-only.html
@@ -1,51 +1,51 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<title>Select-Only Combobox Example</title>
-
-<!--  js and css for this example. -->
-<link href="css/select-only.css" rel="stylesheet">
-<script src="js/select-only.js"  type="text/javascript"></script>
-</head>
-<body>
-  <main>
-    <h1>Select-Only Combobox Example</h1>
-    <p>
-      The following example implementation of the <a href="https://w3c.github.io/aria-practices/#combobox">ARIA design pattern for combobox</a>
-      demonstrates a single-select combobox widget that is functionally similar to an HTML <code>select</code> element.
-      Unlike the editable combobox examples, this select-only combobox is not made with an <code>&lt;input&gt;</code> element, and it does not accept freeform user input.
-      However, like an HTML <code>&lt;select&gt;</code>, users can type characters to select matching options.
-    </p>
-    <section>
-      <div class="example-header">
-        <h2 id="ex_label">Example</h2>
-      </div>
-      <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
-      <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-      <div id="ex1">
-        <label id="combo1-label" class="combo-label">Favorite Fruit</label>
-        <div class="combo js-select">
-            <div
-                aria-controls="listbox1"
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="combo1-label"
-                id="combo1"
-                class="combo-input"
-                role="combobox"
-                tabindex="0"
-                >
-            </div>
-            <div class="combo-menu" role="listbox" id="listbox1" aria-labelledby="combo1-label" tabindex="-1">
-                <!-- options are inserted here -->
-                <!-- e.g. <div role="option" id="op1">option text</div>  -->
-            </div>
-        </div>
-      </div>
-      <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
-      <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
-    </section>
-  </main>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Select-Only Combobox Example</title>
+
+<!--  js and css for this example. -->
+<link href="css/select-only.css" rel="stylesheet">
+<script src="js/select-only.js"  type="text/javascript"></script>
+</head>
+<body>
+  <main>
+    <h1>Select-Only Combobox Example</h1>
+    <p>
+      The following example implementation of the <a href="https://w3c.github.io/aria-practices/#combobox">ARIA design pattern for combobox</a>
+      demonstrates a single-select combobox widget that is functionally similar to an HTML <code>select</code> element.
+      Unlike the editable combobox examples, this select-only combobox is not made with an <code>&lt;input&gt;</code> element, and it does not accept freeform user input.
+      However, like an HTML <code>&lt;select&gt;</code>, users can type characters to select matching options.
+    </p>
+    <section>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+      </div>
+      <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+      <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
+      <div id="ex1">
+        <label id="combo1-label" class="combo-label">Favorite Fruit</label>
+        <div class="combo js-select">
+            <div
+                aria-controls="listbox1"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="combo1-label"
+                id="combo1"
+                class="combo-input"
+                role="combobox"
+                tabindex="0"
+                >
+            </div>
+            <div class="combo-menu" role="listbox" id="listbox1" aria-labelledby="combo1-label" tabindex="-1">
+                <!-- options are inserted here -->
+                <!-- e.g. <div role="option" id="op1">option text</div>  -->
+            </div>
+        </div>
+      </div>
+      <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
+      <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+    </section>
+  </main>
+</body>
+</html>
diff --git a/...x-select-only.moveFocusAfterCombobox.html → ...x-select-only.moveFocusAfterCombobox.html b/...x-select-only.moveFocusAfterCombobox.html → ...x-select-only.moveFocusAfterCombobox.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8" />
+<meta charset="utf-8">
 <title>Select-Only Combobox Example</title>
 
 <!--  js and css for this example. -->

diff --git a/...-select-only.moveFocusBeforeCombobox.html → ...-select-only.moveFocusBeforeCombobox.html b/...-select-only.moveFocusBeforeCombobox.html → ...-select-only.moveFocusBeforeCombobox.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8" />
+<meta charset="utf-8">
 <title>Select-Only Combobox Example</title>
 
 <!--  js and css for this example. -->

diff --git a/...obox-select-only.moveFocusToCombobox.html → ...obox-select-only.moveFocusToCombobox.html b/...obox-select-only.moveFocusToCombobox.html → ...obox-select-only.moveFocusToCombobox.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8" />
+<meta charset="utf-8">
 <title>Select-Only Combobox Example</title>
 
 <!--  js and css for this example. -->

diff --git a/...nce/combobox-select-only.openListbox.html → ...616/combobox-select-only.openListbox.html b/...nce/combobox-select-only.openListbox.html → ...616/combobox-select-only.openListbox.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8" />
+<meta charset="utf-8">
 <title>Select-Only Combobox Example</title>
 
 <!--  js and css for this example. -->

diff --git a/...bobox-select-only.openListboxToApple.html → ...bobox-select-only.openListboxToApple.html b/...bobox-select-only.openListboxToApple.html → ...bobox-select-only.openListboxToApple.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8" />
+<meta charset="utf-8">
 <title>Select-Only Combobox Example</title>
 
 <!--  js and css for this example. -->

diff --git a/...bobox-select-only.openListboxToGuava.html → ...bobox-select-only.openListboxToGuava.html b/...bobox-select-only.openListboxToGuava.html → ...bobox-select-only.openListboxToGuava.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8" />
+<meta charset="utf-8">
 <title>Select-Only Combobox Example</title>
 
 <!--  js and css for this example. -->

diff --git a/...select-only.openListboxToHuckleberry.html → ...select-only.openListboxToHuckleberry.html b/...select-only.openListboxToHuckleberry.html → ...select-only.openListboxToHuckleberry.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8" />
+<meta charset="utf-8">
 <title>Select-Only Combobox Example</title>
 
 <!--  js and css for this example. -->

diff --git a/...select-only/reference/css/select-only.css → ...ence/2022-4-26_144616/css/select-only.css b/...select-only/reference/css/select-only.css → ...ence/2022-4-26_144616/css/select-only.css
@@ -12,8 +12,8 @@
 }
 
 .combo::after {
-  border-bottom: 2px solid rgba(0, 0, 0, 0.75);
-  border-right: 2px solid rgba(0, 0, 0, 0.75);
+  border-bottom: 2px solid rgb(0 0 0 / 75%);
+  border-right: 2px solid rgb(0 0 0 / 75%);
   content: "";
   display: block;
   height: 12px;
@@ -27,7 +27,7 @@
 
 .combo-input {
   background-color: #f5f5f5;
-  border: 2px solid rgba(0, 0, 0, 0.75);
+  border: 2px solid rgb(0 0 0 / 75%);
   border-radius: 4px;
   display: block;
   font-size: 1em;
@@ -56,7 +56,7 @@
 
 .combo-menu {
   background-color: #f5f5f5;
-  border: 1px solid rgba(0, 0, 0, 0.75);
+  border: 1px solid rgb(0 0 0 / 75%);
   border-radius: 0 0 4px 4px;
   display: none;
   max-height: 300px;
@@ -77,7 +77,7 @@
 }
 
 .combo-option:hover {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgb(0 0 0 / 10%);
 }
 
 .combo-option.option-current {

diff --git a/...x-select-only/reference/js/select-only.js → ...erence/2022-4-26_144616/js/select-only.js b/...x-select-only/reference/js/select-only.js → ...erence/2022-4-26_144616/js/select-only.js
@@ -128,6 +128,20 @@ function getUpdatedIndex(currentIndex, maxIndex, action) {
   }
 }
 
+// check if element is visible in browser view port
+function isElementInView(element) {
+  var bounding = element.getBoundingClientRect();
+
+  return (
+    bounding.top >= 0 &&
+    bounding.left >= 0 &&
+    bounding.bottom <=
+      (window.innerHeight || document.documentElement.clientHeight) &&
+    bounding.right <=
+      (window.innerWidth || document.documentElement.clientWidth)
+  );
+}
+
 // check if an element is currently scrollable
 function isScrollable(element) {
   return element && element.clientHeight < element.scrollHeight;
@@ -318,6 +332,12 @@ Select.prototype.onOptionChange = function (index) {
   if (isScrollable(this.listboxEl)) {
     maintainScrollVisibility(options[index], this.listboxEl);
   }
+
+  // ensure the new option is visible on screen
+  // ensure the new option is in view
+  if (!isElementInView(options[index])) {
+    options[index].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }
 };
 
 Select.prototype.onOptionClick = function (index) {
@@ -364,6 +384,10 @@ Select.prototype.updateMenuState = function (open, callFocus = true) {
   const activeID = open ? `${this.idBase}-${this.activeIndex}` : '';
   this.comboEl.setAttribute('aria-activedescendant', activeID);
 
+  if (activeID === '' && !isElementInView(this.comboEl)) {
+    this.comboEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }
+
   // move focus back to the combobox, if needed
   callFocus && this.comboEl.focus();
 };
@@ -385,6 +409,9 @@ window.addEventListener('load', function () {
     'Guava',
     'Huckleberry',
   ];
-  const selectEl = document.querySelector('.js-select');
-  document.defaultView.selectController = new Select(selectEl, options);
+  const selectEls = document.querySelectorAll('.js-select');
+
+  selectEls.forEach((el) => {
+    new Select(el, options);
+  });
 });