Bug 1198687 - Fix the accessibility of the urlbar's search suggestions opt-in notification. r=mak
authorDrew Willcoxon <adw@mozilla.com>
Wed, 09 Sep 2015 14:52:38 -0700
changeset 294195 be0771b9b2df386ffb25af2f203b86dff69ff9cb
parent 294194 7e22b833ca50cf8368b9d9c48a10fa820632641f
child 294196 e831db739c399020480c11042c1815b6fb132656
push id5245
push userraliiev@mozilla.com
push dateThu, 29 Oct 2015 11:30:51 +0000
treeherdermozilla-beta@dac831dc1bd0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmak
bugs1198687
milestone43.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 1198687 - Fix the accessibility of the urlbar's search suggestions opt-in notification. r=mak
browser/base/content/urlbarBindings.xml
browser/locales/en-US/chrome/browser/browser.dtd
browser/themes/shared/urlbarSearchSuggestionsNotification.inc.css
--- a/browser/base/content/urlbarBindings.xml
+++ b/browser/base/content/urlbarBindings.xml
@@ -1102,28 +1102,42 @@ file, You can obtain one at http://mozil
         ]]></body>
       </method>
     </implementation>
   </binding>
 
   <binding id="urlbar-rich-result-popup" extends="chrome://global/content/bindings/autocomplete.xml#autocomplete-rich-result-popup">
 
     <content ignorekeys="true" level="top" consumeoutsideclicks="never">
-      <xul:hbox anonid="search-suggestions-notification" align="center">
+      <xul:hbox anonid="search-suggestions-notification"
+                align="center"
+                role="alert"
+                aria-describedby="search-suggestions-notification-text">
         <xul:description flex="1">
           &urlbar.searchSuggestionsNotification.question;
-          <xul:label anonid="search-suggestions-notification-learn-more"
+          <!-- Several things here are to make the label accessibile via an
+               accesskey so that a11y doesn't suck: the accesskey, using an
+               onclick handler instead of an href attribute, the control
+               attribute, and having the control attribute refer to a valid ID
+               that is the label itself. -->
+          <xul:label id="search-suggestions-notification-learn-more"
                      class="text-link"
-                     value="&urlbar.searchSuggestionsNotification.learnMore;"/>
+                     role="link"
+                     value="&urlbar.searchSuggestionsNotification.learnMore;"
+                     accesskey="&urlbar.searchSuggestionsNotification.learnMore.accesskey;"
+                     onclick="document.getBindingParent(this).openSearchSuggestionsNotificationLearnMoreURL();"
+                     control="search-suggestions-notification-learn-more"/>
         </xul:description>
         <xul:button anonid="search-suggestions-notification-disable"
                     label="&urlbar.searchSuggestionsNotification.disable;"
+                    accesskey="&urlbar.searchSuggestionsNotification.disable.accesskey;"
                     onclick="document.getBindingParent(this).dismissSearchSuggestionsNotification(false);"/>
         <xul:button anonid="search-suggestions-notification-enable"
                     label="&urlbar.searchSuggestionsNotification.enable;"
+                    accesskey="&urlbar.searchSuggestionsNotification.enable.accesskey;"
                     onclick="document.getBindingParent(this).dismissSearchSuggestionsNotification(true);"/>
       </xul:hbox>
       <xul:richlistbox anonid="richlistbox" class="autocomplete-richlistbox"
                        flex="1"/>
       <xul:hbox anonid="footer">
         <children/>
       </xul:hbox>
     </content>
@@ -1138,26 +1152,29 @@ file, You can obtain one at http://mozil
       </field>
 
       <field name="searchSuggestionsNotification" readonly="true">
         document.getAnonymousElementByAttribute(
           this, "anonid", "search-suggestions-notification"
         );
       </field>
 
-      <field name="searchSuggestionsNotificationLearnMoreLink" readonly="true">
-        document.getAnonymousElementByAttribute(
-          this, "anonid", "search-suggestions-notification-learn-more"
-        );
-      </field>
-
       <field name="footer" readonly="true">
         document.getAnonymousElementByAttribute(this, "anonid", "footer");
       </field>
 
+      <method name="openSearchSuggestionsNotificationLearnMoreURL">
+        <body><![CDATA[
+        let url = Services.urlFormatter.formatURL(
+          Services.prefs.getCharPref("app.support.baseURL") + "suggestions"
+        );
+        openUILinkIn(url, "tab");
+        ]]></body>
+      </method>
+
       <method name="dismissSearchSuggestionsNotification">
         <parameter name="enableSuggestions"/>
         <body><![CDATA[
           Services.prefs.setBoolPref(
             "browser.urlbar.suggest.searches", enableSuggestions
           );
           Services.prefs.setBoolPref(
             "browser.urlbar.userMadeSearchSuggestionsChoice", true
@@ -1255,39 +1272,37 @@ file, You can obtain one at http://mozil
         </body>
       </method>
 
       <method name="_showSearchSuggestionsNotification">
         <parameter name="aInput"/>
         <parameter name="aElement"/>
         <body>
           <![CDATA[
-          // Set the learn-more link href.
-          let link = this.searchSuggestionsNotificationLearnMoreLink;
-          if (!link.hasAttribute("href")) {
-            let url = Services.urlFormatter.formatURL(
-              Services.prefs.getCharPref("app.support.baseURL") + "suggestions"
-            );
-            link.setAttribute("href", url);
-          }
-
           // With the notification shown, the listbox's height can sometimes be
           // too small when it's flexed, as it normally is.  Also, it can start
           // out slightly scrolled down.  Both problems appear together, most
           // often when the popup is very narrow and the notification's text
           // must wrap.  Work around them by removing the flex.
           //
           // But without flexing the listbox, the listbox's height animation
           // sometimes fails to complete, leaving the popup too tall.  Work
           // around that problem by disabling the listbox animation.
           this.richlistbox.flex = 0;
           this.setAttribute("dontanimate", "true");
 
           this.classList.add("showSearchSuggestionsNotification");
           this._updateFooterVisibility();
+
+          // This event allows accessibility APIs to see the notification.
+          if (!this.popupOpen) {
+            let event = document.createEvent("Events");
+            event.initEvent("AlertActive", true, true);
+            this.searchSuggestionsNotification.dispatchEvent(event);
+          }
           ]]>
         </body>
       </method>
 
       <method name="searchSuggestionsNotificationWasDismissed">
         <parameter name="enableSuggestions"/>
         <body>
           <![CDATA[
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -405,18 +405,21 @@ These should match what Safari and other
 
 <!ENTITY openCmd.commandkey           "l">
 <!ENTITY urlbar.placeholder2          "Search or enter address">
 <!ENTITY urlbar.accesskey             "d">
 <!ENTITY urlbar.switchToTab.label     "Switch to tab:">
 
 <!ENTITY urlbar.searchSuggestionsNotification.question "Would you like to improve your search experience with suggestions?">
 <!ENTITY urlbar.searchSuggestionsNotification.learnMore "Learn moreā€¦">
+<!ENTITY urlbar.searchSuggestionsNotification.learnMore.accesskey "l">
 <!ENTITY urlbar.searchSuggestionsNotification.disable "No">
+<!ENTITY urlbar.searchSuggestionsNotification.disable.accesskey "n">
 <!ENTITY urlbar.searchSuggestionsNotification.enable "Yes">
+<!ENTITY urlbar.searchSuggestionsNotification.enable.accesskey "y">
 
 <!-- 
   Comment duplicated from browser-sets.inc:
 
   Search Command Key Logic works like this:
 
   Unix: Ctrl+J (0.8, 0.9 support)
         Ctrl+K (cross platform binding)
--- a/browser/themes/shared/urlbarSearchSuggestionsNotification.inc.css
+++ b/browser/themes/shared/urlbarSearchSuggestionsNotification.inc.css
@@ -21,17 +21,16 @@
 }
 
 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
   -moz-margin-start: 0;
 }
 
 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
   -moz-appearance: none;
-  -moz-user-focus: ignore;
   min-width: 80px;
   border-radius: 3px;
   padding: 4px 16px;
   margin: 0;
   -moz-margin-start: 10px;
 }
 
 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {