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
This commit is contained in:
James Teh 2019-08-12 14:06:27 +00:00
parent 8b7336bdae
commit a316be03d1
3 changed files with 5 additions and 7 deletions

View file

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

View file

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

View file

@ -59,8 +59,6 @@ class UrlbarInput {
// In the future this may be moved to the view, so it can customize // In the future this may be moved to the view, so it can customize
// the container element. // the container element.
let MozXULElement = this.window.MozXULElement; 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( this.textbox.after(
MozXULElement.parseXULToFragment(` MozXULElement.parseXULToFragment(`
<vbox id="urlbar-results" <vbox id="urlbar-results"
@ -68,8 +66,7 @@ class UrlbarInput {
tooltip="aHTMLTooltip" tooltip="aHTMLTooltip"
hidden="true"> hidden="true">
<html:div class="urlbarView-body-outer"> <html:div class="urlbarView-body-outer">
<html:div class="urlbarView-body-inner" <html:div class="urlbarView-body-inner">
role="combobox">
<html:div id="urlbarView-results" <html:div id="urlbarView-results"
role="listbox"/> role="listbox"/>
</html:div> </html:div>