Local NTP, Realbox: improve experience for screenreader users

* fixes .role = ...; vs setAttribute(role, ...) booboo
* makes #realbox politely live so that up/down utter something

R=dpapad@chromium.org

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

chrome/browser/resources/local_ntp/local_ntp.html

@@ -80,7 +80,7 @@
       <div id="realbox-input-wrapper">
         <div class="google-g-icon"></div>
         <input id="realbox" type="search" autocomplete="off" spellcheck="false"
-            autofocus>
+            aria-live="polite" autofocus>
         <button id="realbox-microphone" class="microphone-icon" hidden></button>
         <div id="realbox-matches"></div>
       </div>

chrome/browser/resources/local_ntp/local_ntp.js

@@ -1432,13 +1432,13 @@ function overrideExecutableTimeoutForTesting(timeout) {
  */
 function populateAutocompleteMatches(matches) {
   const realboxMatchesEl = document.createElement('div');
-  realboxMatchesEl.role = 'listbox';
+  realboxMatchesEl.setAttribute('role', 'listbox');
 
   for (let i = 0; i < matches.length; ++i) {
     const match = matches[i];
     const matchEl = document.createElement('a');
     matchEl.href = match.destinationUrl;
-    matchEl.role = 'option';
+    matchEl.setAttribute('role', 'option');
 
     if (match.isSearchType) {
       const icon = document.createElement('div');

chrome/test/data/local_ntp/realbox_browsertest.js

@@ -163,10 +163,12 @@ test.realbox.testReplyWithMatches = function() {
 
   const matchesEl = $(test.realbox.IDS.REALBOX_MATCHES);
   assertTrue(!!matchesEl);
+  assertTrue(matchesEl.hasAttribute('role'));
   assertEquals(matches.length, matchesEl.children.length);
   assertEquals(matches[0].destinationUrl, matchesEl.children[0].href);
   assertEquals(matches[1].destinationUrl, matchesEl.children[1].href);
   assertEquals(matches[1].textContent, matchesEl.children[1].contents);
+  assertTrue(matchesEl.children[0].hasAttribute('role'));
 };
 
 test.realbox.testReplyWithInlineAutocompletion = function() {