Merge remote-tracking branch 'origin/main' into update/issue-2954-radio

w3c · Apr 7, 2024 · 1928a11 · 1928a11
2 parents fa356d1 + beef80e
commit 1928a11
Show file tree

Hide file tree

Showing 11 changed files with 357 additions and 30 deletions.
diff --git a/.github/workflows/examples.yml b/.github/workflows/examples.yml
@@ -10,15 +10,15 @@ on:
       - "content/**/examples/**"
       - "scripts/reference-tables.*"
       - "scripts/coverage-report.*"
-      - "coverage/**"
+      - "content/about/coverage-and-quality/**"
   pull_request:
     paths:
       - "package*.json"
       - ".github/workflows/examples.yml"
       - "content/**/examples/**"
       - "scripts/reference-tables.*"
       - "scripts/coverage-report.*"
-      - "coverage/**"
+      - "content/about/coverage-and-quality/**"
 
 jobs:
   examples:

diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html
@@ -17,7 +17,7 @@
 <body>
   <main>
     <h1>Coverage and Quality Reports</h1>
-    <p>Page last updated: February 13, 2024</p>
+    <p>Page last updated:</p>
     <section>
       <h2>About These Reports</h2>
       <p>

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)) {

diff --git a/content/shared/js/app.js b/content/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);

diff --git a/content/shared/js/examples.js b/content/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;