Bug 1567377: Correct a11y semantics for address bar. r=dao

For accessibility, the address bar is now exposed as a parent combo box which contains the input and the results list.
The combo box role on urlbarView-body-inner is no longer needed and has therefore been removed.
This means screen readers no longer report an extraneous combo box whenever the results list is opened.

Differential Revision: https://phabricator.services.mozilla.com/D40917

--HG--
extra : moz-landing-system : lando

accessible/tests/browser/events/browser_test_focus_urlbar.js

@@ -52,7 +52,7 @@ async function runTests() {
 
   let focused = waitForEvent(
     EVENT_FOCUS,
-    event => event.accessible.role == ROLE_EDITCOMBOBOX
+    event => event.accessible.role == ROLE_ENTRY
   );
   gURLBar.focus();
   let event = await focused;

browser/base/content/browser.xhtml

@@ -969,12 +969,13 @@
               </box>
               <moz-input-box tooltip="aHTMLTooltip"
                              class="urlbar-input-box"
-                             flex="1">
+                             flex="1"
+                             role="combobox"
+                             aria-owns="urlbarView-results">
                 <html:input id="urlbar-scheme"
                             required="required"/>
                 <html:input id="urlbar-input"
                             anonid="input"
-                            role="combobox"
                             aria-controls="urlbarView-results"
                             aria-autocomplete="both"
                             inputmode="mozAwesomebar"

browser/components/urlbar/UrlbarInput.jsm

@@ -59,8 +59,6 @@ class UrlbarInput {
     // In the future this may be moved to the view, so it can customize
     // the container element.
     let MozXULElement = this.window.MozXULElement;
-    // TODO Bug 1567377: urlbarView-body-inner possibly doesn't need the
-    // role="combobox" once bug 1551598 is fixed.
     this.textbox.after(
       MozXULElement.parseXULToFragment(`
         <vbox id="urlbar-results"
@@ -68,8 +66,7 @@ class UrlbarInput {
               tooltip="aHTMLTooltip"
               hidden="true">
           <html:div class="urlbarView-body-outer">
-            <html:div class="urlbarView-body-inner"
-                      role="combobox">
+            <html:div class="urlbarView-body-inner">
               <html:div id="urlbarView-results"
                         role="listbox"/>
             </html:div>