Bug 1524561 - Quantumbar: add accessibility semantics. r=mak
authorDão Gottwald <dao@mozilla.com>
Fri, 08 Mar 2019 13:42:11 +0000
changeset 521034 a299cc84703adeceb19dee304c8ce2c83c87c282
parent 521033 e6970424c0ef74b5c4331c6c489f88df37ac8f1e
child 521035 affd43bd16376575d3f06af71b5c876b46279131
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmak
bugs1524561
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1524561 - Quantumbar: add accessibility semantics. r=mak Differential Revision: https://phabricator.services.mozilla.com/D22469
browser/base/content/urlbarBindings.xml
browser/components/urlbar/UrlbarInput.jsm
browser/components/urlbar/UrlbarView.jsm
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/urlbar-autocomplete.inc.css
browser/themes/windows/browser.css
--- a/browser/base/content/urlbarBindings.xml
+++ b/browser/base/content/urlbarBindings.xml
@@ -30,16 +30,20 @@ file, You can obtain one at http://mozil
                          flex="1">
         <children/>
         <html:input anonid="scheme"
                     class="urlbar-scheme textbox-input"
                     required="required"
                     xbl:inherits="textoverflow,focused"/>
         <html:input anonid="input"
                     class="urlbar-input textbox-input"
+                    role="combobox"
+                    aria-owns="urlbarView-results"
+                    aria-controls="urlbarView-results"
+                    aria-autocomplete="both"
                     allowevents="true"
                     inputmode="mozAwesomebar"
                     xbl:inherits="value,maxlength,disabled,size,readonly,placeholder,tabindex,accesskey,focused,textoverflow"/>
       </xul:moz-input-box>
       <xul:image anonid="urlbar-go-button"
                  class="urlbar-go-button urlbar-icon"
                  onclick="gURLBar.handleCommand(event);"
                  tooltiptext="&goEndCap.tooltip;"
--- a/browser/components/urlbar/UrlbarInput.jsm
+++ b/browser/components/urlbar/UrlbarInput.jsm
@@ -52,26 +52,27 @@ class UrlbarInput {
 
     // Create the panel to contain results.
     // In the future this may be moved to the view, so it can customize
     // the container element.
     let MozXULElement = this.window.MozXULElement;
     this.document.getElementById("mainPopupSet").appendChild(
       MozXULElement.parseXULToFragment(`
         <panel id="urlbar-results"
-                role="group"
-                noautofocus="true"
-                hidden="true"
-                flip="none"
-                consumeoutsideclicks="never"
-                norolluponanchor="true"
-                level="parent">
+               role="group"
+               noautofocus="true"
+               hidden="true"
+               flip="none"
+               consumeoutsideclicks="never"
+               norolluponanchor="true"
+               level="parent">
           <html:div class="urlbarView-body-outer">
             <html:div class="urlbarView-body-inner">
-              <html:div class="urlbarView-results"/>
+              <html:div id="urlbarView-results"
+                        role="listbox"/>
             </html:div>
           </html:div>
           <hbox class="search-one-offs"
                 compact="true"
                 includecurrentengine="true"
                 disabletab="true"/>
         </panel>
       `));
--- a/browser/components/urlbar/UrlbarView.jsm
+++ b/browser/components/urlbar/UrlbarView.jsm
@@ -29,17 +29,17 @@ class UrlbarView {
   constructor(input) {
     this.input = input;
     this.panel = input.panel;
     this.controller = input.controller;
     this.document = this.panel.ownerDocument;
     this.window = this.document.defaultView;
 
     this._mainContainer = this.panel.querySelector(".urlbarView-body-inner");
-    this._rows = this.panel.querySelector(".urlbarView-results");
+    this._rows = this.panel.querySelector("#urlbarView-results");
 
     this._rows.addEventListener("mouseup", this);
     this._rows.addEventListener("mousedown", this);
 
     // For the horizontal fade-out effect, set the overflow attribute on result
     // rows when they overflow.
     this._rows.addEventListener("overflow", this);
     this._rows.addEventListener("underflow", this);
@@ -381,18 +381,20 @@ class UrlbarView {
       this.panel.style.removeProperty("--item-padding-end");
     }
     this.panel.style.setProperty("--item-content-width", Math.round(contentWidth) + "px");
   }
 
   _createRow(resultIndex) {
     let result = this._queryContext.results[resultIndex];
     let item = this._createElement("div");
+    item.id = "urlbarView-row-" + resultIndex;
     item.className = "urlbarView-row";
     item.setAttribute("resultIndex", resultIndex);
+    item.setAttribute("role", "option");
 
     if (result.type == UrlbarUtils.RESULT_TYPE.SEARCH &&
         !result.payload.isKeywordOffer) {
       item.setAttribute("type", "search");
     } else if (result.type == UrlbarUtils.RESULT_TYPE.REMOTE_TAB) {
       item.setAttribute("type", "remotetab");
     } else if (result.type == UrlbarUtils.RESULT_TYPE.TAB_SWITCH) {
       item.setAttribute("type", "switchtab");
@@ -488,24 +490,28 @@ class UrlbarView {
     }
 
     return item;
   }
 
   _selectItem(item, updateInput = true) {
     if (this._selected) {
       this._selected.toggleAttribute("selected", false);
+      this._selected.toggleAttribute("aria-selected", false);
       this._selected = null;
     }
 
     if (!item) {
+      this._rows.removeAttribute("aria-activedescendant");
       return;
     }
     this._selected = item;
     item.toggleAttribute("selected", true);
+    item.toggleAttribute("aria-selected", true);
+    this._rows.setAttribute("aria-activedescendant", item.id);
 
     if (!updateInput) {
       return;
     }
     let resultIndex = item.getAttribute("resultIndex");
     let result = this._queryContext.results[resultIndex];
     if (result) {
       this.input.setValueFromResult(result);
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -362,17 +362,17 @@ notification[value="translation"] menuli
   --urlbar-popup-action-color: -moz-nativehyperlinktext;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
   border-top: 1px solid ThreeDShadow;
 }
 
 .ac-title,
-.urlbarView-results {
+#urlbarView-results {
   font-size: 1.05em;
 }
 
 .ac-separator,
 .ac-url,
 .ac-action,
 .ac-tags {
   font-size: 0.9em;
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -345,17 +345,17 @@ html|input.urlbar-input {
   margin-top: 1px;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
   border-top: 1px solid #C7C7C7;
 }
 
 .ac-title,
-.urlbarView-results {
+#urlbarView-results {
   font-size: 14px;
 }
 
 .ac-separator,
 .ac-url,
 .ac-action,
 .ac-tags {
   font-size: 12px;
--- a/browser/themes/shared/urlbar-autocomplete.inc.css
+++ b/browser/themes/shared/urlbar-autocomplete.inc.css
@@ -33,17 +33,17 @@
   color: var(--autocomplete-popup-color);
   border: 1px solid var(--autocomplete-popup-border-color);
 }
 
 .urlbarView-body-inner {
   box-sizing: border-box;
 }
 
-.urlbarView-results {
+#urlbarView-results {
   box-sizing: border-box;
   padding: @urlbarViewPadding@;
   white-space: nowrap;
 }
 
 .urlbarView-row {
   border-radius: 2px;
   fill: currentColor;
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -634,17 +634,17 @@ html|*.urlbar-input:-moz-lwtheme::placeh
 
 %include ../shared/identity-block/identity-block.inc.css
 
 /* autocomplete */
 
 %include ../shared/autocomplete.inc.css
 %include ../shared/urlbar-autocomplete.inc.css
 
-.urlbarView-results {
+#urlbarView-results {
   font-size: 1.15em;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
   border-top: 1px solid ThreeDShadow;
 }
 
 .ac-title {