Bug 1243353 - allow HTML in-content checkboxes to have focus and style them appropriately, r?jaws draft
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Mon, 01 Feb 2016 21:45:22 +0000
changeset 327770 55673378e18f5fabe3660333ae9c41569cc8c426
parent 327530 59fb5eb538f0bddd6bcc5523d0a710869ce717f9
child 513753 d28ae6552bf620816bdfff86d2ea7efeb78c0591
push id10296
push usergijskruitbosch@gmail.com
push dateMon, 01 Feb 2016 21:51:53 +0000
reviewersjaws
bugs1243353
milestone47.0a1
Bug 1243353 - allow HTML in-content checkboxes to have focus and style them appropriately, r?jaws
toolkit/themes/linux/global/in-content/common.css
toolkit/themes/osx/global/in-content/common.css
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/windows/global/in-content/common.css
--- a/toolkit/themes/linux/global/in-content/common.css
+++ b/toolkit/themes/linux/global/in-content/common.css
@@ -90,16 +90,23 @@ xul|*.numberbox-input-box {
   border-width: 0;
 }
 
 xul|*.text-link:-moz-focusring,
 xul|*.inline-link:-moz-focusring {
   border: 1px dotted -moz-DialogText;
 }
 
+xul|menulist:-moz-focusring > xul|*.menulist-label-box,
+xul|radio[focused="true"] > xul|*.radio-label-box,
+html|input[type="checkbox"]:-moz-focusring + html|label:before,
+xul|checkbox:-moz-focusring > xul|*.checkbox-label-box {
+  outline: 1px dotted;
+}
+
 xul|spinbuttons {
   -moz-appearance: none;
 }
 
 xul|treechildren::-moz-tree-row(multicol, odd) {
   background-color: var(--in-content-box-background-odd);
 }
 
--- a/toolkit/themes/osx/global/in-content/common.css
+++ b/toolkit/themes/osx/global/in-content/common.css
@@ -81,16 +81,17 @@ xul|*.inline-link:-moz-focusring {
   color: var(--in-content-link-highlight);
   text-decoration: underline;
   box-shadow: none;
 }
 
 xul|button:-moz-focusring,
 xul|menulist:-moz-focusring,
 xul|checkbox:-moz-focusring > .checkbox-check,
+html|input[type="checkbox"]:-moz-focusring + html|label:before,
 xul|radio[focused="true"] > .radio-check,
 xul|tab:-moz-focusring > .tab-middle > .tab-text {
   outline: 2px solid rgba(0,149,221,0.5);
   outline-offset: 1px;
   -moz-outline-radius: 2px;
 }
 
 xul|radio[focused="true"] > .radio-check {
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -470,17 +470,18 @@ html|a:hover:active,
   color: var(--in-content-link-color-active);
   text-decoration: none;
 }
 
 /* Checkboxes and radio buttons */
 
 /* Hide the actual checkbox */
 html|input[type="checkbox"] {
-  visibility: hidden;
+  opacity: 0;
+  width: 0;
   position: absolute;
 }
 
 /* Create a box to style as the checkbox */
 html|input[type="checkbox"] + html|label:before {
   display: inline-block;
   content: "";
   vertical-align: middle;
--- a/toolkit/themes/windows/global/in-content/common.css
+++ b/toolkit/themes/windows/global/in-content/common.css
@@ -63,16 +63,17 @@ xul|*.radio-label-box,
 xul|*.checkbox-label-box {
   border-style: none;
 }
 
 xul|*.inline-link:-moz-focusring,
 xul|button:-moz-focusring > xul|*.button-box,
 xul|menulist:-moz-focusring > xul|*.menulist-label-box,
 xul|radio[focused="true"] > xul|*.radio-label-box,
+html|input[type="checkbox"]:-moz-focusring + html|label:before,
 xul|checkbox:-moz-focusring > xul|*.checkbox-label-box {
   outline: 1px dotted;
 }
 
 /* Use a 2px border so that selected row highlight is still visible behind
     an existing high-contrast border that uses the background color */
 @media not all and (-moz-windows-default-theme) {
   xul|treechildren::-moz-tree-row(selected),