Devtools: Screen Reader fix for Profiler (Memory and CPU) Datagrid

This change contains a small fix for the Profiler Datagrid, which is
used in the Top down and bottom up views for Memory Panel Allocation
samples and the Javascript Profiler tool.

It adds an aria label to the percentage columns to separate the raw
number from the percentage of the Heap/CPU
(uses a comma in the aria label,
which causes screen readers to separate the 2 numbers when reading)

Before:
Screen Reader: https://imgur.com/OA0scyB

After:
Screen Reader: https://imgur.com/a/Ke7m76C

Bug: 963183
Change-Id: I6e8f9fe59cbe17b90d581a52fc08d0024fe09107
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1730595
Commit-Queue: Brandon Goddard <brgoddar@microsoft.com>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Reviewed-by: Jeff Fisher <jeffish@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#705173}

third_party/blink/renderer/devtools/front_end/profiler/CPUProfileView.js

@@ -279,6 +279,15 @@ Profiler.CPUProfileView.NodeFormatter = class {
     return Common.UIString('%.1f\xa0ms', value);
   }
 
+  /**
+   * @override
+   * @param {number} value
+   * @return {string}
+   */
+  formatValueAccessibleText(value) {
+    return this.formatValue(value);
+  }
+
   /**
    * @override
    * @param {number} value

third_party/blink/renderer/devtools/front_end/profiler/HeapProfileView.js

@@ -720,6 +720,15 @@ Profiler.HeapProfileView.NodeFormatter = class {
     return Number.withThousandsSeparator(value);
   }
 
+  /**
+   * @override
+   * @param {number} value
+   * @return {string}
+   */
+  formatValueAccessibleText(value) {
+    return ls`${value} bytes`;
+  }
+
   /**
    * @override
    * @param {number} value

third_party/blink/renderer/devtools/front_end/profiler/ProfileDataGrid.js

@@ -205,8 +205,16 @@ Profiler.ProfileDataGridNode = class extends DataGrid.DataGridNode {
   _createValueCell(value, percent) {
     const cell = createElementWithClass('td', 'numeric-column');
     const div = cell.createChild('div', 'profile-multiple-values');
-    div.createChild('span').textContent = this.tree._formatter.formatValue(value, this);
-    div.createChild('span', 'percent-column').textContent = this.tree._formatter.formatPercent(percent, this);
+    const valueSpan = div.createChild('span');
+    const valueText = this.tree._formatter.formatValue(value, this);
+    valueSpan.textContent = valueText;
+    const percentSpan = div.createChild('span', 'percent-column');
+    const percentText = this.tree._formatter.formatPercent(percent, this);
+    percentSpan.textContent = percentText;
+    UI.ARIAUtils.markAsHidden(valueSpan);
+    UI.ARIAUtils.markAsHidden(percentSpan);
+    const valueAccessibleText = this.tree._formatter.formatValueAccessibleText(value, this);
+    UI.ARIAUtils.setAccessibleName(div, ls`${valueAccessibleText}, ${percentText}`);
     return cell;
   }
 
@@ -686,6 +694,12 @@ Profiler.ProfileDataGridNode.Formatter.prototype = {
    */
   formatValue(value, node) {},
 
+  /**
+   * @param {number} value
+   * @return {string}
+   */
+  formatValueAccessibleText(value) {},
+
   /**
    * @param {number} value
    * @param {!Profiler.ProfileDataGridNode} node

third_party/blink/renderer/devtools/front_end/profiler/profiler_strings.grdp

@@ -12,6 +12,9 @@
   <message name="IDS_DEVTOOLS_030361ea56fa177ebcbefe708a45b0f2" desc="Text in Heap Snapshot Data Grids of a profiler tool">
     # Deleted
   </message>
+  <message name="IDS_DEVTOOLS_03301bd5f0d1517cf88b2f8348b82dfc" desc="Accessible text for the value in bytes of a Memory allocation.">
+    <ph name="VALUE">$1s<ex>12345</ex></ph> bytes
+  </message>
   <message name="IDS_DEVTOOLS_04042b5589b3d4fd4e1e7e44265ad247" desc="Total trend div title in Isolate Selector of a profiler tool">
     Total page JS heap size change trend over the last <ph name="TRENDINTERVALMINUTES">$1s<ex>3</ex></ph> minutes.
   </message>