DevTools: Enhanced accessibility of Network tool Timing tab

This change enhances the accessibility of the Network tool Timing tab
by making the following changes:

 - Add hidden global headers to give column context to screen readers
 - Slight modification of color contrast for section headers (> 4.5)
 - Updated "TIME" to "DURATION" to avoid confusion
 - Applied ARIA heading for soft headers
 - Restructured columns to remove empty table cells from being read
   by a screen reader
 - Added ARIA labels to waterfall column that
   read the start time of the request. (Column 3 indicates the
   duration of that part of the request timing).

Bug: 963183

Before: https://imgur.com/qKzqyYv

After (with screen reader): https://imgur.com/Sk6vuT6

Change-Id: Ife782e02929f2a1624fd0b827b4e1f729babd209
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1647132
Reviewed-by: Erik Luo <luoe@chromium.org>
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Commit-Queue: Brandon Goddard <brgoddar@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#693774}

third_party/blink/renderer/devtools/front_end/network/RequestTimingView.js

@@ -201,9 +201,20 @@ Network.RequestTimingView = class extends UI.VBox {
     let totalDuration = 0;
 
     const startTimeHeader = tableElement.createChild('thead', 'network-timing-start');
+    const tableHeaderRow = startTimeHeader.createChild('tr');
+    const activityHeaderCell = tableHeaderRow.createChild('th');
+    activityHeaderCell.createChild('span', 'network-timing-hidden-header').textContent = ls`Label`;
+    activityHeaderCell.scope = 'col';
+    const waterfallHeaderCell = tableHeaderRow.createChild('th');
+    waterfallHeaderCell.createChild('span', 'network-timing-hidden-header').textContent = ls`Waterfall`;
+    waterfallHeaderCell.scope = 'col';
+    const durationHeaderCell = tableHeaderRow.createChild('th');
+    durationHeaderCell.createChild('span', 'network-timing-hidden-header').textContent = ls`Duration`;
+    durationHeaderCell.scope = 'col';
+
     const queuedCell = startTimeHeader.createChild('tr').createChild('td');
     const startedCell = startTimeHeader.createChild('tr').createChild('td');
-    queuedCell.colSpan = startedCell.colSpan = 2;
+    queuedCell.colSpan = startedCell.colSpan = 3;
     queuedCell.createTextChild(Common.UIString('Queued at %s', calculator.formatValue(request.issueTime(), 2)));
     startedCell.createTextChild(Common.UIString('Started at %s', calculator.formatValue(request.startTime, 2)));
 
@@ -218,10 +229,8 @@ Network.RequestTimingView = class extends UI.VBox {
       if (rangeName === Network.RequestTimeRangeNames.Push) {
         createHeader(Common.UIString('Server Push'));
       } else if (rangeName === Network.RequestTimeRangeNames.Queueing) {
-        queueingHeader = tableElement.createChild('tr', 'network-timing-table-header');
-        queueingHeader.createChild('td').createTextChild(Common.UIString('Resource Scheduling'));
-        queueingHeader.createChild('td').createTextChild('');
-        queueingHeader.createChild('td').createTextChild(Common.UIString('TIME'));
+        if (!queueingHeader)
+          queueingHeader = createHeader(ls`Resource Scheduling`);
       } else if (Network.RequestTimingView.ConnectionSetupRangeNames.has(rangeName)) {
         if (!connectionHeader)
           connectionHeader = createHeader(Common.UIString('Connection Start'));
@@ -242,6 +251,7 @@ Network.RequestTimingView = class extends UI.VBox {
       bar.style.left = left + '%';
       bar.style.right = right + '%';
       bar.textContent = '\u200B';  // Important for 0-time items to have 0 width.
+      UI.ARIAUtils.setAccessibleName(row, ls`Started at ${calculator.formatValue(range.start, 2)}`);
       const label = tr.createChild('td').createChild('div', 'network-timing-bar-title');
       label.textContent = Number.secondsToString(duration, true);
     }
@@ -315,9 +325,11 @@ Network.RequestTimingView = class extends UI.VBox {
      */
     function createHeader(title) {
       const dataHeader = tableElement.createChild('tr', 'network-timing-table-header');
-      dataHeader.createChild('td').createTextChild(title);
+      const headerCell = dataHeader.createChild('td');
+      headerCell.createTextChild(title);
+      UI.ARIAUtils.markAsHeading(headerCell, 2);
       dataHeader.createChild('td').createTextChild('');
-      dataHeader.createChild('td').createTextChild(Common.UIString('TIME'));
+      dataHeader.createChild('td').createTextChild(ls`DURATION`);
       return dataHeader;
     }
   }

third_party/blink/renderer/devtools/front_end/network/networkTimingTable.css

@@ -15,18 +15,30 @@
 .network-timing-start {
     border-top: 5px solid transparent;
 }
+
+.network-timing-start th span.network-timing-hidden-header {
+    height: 1px;
+    width: 1px;
+    position: absolute;
+    overflow: hidden;
+}
+
 .network-timing-table-header td, .network-timing-footer td {
     border-top: 10px solid transparent;
 }
 
 .network-timing-table-header td {
-    color: #bbb;
+    color: #737373;
 }
 
 .network-timing-table-header td:last-child {
     text-align: right;
 }
 
+table.network-timing-table > tr:not(.network-timing-table-header):not(.network-timing-footer) > td:first-child {
+    padding-left: 12px;
+}
+
 .network-timing-table col.labels {
     width: 156px;
 }

third_party/blink/renderer/devtools/front_end/network/network_strings.grdp

@@ -180,6 +180,9 @@
   <message name="IDS_DEVTOOLS_459c830504806e5747ddc40008ccbade" desc="Text of add button in Network Manage Custom Headers View of the Network panel">
     Add custom header…
   </message>
+  <message name="IDS_DEVTOOLS_46b4d9ff37717009d48acedceece6914" desc="Header for last column of network timing tab.">
+    DURATION
+  </message>
   <message name="IDS_DEVTOOLS_46ff2c7bbdbb02687287512c874d391f" desc="Text in Network Data Grid Node of the Network panel">
     signed-exchange
   </message>
@@ -675,6 +678,9 @@
   <message name="IDS_DEVTOOLS_df080c10e2e9f1e98c180fe2645f6132" desc="Text in Request Headers View of the Network panel">
     Request URL
   </message>
+  <message name="IDS_DEVTOOLS_e02d2ae03de9d493df2b6b2d2813d302" desc="Text that labels the length of time a network request took.">
+    Duration
+  </message>
   <message name="IDS_DEVTOOLS_e12d71bcdc8fd61f60b6fdccb4b5fedd" desc="Latency download total format in Network Time Calculator of the Network panel">
     <ph name="PH1">$1s<ex>20ms</ex></ph> latency, <ph name="PH2">$2s<ex>20ms</ex></ph> download (<ph name="PH3">$3s<ex>40ms</ex></ph> total)
   </message>

third_party/blink/renderer/devtools/front_end/timeline/timeline_strings.grdp

@@ -864,9 +864,6 @@ Then, zoom and pan the timeline with the mousewheel or <ph name="NAVIGATENODE">$
   <message name="IDS_DEVTOOLS_dfe67b764ba5e3f6b674f049db64e165" desc="Call site stack label in Timeline UIUtils of the Performance panel">
     First Layout Invalidation
   </message>
-  <message name="IDS_DEVTOOLS_e02d2ae03de9d493df2b6b2d2813d302" desc="Text in Timeline UIUtils of the Performance panel">
-    Duration
-  </message>
   <message name="IDS_DEVTOOLS_e0c70bcb54d7f58615eb895c232049ce" desc="Text in Timeline UIUtils of the Performance panel">
     Composite Layers
   </message>