DevTools [Search]: making search devtool screen reader accessible

Changes:
- Adding label to search input, number of matches and line number
- Added SR functionality for when the search finishes and # of matches

Keyboard Nav CL:
https://chromium-review.googlesource.com/c/chromium/src/+/1819493

Different ways to read search result status:
https://imgur.com/koruZRk

Bug: 963183

Change-Id: Ia5dc1608d3cffe3c6164f15da895896b4191b008
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1613675
Commit-Queue: Michael Liao <michael.liao@microsoft.com>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#701635}

third_party/blink/renderer/devtools/front_end/langpacks/shared_strings.grdp

@@ -52,6 +52,7 @@
   <message name="IDS_DEVTOOLS_1c481aa99d081c32182011a758f73d33" desc="Text that only contain a placeholder">
     <ph name="DURATIONTEXT">$1s<ex>100ms (at 200ms)</ex></ph>
   </message>
+  </message>
   <message name="IDS_DEVTOOLS_1eaeeaeb638fdf7f6eeb047abbfd0f1a" desc="Time of a single activity, as opposed to the total time">
     Self Time
   </message>

third_party/blink/renderer/devtools/front_end/search/SearchResultsPane.js

@@ -102,6 +102,7 @@ Search.SearchResultsPane.SearchResultsTreeElement = class extends UI.TreeElement
     matchesCountSpan.className = 'search-result-matches-count';
 
     matchesCountSpan.textContent = `${this._searchResult.matchesCount()}`;
+    UI.ARIAUtils.setAccessibleName(matchesCountSpan, ls`Matches Count ${this._searchResult.matchesCount()}`);
 
     this.listItemElement.appendChild(matchesCountSpan);
     if (this.expanded) {
@@ -143,10 +144,15 @@ Search.SearchResultsPane.SearchResultsTreeElement = class extends UI.TreeElement
 
       const anchor = Components.Linkifier.linkifyRevealable(searchResult.matchRevealable(i), '');
       anchor.classList.add('search-match-link');
-      const lineNumberSpan = createElement('span');
-      lineNumberSpan.classList.add('search-match-line-number');
-      lineNumberSpan.textContent = searchResult.matchLabel(i);
-      anchor.appendChild(lineNumberSpan);
+      const labelSpan = createElement('span');
+      labelSpan.classList.add('search-match-line-number');
+      const resultLabel = searchResult.matchLabel(i);
+      labelSpan.textContent = resultLabel;
+      if (typeof resultLabel === 'number' && !isNaN(resultLabel))
+        UI.ARIAUtils.setAccessibleName(labelSpan, ls`Line ${resultLabel}`);
+      else
+        UI.ARIAUtils.setAccessibleName(labelSpan, ls`${resultLabel}`);
+      anchor.appendChild(labelSpan);
 
       const contentSpan = this._createContentSpan(lineContent, matchRanges);
       anchor.appendChild(contentSpan);
@@ -191,6 +197,7 @@ Search.SearchResultsPane.SearchResultsTreeElement = class extends UI.TreeElement
     const contentSpan = createElement('span');
     contentSpan.className = 'search-match-content';
     contentSpan.textContent = lineContent;
+    UI.ARIAUtils.setAccessibleName(contentSpan, `${lineContent} line`);
     UI.highlightRangesWithStyleClass(contentSpan, matchRanges, 'highlighted-match');
     return contentSpan;
   }

third_party/blink/renderer/devtools/front_end/search/SearchView.js

@@ -49,6 +49,7 @@ Search.SearchView = class extends UI.VBox {
     this._search.setAttribute('type', 'text');
     this._search.setAttribute('results', '0');
     this._search.setAttribute('size', 42);
+    UI.ARIAUtils.setAccessibleName(this._search, ls`Search Query`);
     const searchItem = new UI.ToolbarItem(searchContainer);
 
     const toolbar = new UI.Toolbar('search-toolbar', this._searchPanelElement);
@@ -215,6 +216,9 @@ Search.SearchView = class extends UI.VBox {
     }
     this._searchFinished(finished);
     this._searchConfig = null;
+    UI.ARIAUtils.alert(
+        this._searchMessageElement.textContent + ' ' + this._searchResultsMessageElement.textContent,
+        this._searchMessageElement);
   }
 
   /**
@@ -381,6 +385,8 @@ Search.SearchView = class extends UI.VBox {
   }
 
   _onAction() {
+    // Resetting alert variable to prime for next search query result.
+    UI.ARIAUtils.alert(' ', this._searchMessageElement);
     const searchConfig = this._buildSearchConfig();
     if (!searchConfig.query() || !searchConfig.query().length) {
       return;

third_party/blink/renderer/devtools/front_end/search/search_strings.grdp

 <?xml version="1.0" encoding="utf-8"?>
 <grit-part>
+  <message name="IDS_DEVTOOLS_34e2aa72db15bdd577141c4379e189c7" desc="Search result label for results in the Search tool">
+    Line <ph name="RESULTLABEL">$1s<ex>2</ex></ph>
+  </message>
   <message name="IDS_DEVTOOLS_44b4e531d5b06deb40b631e4aa3c7e36" desc="Text in Search Results Pane of the Search tab">
     Show <ph name="MATCHESLEFTCOUNT">$1d<ex>2</ex></ph> more
   </message>
   <message name="IDS_DEVTOOLS_617778f774bc264b169dde60f223285f" desc="Search message element text content in Search View of the Search tab">
     Indexing…
   </message>
+  <message name="IDS_DEVTOOLS_886d9914946169e5ca8a0f33654d2240" desc="Accessibility label for number of matches in each file in search results pane">
+    Matches Count <ph name="THIS__SEARCHRESULT_MATCHESCOUNT__">$1s<ex>2</ex></ph>
+  </message>
   <message name="IDS_DEVTOOLS_9fc52b55092ab8a92303e86722013b36" desc="Text in Search View of the Search tab">
     Search interrupted.
   </message>
@@ -21,6 +27,9 @@
   <message name="IDS_DEVTOOLS_d1e64da6074bf343a0a6bd2cd6515189" desc="Text in Search View of the Search tab">
     Indexing interrupted.
   </message>
+  <message name="IDS_DEVTOOLS_eb918b4adda22d388aa3bf548dacd71c" desc="Accessibility label for search query text box">
+    Search Query
+  </message>
   <message name="IDS_DEVTOOLS_f4c8ff50c8f0b548e3297aeaf3b304b4" desc="Search results message element text content in Search View of the Search tab">
     Found 1 matching line in 1 file.
   </message>