connect wrapper around tables to the table captions (a11y)

HTTPArchive · Aug 20, 2023 · 7f8855d · 7f8855d
1 parent 4745cde
commit 7f8855d
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 4 deletions.
diff --git a/src/js/components/tableGeneral.js b/src/js/components/tableGeneral.js
@@ -14,7 +14,7 @@ class TableGeneral extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ['loaded', 'labels', 'columns', 'client', 'subcategory'];
+    return ['loaded', 'labels', 'columns', 'client', 'subcategory', 'id'];
   }
 
   attributeChangedCallback(property, oldValue, newValue) {
@@ -37,6 +37,12 @@ class TableGeneral extends HTMLElement {
   }
 
   setData() {
+    /* Set the caption id and connect the wrapper to it */
+    const tableWrapper = this.shadowRoot.querySelector('.table-ui-wrapper[role="region"]');
+    const tableCaption = this.shadowRoot.querySelector('table.table-ui caption');
+    tableCaption.setAttribute('id', this.id);
+    tableWrapper.setAttribute('aria-labelledby', this.id);
+
     if(this.columns) {
       const _columns = this.columns.replaceAll("*subcategory*", this.subcategory)
       const columns = _columns.split(",");

diff --git a/src/js/components/tableGeneralMulti.js b/src/js/components/tableGeneralMulti.js
@@ -42,7 +42,7 @@ class tableGenralMulti extends HTMLElement {
     const tableHead = this.shadowRoot.querySelector('table.table-ui thead tr');
     const tableBody = this.shadowRoot.querySelector('table.table-ui tbody');
     const tableCaption = this.shadowRoot.querySelector('table.table-ui caption');
-    const tableWrapper = this.shadowRoot.querySelector('table-ui-wrapper[role="region"]');
+    const tableWrapper = this.shadowRoot.querySelector('.table-ui-wrapper[role="region"]');
 
     /* Set the caption id and connect the wrapper to it */
     tableCaption.setAttribute('id', this.id);

diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html
@@ -80,7 +80,11 @@ <h3>All data</h3>
           data-scope="all-data"
           client="mobile"
           columns="date,client,origins"
+          id="origins-over-time"
         >
+          <span slot="table-caption">
+            Adoption over time
+          </span>
         </table-general>
       </div>
     </div>
@@ -106,7 +110,11 @@ <h3>All data</h3>
           client="mobile"
           subcategory="cwv"
           columns="date,client,origins_eligible_for_*subcategory*,origins_with_good_*subcategory*,pct_good_*subcategory*"
+          id="good-cwv-over-time"
         >
+          <span slot="table-caption">
+            Good CWVs over time.
+          </span>
         </table-general>
       </div>
     </div>
@@ -122,7 +130,11 @@ <h3>All data</h3>
           data-scope="all-data"
           client="mobile"
           columns="date,client,median_lighthouse_score_accessibility,median_lighthouse_score_performance,median_lighthouse_score_pwa,median_lighthouse_score_seo,median_lighthouse_score_best_practices"
+          id="median-lighthouse-over-time"
         >
+          <span slot="table-caption">
+            Median lighthouse scores over time.
+          </span>
         </table-general>
       </div>
     </div>
@@ -138,7 +150,11 @@ <h3>All data</h3>
           data-scope="all-data"
           client="mobile"
           columns="date,client,median_bytes_image,median_bytes_js,median_bytes_total"
+          id="weight-over-time"
         >
+          <span slot="table-caption">
+            The page weight over time.
+          </span>
         </table-general>
       </div>
     </div>

diff --git a/templates/techreport/templates/table_general.html b/templates/techreport/templates/table_general.html
@@ -6,7 +6,9 @@
   <!-- Table content and caption id set in JS -->
   <div class="table-ui-wrapper" role="region" aria-labelledby="" tabindex="0">
     <table class="table-ui">
-      <caption class="sr-only"></caption>
+      <caption class="sr-only">
+        <slot name="table-caption"></slot>
+      </caption>
       <thead>
         <tr>
         </tr>

diff --git a/templates/techreport/templates/table_overview.html b/templates/techreport/templates/table_overview.html
@@ -6,7 +6,7 @@
   <div class="table-ui-wrapper" role="region" aria-labelledby="cwv-overview-table" tabindex="0">
     <table class="table-ui">
       <caption class="sr-only" id="cwv-overview-table">
-        % Of tested origins that had good Core Web Vitals
+        <slot name="table-caption">Percentage of tested origins that had good Core Web Vitals</slot>
       </caption>
       <thead>
         <tr>