Commit changed files and submodule updates

ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md

@@ -69,7 +69,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
   <div>
 
-    <p>Page last updated: February 13, 2024</p>
+    <p>Page last updated:</p>
     <section>
       <h2>About These Reports</h2>
       <p>

ARIA/apg/patterns/combobox/examples/combobox-select-only.md

@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-select-only/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 7 April 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -114,8 +114,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </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">
 

content-assets/wai-aria-practices/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 {

content-assets/wai-aria-practices/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)) {

content-assets/wai-aria-practices/shared/js/app.js

@@ -4,7 +4,7 @@
 
 (function () {
   // Load syntax highlighting
-  hljs.initHighlightingOnLoad();
+  hljs.highlightAll();
 
   // Add usage warning to all examples
   // window.addEventListener('DOMContentLoaded', addExampleUsageWarning, false); // Line edited by pre-build script

content-assets/wai-aria-practices/shared/js/examples.js

@@ -129,7 +129,7 @@ aria.widget.SourceCode.prototype.createCode = function (
     var openTag = '';
     var nodeNameStr = node.nodeName.toLowerCase();
 
-    openTag += '<br/>' + indentation(indentLevel) + '&lt;' + nodeNameStr;
+    openTag += '\n' + indentation(indentLevel) + '&lt;' + nodeNameStr;
 
     var wrapAttributes = node.attributes.length > 2;
 
@@ -143,7 +143,7 @@ aria.widget.SourceCode.prototype.createCode = function (
         node.attributes[attrPos].nodeName + '="' + attributeValue + '"';
 
       if (wrapAttributes && attrPos !== node.attributes.length - 1) {
-        openTag += '<br/>' + indentation(indentLevel);
+        openTag += '\n' + indentation(indentLevel);
         openTag += '&nbsp;'.repeat(nodeNameStr.length + 2);
       }
     }
@@ -173,7 +173,7 @@ aria.widget.SourceCode.prototype.createCode = function (
             indentation(indentLevel)
           );
 
-          sourceCodeNode.innerHTML += '<br/>' + textNodeContent;
+          sourceCodeNode.innerHTML += '\n' + textNodeContent;
         }
         break;
 
@@ -186,7 +186,7 @@ aria.widget.SourceCode.prototype.createCode = function (
             indentation(indentLevel)
           );
 
-          sourceCodeNode.innerHTML += '<br/>' + commentNodeContent;
+          sourceCodeNode.innerHTML += '\n' + commentNodeContent;
         }
         break;
     }
@@ -198,7 +198,7 @@ aria.widget.SourceCode.prototype.createCode = function (
     var closeTag = '&lt;/' + node.nodeName.toLowerCase() + '&gt;';
 
     if (node.childNodes.length > 0) {
-      sourceCodeNode.innerHTML += '<br/>' + indentation(indentLevel);
+      sourceCodeNode.innerHTML += '\n' + indentation(indentLevel);
     }
 
     sourceCodeNode.innerHTML += closeTag;