Bug 281932. Fix a11y problems in print preview. Also create tabbable <toolbarbutton>s via toolbar button class=tabbable. r=mconnor, a=mconnor

toolkit/components/printing/content/printPreviewBindings.xml

@@ -64,30 +64,30 @@
         oncommand="this.parentNode.doPageSetup();"/>
 
       <xul:vbox align="center" pack="center">
-        <xul:label value="&page.label;"/>
+        <xul:label value="&page.label;" accesskey="&page.accesskey;" control="pageNumber"/>
       </xul:vbox>
-      <xul:toolbarbutton class="home-arrow" chromedir="&locale.dir;"
+      <xul:toolbarbutton class="home-arrow tabbable" chromedir="&locale.dir;"
         oncommand="parentNode.navigate(0, 0, 'home');" tooltiptext="&homearrow.tooltip;"/>
-      <xul:toolbarbutton class="left-arrow" chromedir="&locale.dir;"
+      <xul:toolbarbutton class="left-arrow tabbable" chromedir="&locale.dir;"
         oncommand="parentNode.navigate(-1, 0, 0);" tooltiptext="&leftarrow.tooltip;"/>
       <xul:hbox align="center" pack="center">
-        <xul:textbox size="3" value="1" lastvalid="1"
+        <xul:textbox id="pageNumber" size="3" value="1" lastvalid="1"
           onchange="navigate(0, this.value, 0);"/>
         <xul:label value="&of.label;"/>
         <xul:label value="1"/>
       </xul:hbox>
-      <xul:toolbarbutton class="right-arrow" chromedir="&locale.dir;"
+      <xul:toolbarbutton class="right-arrow tabbable" chromedir="&locale.dir;"
         oncommand="parentNode.navigate(1, 0, 0);" tooltiptext="&rightarrow.tooltip;"/>
-      <xul:toolbarbutton class="end-arrow" chromedir="&locale.dir;"
+      <xul:toolbarbutton class="end-arrow tabbable" chromedir="&locale.dir;"
         oncommand="parentNode.navigate(0, 0, 'end');" tooltiptext="&endarrow.tooltip;"/>
 
       <xul:toolbarseparator class="toolbarseparator-primary"/>
       <xul:vbox align="center" pack="center">
-        <xul:label value="&scale.label;"/>
+        <xul:label value="&scale.label;" accesskey="&scale.accesskey;" control="scale"/>
       </xul:vbox>
 
       <xul:hbox align="center" pack="center">
-        <xul:menulist crop="none" 
+        <xul:menulist id="scale" crop="none" 
           oncommand="parentNode.parentNode.scale(this.selectedItem.value);">
           <xul:menupopup>
             <xul:menuitem value="0.3" label="&p30.label;"/>
@@ -113,10 +113,12 @@
       <xul:toolbarseparator class="toolbarseparator-primary"/>
       <xul:hbox align="center" pack="center">
         <xul:toolbarbutton label="&portrait.label;" checked="true"
-          type="radio" group="orient" class="toolbar-portrait-page"
+          accesskey="&portrait.accesskey;"
+          type="radio" group="orient" class="toolbar-portrait-page tabbable"
           oncommand="parentNode.parentNode.orient('portrait');"/>
         <xul:toolbarbutton label="&landscape.label;" 
-          type="radio" group="orient" class="toolbar-landscape-page"
+          accesskey="&landscape.accesskey;"
+          type="radio" group="orient" class="toolbar-landscape-page tabbable"
           oncommand="parentNode.parentNode.orient('landscape');"/>
       </xul:hbox>
 

toolkit/locales/en-US/chrome/global/printPreview.dtd

@@ -40,11 +40,13 @@
 <!ENTITY pageSetup.label      "Page Setup...">
 <!ENTITY pageSetup.accesskey  "u">
 <!ENTITY page.label           "Page:">
+<!ENTITY page.accesskey       "a">
 <!ENTITY of.label             "of">
 <!ENTITY scale.label          "Scale:">
+<!ENTITY scale.accesskey      "S">
 <!ENTITY percent.label        "&#037;">
 <!ENTITY portrait.label       "Portrait">
-<!ENTITY portrait.accesskey   "t">
+<!ENTITY portrait.accesskey   "o">
 <!ENTITY landscape.label      "Landscape">
 <!ENTITY landscape.accesskey  "L">
 <!ENTITY close.label          "Close">

toolkit/mozapps/downloads/content/downloads.xul

@@ -176,7 +176,7 @@
     <hbox id="commandBar" flex="1">
       <hbox align="center" flex="1" id="autodownloadInfo">
         <label>&filesSavedTo.label;</label>
-        <toolbarbutton id="saveToFolder" crop="right" flex="1"
+        <toolbarbutton class="tabbable" id="saveToFolder" crop="right" flex="1"
                        oncommand="onDownloadShowFolder();"
                        tooltiptext="&showFolder.label;"/>
       </hbox> 

toolkit/themes/gnomestripe/global/toolbarbutton.css

@@ -64,6 +64,19 @@ toolbarbutton {
   text-align: center;
 }
 
+toolbarbutton.tabbable {
+  -moz-user-focus: normal !important;
+}
+
+toolbarbutton:focus 
+{
+  /* -moz-appearance looks redundant here but is necessary.
+      Without it, the outline won't appear. */
+  -moz-appearance: toolbarbutton;
+  outline: 1px dotted -moz-DialogText;
+  -moz-outline-offset: -2px;
+}
+
 toolbarbutton:hover,
 toolbarbutton[buttonover="true"] {
   border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight;

toolkit/themes/qute/global/toolbarbutton.css

@@ -60,6 +60,19 @@ toolbarbutton {
   text-align: center;
 }
 
+toolbarbutton.tabbable {
+  -moz-user-focus: normal !important;
+}
+
+toolbarbutton:focus 
+{
+  /* -moz-appearance looks redundant here but is necessary.
+      Without it, the outline won't appear. */
+  -moz-appearance: toolbarbutton;
+  outline: 1px dotted -moz-DialogText;
+  -moz-outline-offset: -2px;
+}
+
 toolbarbutton:hover,
 toolbarbutton[buttonover="true"] {
   border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight;

toolkit/themes/winstripe/global/toolbarbutton.css

@@ -64,6 +64,19 @@ toolbarbutton {
   text-align: center;
 }
 
+toolbarbutton.tabbable {
+  -moz-user-focus: normal !important;
+}
+
+toolbarbutton:focus 
+{
+  /* -moz-appearance looks redundant here but is necessary.
+      Without it, the outline won't appear. */
+  -moz-appearance: toolbarbutton;
+  outline: 1px dotted -moz-DialogText;
+  -moz-outline-offset: -2px;
+}
+
 toolbarbutton:hover,
 toolbarbutton[buttonover="true"] {
   border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight;

toolkit/themes/winstripe/mozapps/downloads/downloads.css

@@ -87,7 +87,6 @@ download[state="5"], download[state="6"] {
   padding-bottom: 3px;
   -moz-padding-start: 5px;
   -moz-padding-end: 6px;
-  -moz-user-focus: normal;
 }
 
 #saveToFolder .toolbarbutton-text {