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:

   <span><error-icon/>42<span><span><warning-icon/>99</span>
   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].

[1]: https://www.nvaccess.org/files/nvda/documentation/userGuide.html#BrowseMode
[2]: https://www.w3.org/WAI/WCAG21/quickref/#non-text-content
[3]: https://crrev.com/18d41172/third_party/blink/renderer/devtools/front_end/ui/Tooltip.js#190
[4]: https://github.com/nvaccess/nvda/issues/1354#issuecomment-155287285

Screenshot (NVDA speech viewer): https://i.imgur.com/KznR7O7.png
      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-on: https://chromium-review.googlesource.com/c/chromium/src/+/1861214Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
Commit-Queue: John Emau <John.Emau@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#707031}

third_party/blink/renderer/devtools/front_end/console_counters/WarningErrorCounter.js

@@ -57,6 +57,7 @@ export default class WarningErrorCounter {
    */
   _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 @@ export default class WarningErrorCounter {
       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);
     UI.inspectorView.toolbarItemResized();
     this._updatingForTest = false;
     this._updatedForTest();