print preview css: fix labels

change from

input
label

to

label
  input
  span
/label

This is better because there are no blank spaces that are unclickable (the offsetting start padding and margin was attempting to get around this). Also we need it to be consistent with settings so we can make css rules that apply to both equally well.

I removed aria-hidden attributes because those divs /should/ be using display:none when not visible. aria-hidden fixes it for screen readers but not for tab order.

BUG=103688
TEST=manual


Review URL: http://codereview.chromium.org/8566025

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@110037 0039d316-1c4b-4281-b951-d872f2087c98

8 files changed, 36 insertions, 40 deletions

diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index 57c0ffe..c88e124 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -59,7 +59,6 @@ body {
 }
 </if>
 
-
 .overlay {
   -webkit-box-align: center;
   -webkit-box-orient: vertical;
diff --git a/chrome/browser/resources/print_preview/color_settings.html b/chrome/browser/resources/print_preview/color_settings.html
index 6f2284f..7f2ada8 100644
--- a/chrome/browser/resources/print_preview/color_settings.html
+++ b/chrome/browser/resources/print_preview/color_settings.html
@@ -3,12 +3,16 @@
   <h1 i18n-content="optionColor"></h1>
   <div class="right-column">
     <div>
-      <input id="color" type="radio" name="color">
-      <label for="color" i18n-content="optionColor"></label>
+      <label>
+        <input id="color" type="radio" name="color">
+        <span i18n-content="optionColor"></span>
+      </label>
     </div>
     <div>
-      <input id="bw" type="radio" name="color" checked>
-      <label for="bw" i18n-content="optionBw"></label>
+      <label>
+        <input id="bw" type="radio" name="color" checked>
+        <span i18n-content="optionBw"></span>
+      </label>
     </div>
   </div>
  </div>
diff --git a/chrome/browser/resources/print_preview/copies_settings.html b/chrome/browser/resources/print_preview/copies_settings.html
index e62ab5d..1d10b3f 100644
--- a/chrome/browser/resources/print_preview/copies_settings.html
+++ b/chrome/browser/resources/print_preview/copies_settings.html
@@ -7,17 +7,17 @@
           i18n-values="title:incrementTitle;">+</button>
       <button id="decrement"
           i18n-values="title:decrementTitle;">–</button>
-      <span id="collate-option" hidden aria-hidden="true" aria-live="polite">
+      <label id="collate-option" aria-live="polite" hidden>
         <input id="collate" type="checkbox">
-        <label for="collate" i18n-content="optionCollate"></label>
-      </span>
+        <span i18n-content="optionCollate"></span>
+      </label>
     </div>
     <span id="copies-hint" class="hint"
-        i18n-content="copiesInstruction" aria-hidden="true" aria-live="polite">
+        i18n-content="copiesInstruction" aria-live="polite">
     </span>
-    <div id="two-sided-div">
+    <label id="two-sided-option" aria-live="polite">
       <input id="two-sided" type="checkbox">
-      <label for="two-sided" i18n-content="optionTwoSided"></label>
-    </div>
+      <span i18n-content="optionTwoSided"></span>
+    </label>
   </div>
 </div>
diff --git a/chrome/browser/resources/print_preview/copies_settings.js b/chrome/browser/resources/print_preview/copies_settings.js
index 4a3737f..de0f938 100644
--- a/chrome/browser/resources/print_preview/copies_settings.js
+++ b/chrome/browser/resources/print_preview/copies_settings.js
@@ -22,7 +22,7 @@ cr.define('print_preview', function() {
     this.collateCheckbox_ = $('collate');
     this.hint_ = $('copies-hint');
     this.twoSidedCheckbox_ = $('two-sided');
-    this.twoSidedOption_ = $('two-sided-div');
+    this.twoSidedOption_ = $('two-sided-option');
 
     // Constant values matches printing::DuplexMode enum. Not using const
     // keyword because it is not allowed by JS strict mode.
@@ -190,11 +190,6 @@ cr.define('print_preview', function() {
      */
     showHideCollateOption_: function() {
       this.collateOption_.hidden = this.numberOfCopies <= 1;
-      // TODO(aayushkumar): Remove aria-hidden attribute once elements within
-      // the hidden attribute are no longer read out by a screen-reader.
-      // (Currently a bug in webkit).
-      this.collateOption_.setAttribute('aria-hidden',
-                                       this.collateOption_.hidden);
     },
 
     /*
@@ -210,8 +205,7 @@ cr.define('print_preview', function() {
       // Ref bug: http://crbug.com/89204
       this.twoSidedOption_.hidden =
           (defaultDuplexValue == this.UNKNOWN_DUPLEX_MODE);
-      this.twoSidedOption_.setAttribute('aria-hidden',
-                                        this.twoSidedOption_.hidden);
+
       if (!this.twoSidedOption_.hidden)
         this.twoSidedCheckbox_.checked = !!defaultDuplexValue;
      },
diff --git a/chrome/browser/resources/print_preview/header_footer_settings.html b/chrome/browser/resources/print_preview/header_footer_settings.html
index faa22ac..0ba3e6c 100644
--- a/chrome/browser/resources/print_preview/header_footer_settings.html
+++ b/chrome/browser/resources/print_preview/header_footer_settings.html
@@ -1,7 +1,9 @@
 <div id="header-footer-option" class="two-column visible">
   <h1 i18n-content="optionsLabel"></h1>
   <div class="right-column">
-    <input id="header-footer" type="checkbox" checked>
-    <label for="header-footer" i18n-content="optionHeaderFooter"></label>
+    <label>
+      <input id="header-footer" type="checkbox" checked>
+      <span i18n-content="optionHeaderFooter"></span>
+    </label>
   </div>
 </div>
diff --git a/chrome/browser/resources/print_preview/layout_settings.html b/chrome/browser/resources/print_preview/layout_settings.html
index 78b4b9a..9703089 100644
--- a/chrome/browser/resources/print_preview/layout_settings.html
+++ b/chrome/browser/resources/print_preview/layout_settings.html
@@ -2,12 +2,16 @@
   <h1 i18n-content="layoutLabel"></h1>
   <div class="right-column">
     <div>
-      <input id="portrait" type="radio" name="layout" checked>
-      <label for="portrait" i18n-content="optionPortrait"></label>
+      <label>
+        <input id="portrait" type="radio" name="layout" checked>
+        <span i18n-content="optionPortrait"></span>
+      </label>
     </div>
     <div>
-      <input id="landscape" type="radio" name="layout">
-      <label for="landscape" i18n-content="optionLandscape"></label>
+      <label>
+        <input id="landscape" type="radio" name="layout">
+        <span i18n-content="optionLandscape"></span>
+      </label>
     </div>
   </div>
 </div>
diff --git a/chrome/browser/resources/print_preview/page_settings.html b/chrome/browser/resources/print_preview/page_settings.html
index 8e8e215..13a3026 100644
--- a/chrome/browser/resources/print_preview/page_settings.html
+++ b/chrome/browser/resources/print_preview/page_settings.html
@@ -1,10 +1,10 @@
 <div class="two-column visible">
   <h1 i18n-content="pagesLabel"></h1>
   <div class="right-column">
-    <div>
+    <label>
       <input id="all-pages" name="pages" checked type="radio">
-      <label for="all-pages" i18n-content="optionAllPages"></label>
-    </div>
+      <span i18n-content="optionAllPages"></span>
+    </label>
     <div>
       <div id="print-pages-div">
         <input id="print-pages" name="pages" type="radio"
diff --git a/chrome/browser/resources/print_preview/print_preview.css b/chrome/browser/resources/print_preview/print_preview.css
index ab179e8..11a455e 100644
--- a/chrome/browser/resources/print_preview/print_preview.css
+++ b/chrome/browser/resources/print_preview/print_preview.css
@@ -54,7 +54,7 @@ header {
   padding-top: 2px;
 }
 
-input[disabled] + label,
+label input[disabled] + span,
 input[type=text][disabled] {
   color: gray;
 }
@@ -188,10 +188,7 @@ select {
 }
 
 label {
-  -webkit-margin-start: -5px;
-  -webkit-padding-start: 5px;
   -webkit-user-select: none;
-  cursor: default;
 }
 
 .hidden-section {
@@ -238,11 +235,6 @@ label {
   display: -webkit-box;
 }
 
-#print-pages-div > label {
-  -webkit-box-flex: 1;
-  display: -webkit-box;
-}
-
 #individual-pages {
   -webkit-box-flex: 1;
   -webkit-margin-start: 5px;
@@ -251,7 +243,7 @@ label {
 
 #collate-option {
  -webkit-transition: opacity 200ms, -webkit-transform 200ms;
- -webkit-padding-start: 5px;
+ -webkit-padding-start: 16px;
  display: inline-block;
  opacity: 1;
 }
@@ -406,7 +398,8 @@ html[dir='rtl'] #decrement {
   -webkit-animation-delay: 300ms;
 }
 
-#two-sided-div {
+#two-sided-option {
+  display: inline-block;
   margin-top: 10px;
 }