Local NTP, Realbox: improve a11y of autocomplete match elements

Create a separate a11y-only aria-description text that reads relevant
info without needing to use the rendered DOM.

Also denote which element is selected via aria-selected.

Bug: 1017915,1017877
Change-Id: Ic4fc56eecf5f9d5b6fcdac319d5fb4ba78835262
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1880273
Auto-Submit: Dan Beam <dbeam@chromium.org>
Commit-Queue: Dan Beam <dbeam@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#709629}

chrome/browser/resources/local_ntp/local_ntp.js

@@ -1174,7 +1174,7 @@ function onQueryAutocompleteDone(result) {
     return;
   }
 
-  $(IDS.REALBOX_MATCHES).firstElementChild.classList.add(CLASSES.SELECTED);
+  selectMatchEl(assert($(IDS.REALBOX_MATCHES).firstElementChild));
 
   // If the user is deleting content, don't quickly re-suggest the same
   // output.
@@ -1476,14 +1476,20 @@ function populateAutocompleteMatches(matches) {
         renderMatchClassifications(match.contents, match.contentsClass);
     const descriptionEls = [];
     const separatorEls = [];
+    let separatorText = '';
 
     if (match.description) {
       descriptionEls.push(...renderMatchClassifications(
           match.description, match.descriptionClass));
-      separatorEls.push(document.createTextNode(
-          configData.translatedStrings.realboxSeparator));
+      separatorText = configData.translatedStrings.realboxSeparator;
+      separatorEls.push(document.createTextNode(separatorText));
     }
 
+    const ariaLabel = match.swapContentsAndDescription ?
+        match.description + separatorText + match.contents :
+        match.contents + separatorText + match.description;
+    matchEl.setAttribute('aria-label', ariaLabel);
+
     const layout = match.swapContentsAndDescription ?
         [descriptionEls, separatorEls, contentsEls] :
         [contentsEls, separatorEls, descriptionEls];
@@ -1513,9 +1519,6 @@ function populateAutocompleteMatches(matches) {
       realboxMatchesEl.classList.add(CLASSES.REMOVABLE);
     }
 
-    // TODO(crbug.com/1002689): set a more useful aria-label on |matchEl|, as
-    // "Remove suggestion" is now uttered when navigating through matches.
-
     realboxMatchesEl.append(matchEl);
   }
 
@@ -1748,6 +1751,7 @@ function selectMatchEl(elToSelect) {
   Array.from($(IDS.REALBOX_MATCHES).children).forEach((matchEl, i) => {
     const found = matchEl === elToSelect;
     matchEl.classList.toggle(CLASSES.SELECTED, found);
+    matchEl.setAttribute('aria-selected', found);
     if (found) {
       selectedIndex = i;
     }