diff --git a/tests/combobox-select-only/data/references.csv b/tests/combobox-select-only/data/references.csv index f06df4bea..972d77191 100644 --- 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,james@pac.bz -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/tests/combobox-select-only/reference/combobox-select-only.html b/tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.html similarity index 96% rename from tests/combobox-select-only/reference/combobox-select-only.html rename to tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.html index c67aa4049..7d08c8cb7 100644 --- a/tests/combobox-select-only/reference/combobox-select-only.html +++ b/tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.html @@ -1,51 +1,51 @@ - - - - -Select-Only Combobox Example - - - - - - -
-

Select-Only Combobox Example

-

- The following example implementation of the ARIA design pattern for combobox - demonstrates a single-select combobox widget that is functionally similar to an HTML select element. - Unlike the editable combobox examples, this select-only combobox is not made with an <input> element, and it does not accept freeform user input. - However, like an HTML <select>, users can type characters to select matching options. -

-
-
-

Example

-
- - Navigate forwards from here -
- -
- -
- - -
-
-
- Navigate backwards from here - -
-
- - + + + + +Select-Only Combobox Example + + + + + + +
+

Select-Only Combobox Example

+

+ The following example implementation of the ARIA design pattern for combobox + demonstrates a single-select combobox widget that is functionally similar to an HTML select element. + Unlike the editable combobox examples, this select-only combobox is not made with an <input> element, and it does not accept freeform user input. + However, like an HTML <select>, users can type characters to select matching options. +

+
+
+

Example

+
+ + Navigate forwards from here +
+ +
+ +
+ + +
+
+
+ Navigate backwards from here + +
+
+ + diff --git a/tests/combobox-select-only/reference/combobox-select-only.moveFocusAfterCombobox.html b/tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.moveFocusAfterCombobox.html similarity index 99% rename from tests/combobox-select-only/reference/combobox-select-only.moveFocusAfterCombobox.html rename to tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.moveFocusAfterCombobox.html index 86466a6c2..95ef8f07a 100644 --- a/tests/combobox-select-only/reference/combobox-select-only.moveFocusAfterCombobox.html +++ b/tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.moveFocusAfterCombobox.html @@ -1,7 +1,7 @@ - + Select-Only Combobox Example diff --git a/tests/combobox-select-only/reference/combobox-select-only.moveFocusBeforeCombobox.html b/tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.moveFocusBeforeCombobox.html similarity index 99% rename from tests/combobox-select-only/reference/combobox-select-only.moveFocusBeforeCombobox.html rename to tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.moveFocusBeforeCombobox.html index 18a3b6110..a35043fda 100644 --- a/tests/combobox-select-only/reference/combobox-select-only.moveFocusBeforeCombobox.html +++ b/tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.moveFocusBeforeCombobox.html @@ -1,7 +1,7 @@ - + Select-Only Combobox Example diff --git a/tests/combobox-select-only/reference/combobox-select-only.moveFocusToCombobox.html b/tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.moveFocusToCombobox.html similarity index 99% rename from tests/combobox-select-only/reference/combobox-select-only.moveFocusToCombobox.html rename to tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.moveFocusToCombobox.html index 433d3c6e9..23fce7c1d 100644 --- a/tests/combobox-select-only/reference/combobox-select-only.moveFocusToCombobox.html +++ b/tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.moveFocusToCombobox.html @@ -1,7 +1,7 @@ - + Select-Only Combobox Example diff --git a/tests/combobox-select-only/reference/combobox-select-only.openListbox.html b/tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.openListbox.html similarity index 99% rename from tests/combobox-select-only/reference/combobox-select-only.openListbox.html rename to tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.openListbox.html index 1533a43fc..8b89994be 100644 --- a/tests/combobox-select-only/reference/combobox-select-only.openListbox.html +++ b/tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.openListbox.html @@ -1,7 +1,7 @@ - + Select-Only Combobox Example diff --git a/tests/combobox-select-only/reference/combobox-select-only.openListboxToApple.html b/tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.openListboxToApple.html similarity index 99% rename from tests/combobox-select-only/reference/combobox-select-only.openListboxToApple.html rename to tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.openListboxToApple.html index 0198e9d23..eef1d6c63 100644 --- a/tests/combobox-select-only/reference/combobox-select-only.openListboxToApple.html +++ b/tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.openListboxToApple.html @@ -1,7 +1,7 @@ - + Select-Only Combobox Example diff --git a/tests/combobox-select-only/reference/combobox-select-only.openListboxToGuava.html b/tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.openListboxToGuava.html similarity index 99% rename from tests/combobox-select-only/reference/combobox-select-only.openListboxToGuava.html rename to tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.openListboxToGuava.html index 0505d5804..303e7bc9e 100644 --- a/tests/combobox-select-only/reference/combobox-select-only.openListboxToGuava.html +++ b/tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.openListboxToGuava.html @@ -1,7 +1,7 @@ - + Select-Only Combobox Example diff --git a/tests/combobox-select-only/reference/combobox-select-only.openListboxToHuckleberry.html b/tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.openListboxToHuckleberry.html similarity index 99% rename from tests/combobox-select-only/reference/combobox-select-only.openListboxToHuckleberry.html rename to tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.openListboxToHuckleberry.html index 09661b898..07353c262 100644 --- a/tests/combobox-select-only/reference/combobox-select-only.openListboxToHuckleberry.html +++ b/tests/combobox-select-only/reference/2022-4-26_144616/combobox-select-only.openListboxToHuckleberry.html @@ -1,7 +1,7 @@ - + Select-Only Combobox Example diff --git a/tests/combobox-select-only/reference/css/select-only.css b/tests/combobox-select-only/reference/2022-4-26_144616/css/select-only.css similarity index 88% rename from tests/combobox-select-only/reference/css/select-only.css rename to tests/combobox-select-only/reference/2022-4-26_144616/css/select-only.css index 1d8beb3a7..2f67d370e 100644 --- a/tests/combobox-select-only/reference/css/select-only.css +++ b/tests/combobox-select-only/reference/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/tests/combobox-select-only/reference/js/select-only.js b/tests/combobox-select-only/reference/2022-4-26_144616/js/select-only.js similarity index 92% rename from tests/combobox-select-only/reference/js/select-only.js rename to tests/combobox-select-only/reference/2022-4-26_144616/js/select-only.js index 2398e1b9d..fdf5874a8 100644 --- a/tests/combobox-select-only/reference/js/select-only.js +++ b/tests/combobox-select-only/reference/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); + }); });