Select-Only Combobox Example: Add click handler to focus combobox whe…

…n label is clicked (pull #2889) Resolves #2859 so clicking the label focuses the combobox.
w3c · Apr 7, 2024 · beef80e · beef80e
1 parent 994d35f
commit beef80e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/content/patterns/combobox/examples/combobox-select-only.html b/content/patterns/combobox/examples/combobox-select-only.html
@@ -51,8 +51,8 @@ <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>
         <div id="ex1">
-          <label id="combo1-label" class="combo-label">Favorite Fruit</label>
           <div class="combo js-select">
+            <div id="combo1-label" class="combo-label">Favorite Fruit</div>
             <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 -->

diff --git a/content/patterns/combobox/examples/css/select-only.css b/content/patterns/combobox/examples/css/select-only.css
@@ -20,7 +20,7 @@
   pointer-events: none;
   position: absolute;
   right: 16px;
-  top: 50%;
+  top: 65%;
   transform: translate(0, -65%) rotate(45deg);
   width: 12px;
 }
@@ -49,9 +49,9 @@
 
 .combo-label {
   display: block;
-  font-size: 20px;
   font-weight: 100;
   margin-bottom: 0.25em;
+  font-size: 1.2em;
 }
 
 .combo-menu {

diff --git a/content/patterns/combobox/examples/js/select-only.js b/content/patterns/combobox/examples/js/select-only.js
@@ -170,6 +170,7 @@ function maintainScrollVisibility(activeElement, scrollParent) {
 const Select = function (el, options = []) {
   // element refs
   this.el = el;
+  this.labelEl = el.querySelector('.combo-label');
   this.comboEl = el.querySelector('[role=combobox]');
   this.listboxEl = el.querySelector('[role=listbox]');
 
@@ -194,6 +195,7 @@ Select.prototype.init = function () {
   this.comboEl.innerHTML = this.options[0];
 
   // add event listeners
+  this.labelEl.addEventListener('click', this.onLabelClick.bind(this));
   this.comboEl.addEventListener('blur', this.onComboBlur.bind(this));
   this.listboxEl.addEventListener('focusout', this.onComboBlur.bind(this));
   this.comboEl.addEventListener('click', this.onComboClick.bind(this));
@@ -240,6 +242,10 @@ Select.prototype.getSearchString = function (char) {
   return this.searchString;
 };
 
+Select.prototype.onLabelClick = function () {
+  this.comboEl.focus();
+};
+
 Select.prototype.onComboBlur = function (event) {
   // do nothing if relatedTarget is contained within listboxEl
   if (this.listboxEl.contains(event.relatedTarget)) {