Devtools: A11y (Screen Reader) improvements for Coverage tool
This change adds accessible text to columns in the coverage tool
that were not previously screen reader accessible. It adds accessible text
for the Total bytes column to prevent the numbers from being read separately
due to the spaces. It adds a label to the Unused Bytes column to prevent
screen readers from interpreting the column as 1 large percentage
instead of separate bytes value and percentage values.
And it adds accessible text to describe the bars
in the last column. Text reads
"X% of file unused. Y% of file used."
Before: https://imgur.com/qpAwxVF
After: https://imgur.com/GTqrstQ
Bug: 963183
Change-Id: I2b69cc32e935f94d2138f7964f449a4f0472182a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1710753
Reviewed-by: Lorne Mitchell <[email protected]>
Reviewed-by: Peter Marshall <[email protected]>
Reviewed-by: Sigurd Schneider <[email protected]>
Commit-Queue: Brandon Goddard <[email protected]>
Cr-Original-Commit-Position: refs/heads/master@{#707530}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: c7b23afaf3b42c471cd6a30b6f8d40759e617591
diff --git a/front_end/coverage/CoverageListView.js b/front_end/coverage/CoverageListView.js
index 88ed965..497c69d 100644
--- a/front_end/coverage/CoverageListView.js
+++ b/front_end/coverage/CoverageListView.js
@@ -302,26 +302,46 @@
}
break;
case 'size':
- cell.textContent = Number.withThousandsSeparator(this._coverageInfo.size() || 0);
+ const sizeSpan = cell.createChild('span');
+ sizeSpan.textContent = Number.withThousandsSeparator(this._coverageInfo.size() || 0);
+ UI.ARIAUtils.markAsHidden(sizeSpan);
+ UI.ARIAUtils.setAccessibleName(cell, ls`${this._coverageInfo.size() || 0} bytes`);
break;
case 'unusedSize':
const unusedSize = this._coverageInfo.unusedSize() || 0;
const unusedSizeSpan = cell.createChild('span');
const unusedPercentsSpan = cell.createChild('span', 'percent-value');
unusedSizeSpan.textContent = Number.withThousandsSeparator(unusedSize);
- unusedPercentsSpan.textContent = Common.UIString('%.1f\xa0%%', unusedSize / this._coverageInfo.size() * 100);
+ const unusedPercentFormatted = ls`${this._percentageString(unusedSize, this._coverageInfo.size(), 1)}`;
+ unusedPercentsSpan.textContent = unusedPercentFormatted;
+ UI.ARIAUtils.markAsHidden(unusedPercentsSpan);
+ UI.ARIAUtils.markAsHidden(unusedSizeSpan);
+ UI.ARIAUtils.setAccessibleName(cell, ls`${unusedSize} bytes, ${unusedPercentFormatted}`);
break;
case 'bars':
const barContainer = cell.createChild('div', 'bar-container');
const unusedSizeBar = barContainer.createChild('div', 'bar bar-unused-size');
- unusedSizeBar.style.width = (100 * this._coverageInfo.unusedSize() / this._maxSize).toFixed(4) + '%';
+ unusedSizeBar.style.width = this._percentageString(this._coverageInfo.unusedSize(), this._maxSize, 4);
const usedSizeBar = barContainer.createChild('div', 'bar bar-used-size');
- usedSizeBar.style.width = (100 * this._coverageInfo.usedSize() / this._maxSize).toFixed(4) + '%';
+ usedSizeBar.style.width = this._percentageString(this._coverageInfo.usedSize(), this._maxSize, 4);
+ const unusedPercent = this._percentageString(this._coverageInfo.unusedSize(), this._coverageInfo.size(), 1);
+ const usedPercent = this._percentageString(this._coverageInfo.usedSize(), this._maxSize, 1);
+ UI.ARIAUtils.setAccessibleName(barContainer, ls`${unusedPercent} of file unused, ${usedPercent} of file used`);
}
return cell;
}
/**
+ * @param {number} value
+ * @param {number} max
+ * @param {number} numDecimalPlaces
+ * @return {string}
+ */
+ _percentageString(value, max, numDecimalPlaces) {
+ return (value / max * 100).toFixed(numDecimalPlaces) + '%';
+ }
+
+ /**
* @param {!Element} element
* @param {string} textContent
*/
diff --git a/front_end/coverage/coverage_strings.grdp b/front_end/coverage/coverage_strings.grdp
index eeac010..f92d749 100644
--- a/front_end/coverage/coverage_strings.grdp
+++ b/front_end/coverage/coverage_strings.grdp
@@ -10,12 +10,18 @@
<message name="IDS_DEVTOOLS_1a49594b5f00e4f511ae8935c027cd8e" desc="Text in Coverage List View of the Coverage tab">
Unused Bytes
</message>
+ <message name="IDS_DEVTOOLS_1b720c2038c3cf92379c5054abda47ae" desc="Accessible text for the visualization column of coverage tool. Contains percentage of unused bytes to used bytes.">
+ <ph name="UNUSEDPERCENT">$1s<ex>20%</ex></ph> of file unused, <ph name="USEDPERCENT">$2s<ex>80%</ex></ph> of file used
+ </message>
<message name="IDS_DEVTOOLS_2adbfb69a37aa4a29ca846736d2111db" desc="Text in Coverage List View of the Coverage tab">
JS (coarse)
</message>
<message name="IDS_DEVTOOLS_44ea86aada1381cf21cf9899b3dd32fe" desc="Label for the type filter in the Converage Panel">
Filter coverage by type
</message>
+ <message name="IDS_DEVTOOLS_6861e4e238e968ec0ee3e9d3cb3b893f" desc="Accessible text for the unused bytes column in the coverage tool that describes the total unused bytes and percentage of the file unused.">
+ <ph name="UNUSEDSIZE">$1s<ex>100000</ex></ph> bytes, <ph name="UNUSEDPERCENTFORMATED">$2s<ex>88%</ex></ph>
+ </message>
<message name="IDS_DEVTOOLS_73af525212a812236f1a3618e9cfa717" desc="Tooltip text that appears when hovering over the largeicon download button in the Coverage View of the Coverage tab">
Export...
</message>
diff --git a/front_end/langpacks/shared_strings.grdp b/front_end/langpacks/shared_strings.grdp
index 981cbae..0cacd66 100644
--- a/front_end/langpacks/shared_strings.grdp
+++ b/front_end/langpacks/shared_strings.grdp
@@ -4,6 +4,9 @@
<message name="IDS_DEVTOOLS_007c41a9025be2c8e14b496ed3ee00f8" desc="Text to save an item">
Save…
</message>
+ <message name="IDS_DEVTOOLS_03301bd5f0d1517cf88b2f8348b82dfc" desc="Accessible text for the value in bytes in memory allocation or coverage view.">
+ <ph name="THIS__COVERAGEINFO_SIZE_______">$1s<ex>12345</ex></ph> bytes
+ </message>
<message name="IDS_DEVTOOLS_040c4b52a3c06c6067fac76c4c7c3a2c" desc="Title of the 'Network conditions' tool in the bottom drawer">
Network conditions
</message>
@@ -247,9 +250,6 @@
<message name="IDS_DEVTOOLS_63a6a88c066880c5ac42394a22803ca6" desc="Text to refresh the page">
Refresh
</message>
- <message name="IDS_DEVTOOLS_6525b37c568c526bde7c02fac8195c73" desc="Text for percentage">
- <ph name="PERCENTAGE">$1.1f<ex>20.1</ex></ph> %%
- </message>
<message name="IDS_DEVTOOLS_65b4c7424dd695c30efa73da8396c90c" desc="Title of the Profiler tool">
Profiler
</message>
diff --git a/front_end/profiler/profiler_strings.grdp b/front_end/profiler/profiler_strings.grdp
index d5a959b..81163ae 100644
--- a/front_end/profiler/profiler_strings.grdp
+++ b/front_end/profiler/profiler_strings.grdp
@@ -12,9 +12,6 @@
<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>
diff --git a/front_end/timeline/timeline_strings.grdp b/front_end/timeline/timeline_strings.grdp
index 3219d7d..de624f6 100644
--- a/front_end/timeline/timeline_strings.grdp
+++ b/front_end/timeline/timeline_strings.grdp
@@ -430,6 +430,9 @@
<message name="IDS_DEVTOOLS_640d76ebf7917e7353ea0444790c9794" desc="Text in Timeline UIUtils of the Performance panel">
Image Resize
</message>
+ <message name="IDS_DEVTOOLS_6525b37c568c526bde7c02fac8195c73" desc="Number followed by percent sign">
+ <ph name="VALUE___THIS__GRANDTOTALTIME______">$1.1f<ex>20</ex></ph> %%
+ </message>
<message name="IDS_DEVTOOLS_66f1aed235ade25269a561e81cbbb43a" desc="Text in Timeline UIUtils of the Performance panel">
Scripting
</message>
