From 9b021b29b98474e8ef68aa5992d4c06eacb72e2c Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Thu, 17 Sep 2020 10:43:01 +0200
Subject: [PATCH] Fix a11y bugs in query stats table: too many columns, header
 info not passed to column contents (#209)

---
 src/Explorer/Tabs/QueryTab.html | 33 +++++++++++++++---------------
 src/Explorer/Tabs/QueryTab.less | 36 ++++++++++++++++-----------------
 2 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/src/Explorer/Tabs/QueryTab.html b/src/Explorer/Tabs/QueryTab.html
index 4bc8d48b0..2f0483d03 100644
--- a/src/Explorer/Tabs/QueryTab.html
+++ b/src/Explorer/Tabs/QueryTab.html
@@ -111,17 +111,18 @@
           data-bind="visible: isMetricsToggled() && allResultsMetadata().length > 0 && errors().length === 0"
         >
           <table class="queryMetricsSummary">
+            <caption>
+              Query Statistics
+            </caption>
             <thead class="queryMetricsSummaryHead">
               <tr class="queryMetricsSummaryHeader queryMetricsSummaryTuple">
-                <th title="METRIC">METRIC</th>
-                <th></th>
-                <th title="VALUE">VALUE</th>
+                <th title="METRIC" scope="col">METRIC</th>
+                <th title="VALUE" scope="col">VALUE</th>
               </tr>
             </thead>
             <tbody class="queryMetricsSummaryBody" data-bind="with: aggregatedQueryMetrics">
               <tr class="queryMetricsSummaryTuple">
                 <td title="Request Charge">Request Charge</td>
-                <td></td>
                 <td>
                   <span
                     data-bind="text: $parent.requestChargeDisplayText, attr: { title: $parent.requestChargeDisplayText }"
@@ -130,7 +131,6 @@
               </tr>
               <tr class="queryMetricsSummaryTuple">
                 <td title="Showing Results">Showing Results</td>
-                <td></td>
                 <td>
                   <span
                     data-bind="text: $parent.showingDocumentsDisplayText, attr: { title: $parent.showingDocumentsDisplayText }"
@@ -138,8 +138,8 @@
                 </td>
               </tr>
               <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
-                <td><span title="Retrieved document count">Retrieved document count</span></td>
                 <td>
+                  <span title="Retrieved document count">Retrieved document count</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
                     <img class="infoImg" src="/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Total number of retrieved documents</span>
@@ -148,8 +148,8 @@
                 <td><span data-bind="text: retrievedDocumentCount, attr: { title: retrievedDocumentCount }"></span></td>
               </tr>
               <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
-                <td><span title="Retrieved document size">Retrieved document size</span></td>
                 <td>
+                  <span title="Retrieved document size">Retrieved document size</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
                     <img class="infoImg" src="/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Total size of retrieved documents in bytes</span>
@@ -161,8 +161,8 @@
                 </td>
               </tr>
               <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
-                <td><span title="Output document count">Output document count</span></td>
                 <td>
+                  <span title="Output document count">Output document count</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
                     <img class="infoImg" src="/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Number of output documents</span>
@@ -171,8 +171,8 @@
                 <td><span data-bind="text: outputDocumentCount, attr: { title: outputDocumentCount }"></span></td>
               </tr>
               <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
-                <td><span title="Output document size">Output document size</span></td>
                 <td>
+                  <span title="Output document size">Output document size</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
                     <img class="infoImg" src="/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Total size of output documents in bytes</span>
@@ -184,8 +184,8 @@
                 </td>
               </tr>
               <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
-                <td><span title="Index hit document count">Index hit document count</span></td>
                 <td>
+                  <span title="Index hit document count">Index hit document count</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
                     <img class="infoImg" src="/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Total number of documents matched by the filter</span>
@@ -194,8 +194,8 @@
                 <td><span data-bind="text: indexHitDocumentCount, attr: { title: indexHitDocumentCount }"></span></td>
               </tr>
               <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
-                <td><span title="Index lookup time">Index lookup time</span></td>
                 <td>
+                  <span title="Index lookup time">Index lookup time</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
                     <img class="infoImg" src="/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Time spent in physical index layer</span>
@@ -206,8 +206,8 @@
                 </td>
               </tr>
               <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
-                <td><span title="Document load time">Document load time</span></td>
                 <td>
+                  <span title="Document load time">Document load time</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
                     <img class="infoImg" src="/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Time spent in loading documents</span>
@@ -218,8 +218,8 @@
                 </td>
               </tr>
               <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
-                <td><span title="Query engine execution time">Query engine execution time</span></td>
                 <td>
+                  <span title="Query engine execution time">Query engine execution time</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
                     <img class="infoImg" src="/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText queryEngineExeTimeInfo"
@@ -236,8 +236,8 @@
                 </td>
               </tr>
               <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
-                <td><span title="System function execution time">System function execution time</span></td>
                 <td>
+                  <span title="System function execution time">System function execution time</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
                     <img class="infoImg" src="/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Total time spent executing system (built-in) functions</span>
@@ -251,8 +251,8 @@
                 </td>
               </tr>
               <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
-                <td><span title="User defined function execution time">User defined function execution time</span></td>
                 <td>
+                  <span title="User defined function execution time">User defined function execution time</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
                     <img class="infoImg" src="/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Total time spent executing user-defined functions</span>
@@ -266,8 +266,8 @@
                 </td>
               </tr>
               <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
-                <td><span title="Document write time">Document write time</span></td>
                 <td>
+                  <span title="Document write time">Document write time</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
                     <img class="infoImg" src="/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Time spent to write query result set to response buffer</span>
@@ -279,7 +279,6 @@
               </tr>
               <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.roundTrips() != null">
                 <td title="Round Trips">Round Trips</td>
-                <td></td>
                 <td><span data-bind="text: $parent.roundTrips, attr: { title: $parent.roundTrips }"></span></td>
               </tr>
               <!-- TODO: Report activity id for mongo queries -->
diff --git a/src/Explorer/Tabs/QueryTab.less b/src/Explorer/Tabs/QueryTab.less
index 6edb1ba76..f672ef530 100644
--- a/src/Explorer/Tabs/QueryTab.less
+++ b/src/Explorer/Tabs/QueryTab.less
@@ -93,7 +93,7 @@
                 margin-left: @MediumSpace;
                 .flex-display();
                 .flex-direction();
-    
+
 
                 .togglesWithMetadata {
                     margin-top: @MediumSpace;
@@ -102,23 +102,23 @@
                         height: @ToggleHeight;
                         width: @ToggleWidth;
                         margin-left: @MediumSpace;
-            
+
                         &:focus {
                             .focus();
                         }
-            
+
                         .tab {
                             margin-right: @MediumSpace;
                         }
-            
+
                         .toggleSwitch {
                             .toggleSwitch();
                         }
-            
+
                         .selectedToggle {
                             .selectedToggle();
                         }
-            
+
                         .unselectedToggle {
                             .unselectedToggle();
                         }
@@ -136,7 +136,7 @@
                     .queryResultNextEnable {
                         color: @AccentMediumHigh;
                         font-size: @mediumFontSize;
-                        cursor: pointer; 
+                        cursor: pointer;
 
                         img {
                             height: @ImgHeight;
@@ -153,7 +153,7 @@
                         img {
                             height: @ImgHeight;
                             width: @ImgWidth;
-                            margin-left: @SmallSpace; 
+                            margin-left: @SmallSpace;
                         }
                     }
                 }
@@ -181,7 +181,7 @@
                     cursor: pointer;
                     padding: @SmallSpace;
                 }
-            
+
                 .queryMetricsSummaryContainer {
                     .flex-display();
                     .flex-direction();
@@ -195,10 +195,14 @@
                         overflow-y: auto;
                         overflow-x: hidden;
 
+                        caption {
+                            width: 100px;
+                        }
+
                         .queryMetricsSummaryHead {
                             .flex-display();
                         }
-                
+
                         .queryMetricsSummaryHeader.queryMetricsSummaryTuple {
                             font-size: 10px;
                         }
@@ -207,7 +211,7 @@
                             .flex-display();
                             .flex-direction();
                         }
-                
+
                         .queryMetricsSummaryTuple {
                             border-bottom: 1px solid @BaseMedium;
                             height: 32px;
@@ -221,18 +225,14 @@
                                     text-overflow: ellipsis;
                                     overflow: hidden;
                                     white-space: nowrap;
-                                    flex: 0 1 auto;
-                                }
-
-                                &:nth-child(2) {
-                                    flex: 1 1 auto;
+                                    flex: 0 0 50%;
                                 }
 
                                 &:nth-child(3) {
                                     text-overflow: ellipsis;
                                     overflow: hidden;
                                     white-space: nowrap;
-                                    flex: 0 0 50%; 
+                                    flex: 0 0 50%;
                                 }
 
                                 .queryMetricInfoTooltip {
@@ -264,7 +264,7 @@
                                             .tooltipTextAfter();
                                         }
                                     }
-                                    
+
                                     .queryEngineExeTimeInfo {
                                         width: @QueryEngineExeInfo;
                                         top: -85px;