[Accessibility] Ensures screen reader announces position list items and suggestions index.

We already had code in SuggestBox.ts to announce the item position in the list of suggestions from this change [here](https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2984362) However,  the announcment was getting interrupted by another screen reader call further than down the stack on ListControl Item Focus from this patch - https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3780899

- This change moves the fix for the original issue higher up in the stack and ensures we include item position in the screen reader announcement.
- With this change the screen reader announcements from SuggestBox get applied correctly.

Bug: 1515418
Change-Id: Ib4b7f8830999fdbe0b527d35ffcd7d770f6c7c3a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5166711
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>
Commit-Queue: Sylvester Elorm Coch <elormcoch@microsoft.com>

front_end/ui/legacy/ListControl.ts

diff --git a/front_end/ui/legacy/ListControl.ts b/front_end/ui/legacy/ListControl.ts
index cb64ef4..444188e 100644
--- a/front_end/ui/legacy/ListControl.ts
+++ b/front_end/ui/legacy/ListControl.ts
@@ -357,7 +357,7 @@
     return Math.min(this.model.length - 1, Math.floor(offset / this.fixedHeight));
   }
 
-  private elementAtIndex(index: number): Element {
+  elementAtIndex(index: number): Element {
     const item = this.model.at(index);
     let element = this.itemToElement.get(item);
     if (!element) {
@@ -429,10 +429,6 @@
       }
       if (newElement) {
         ARIAUtils.setSelected(newElement, true);
-        const text = newElement.textContent;
-        if (text) {
-          ARIAUtils.alert(text);
-        }
       }
       ARIAUtils.setActiveDescendant(this.element, newElement);
     }

front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

diff --git a/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts b/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts
index fa18ec3..90a23d5 100644
--- a/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts
+++ b/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts
@@ -28,6 +28,13 @@
    * @description Text to show no results have been found
    */
   noResultsFound: 'No results found',
+  /**
+   * @description Aria alert to read the item in list when navigating with screen readers
+   * @example {name} PH1
+   * @example {2} PH2
+   * @example {5} PH3
+   */
+  sItemSOfS: '{PH1}, item {PH2} of {PH3}',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/quick_open/FilteredListWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -317,6 +324,11 @@
       return;
     }
     this.list.selectItem(item);
+    const text = this.list.elementAtIndex(this.list.selectedIndex())?.textContent;
+    if (text) {
+      UI.ARIAUtils.alert(
+          i18nString(UIStrings.sItemSOfS, {PH1: text, PH2: this.list.selectedIndex() + 1, PH3: this.items.length}));
+    }
   }
 
   setQuery(query: string): void {
@@ -534,6 +546,11 @@
     }
     if (handled) {
       keyboardEvent.consume(true);
+      const text = this.list.elementAtIndex(this.list.selectedIndex())?.textContent;
+      if (text) {
+        UI.ARIAUtils.alert(
+            i18nString(UIStrings.sItemSOfS, {PH1: text, PH2: this.list.selectedIndex() + 1, PH3: this.items.length}));
+      }
     }
   }