DevTools: give errors and warnings counter an accessible name

Without this change screen readers in browse mode [1] will incorrectly
read errors and warnings that have a tooltip of "42 errors, 99 warnings"
as "4299".

After this change screen readers will announce the same content as the
shown in the tooltip: "42 errors, 99 warnings".

Because errors and warnings are indicated with icons this change will
fix the screen reader bug and helps meet success criteria for
WCAG 1.1.1 Non-text Content [2].

Root cause:
The icons do not have accessible names and screen readers will combine
the content of the spans:

   is announced as 4299

The fix:
* Set the accessible name of counter element (title alone is insufficient [3]).
* Make the children of the counter hidden otherwise NVDA (and JAWs)
  screen readers will ignore the aria-label [4].


Screenshot (NVDA speech viewer):
      screen reader should announce the number of errors and warnings.

Test: Navigate to the counter in NVDA browse mode on Win10 and the
Bug: 963183
Change-Id: I46985e223a6f8bac5cd1dbdf597a4b0c9ab71567
Reviewed-by: Lorne Mitchell <>
Commit-Queue: John Emau <>
Cr-Original-Commit-Position: refs/heads/master@{#707031}
Cr-Mirrored-Commit: 5814dabc5bfa705994cea056b539243789e481c9
diff --git a/front_end/console_counters/WarningErrorCounter.js b/front_end/console_counters/WarningErrorCounter.js
index f515742..5e99ea5 100644
--- a/front_end/console_counters/WarningErrorCounter.js
+++ b/front_end/console_counters/WarningErrorCounter.js
@@ -57,6 +57,7 @@
   _createItem(shadowRoot, iconType) {
     const item = createElementWithClass('span', 'counter-item');
+    UI.ARIAUtils.markAsHidden(item);
     const icon = item.createChild('span', '', 'dt-icon-label');
     icon.type = iconType;
     const text = icon.createChild('span');
@@ -132,7 +133,9 @@
       this._violationCounter.title = violationCountTitle;
-    this._counter.title = this._titles.join(', ');
+    const titles = this._titles.join(', ');
+    this._counter.title = titles;
+    UI.ARIAUtils.setAccessibleName(this._counter, titles);
     this._updatingForTest = false;