Accessibility: Don't remove checkbox outline on focus

Native checkboxes and radiobuttons on Mac OS X are not fully
styleable. Don't remove the focus ring for those elements because it
makes them less accessible.

Also the outline was removed outside of the focus selector, which
isn't really needed.

Change-Id: I716c84b34b5adb26691f0d4ecd13739de7b8bdbf

diff --git a/resources/mediawiki.ui/mediawiki.ui.default.css b/resources/mediawiki.ui/mediawiki.ui.default.css
index 89ca25a..498d134 100644 (file)
--- a/resources/mediawiki.ui/mediawiki.ui.default.css
+++ b/resources/mediawiki.ui/mediawiki.ui.default.css
@@ -159,19 +159,22 @@ a.mw-ui-button {
 }
 /* line 36, sourcefiles/scss/components/default/_forms.scss */
 .mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]) {
-  outline: 0;
   border-style: solid;
   border-width: 1px;
   border-color: #c9c9c9;
   color: #252525;
   padding: 0.35em 0 0.35em 0.5em;
 }
-/* line 12, sourcefiles/scss/mixins/_forms.scss */
+/* line 11, sourcefiles/scss/mixins/_forms.scss */
 .mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]):focus {
   box-shadow: #4091ed 0px 0px 5px;
   border-color: #4091ed;
 }
-/* line 38, sourcefiles/scss/components/default/_forms.scss */
+/* line 13, sourcefiles/scss/mixins/_forms.scss */
+.mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]):focus:not([type=checkbox]):not([type=radio]) {
+  outline: 0;
+}
+/* line 40, sourcefiles/scss/components/default/_forms.scss */
 .mw-ui-vform > div label {
   display: block;
   -webkit-box-sizing: border-box;
@@ -183,11 +186,11 @@ a.mw-ui-button {
   margin: 0 0 0.2em 0;
   padding: 0;
 }
-/* line 34, sourcefiles/scss/mixins/_forms.scss */
+/* line 38, sourcefiles/scss/mixins/_forms.scss */
 .mw-ui-vform > div label * {
   font-weight: normal;
 }
-/* line 49, sourcefiles/scss/components/default/_forms.scss */
+/* line 51, sourcefiles/scss/components/default/_forms.scss */
 .mw-ui-vform > div input[type="checkbox"],
 .mw-ui-vform > div input[type="radio"] {
   display: inline;
@@ -197,32 +200,35 @@ a.mw-ui-button {
   width: auto;
 }
 
-/* line 65, sourcefiles/scss/components/default/_forms.scss */
+/* line 67, sourcefiles/scss/components/default/_forms.scss */
 .mw-ui-input {
-  outline: 0;
   border-style: solid;
   border-width: 1px;
   border-color: #c9c9c9;
   color: #252525;
   padding: 0.35em 0 0.35em 0.5em;
 }
-/* line 12, sourcefiles/scss/mixins/_forms.scss */
+/* line 11, sourcefiles/scss/mixins/_forms.scss */
 .mw-ui-input:focus {
   box-shadow: #4091ed 0px 0px 5px;
   border-color: #4091ed;
 }
+/* line 13, sourcefiles/scss/mixins/_forms.scss */
+.mw-ui-input:focus:not([type=checkbox]):not([type=radio]) {
+  outline: 0;
+}
 
-/* line 72, sourcefiles/scss/components/default/_forms.scss */
+/* line 74, sourcefiles/scss/components/default/_forms.scss */
 .mw-ui-label {
   font-size: 0.9em;
   color: #4a4a4a;
 }
-/* line 34, sourcefiles/scss/mixins/_forms.scss */
+/* line 38, sourcefiles/scss/mixins/_forms.scss */
 .mw-ui-label * {
   font-weight: normal;
 }
 
-/* line 81, sourcefiles/scss/components/default/_forms.scss */
+/* line 83, sourcefiles/scss/components/default/_forms.scss */
 .mw-ui-checkbox-label, .mw-ui-radio-label {
   margin-bottom: 0.5em;
   cursor: pointer;
@@ -230,7 +236,7 @@ a.mw-ui-button {
   line-height: normal;
   font-weight: normal;
 }
-/* line 50, sourcefiles/scss/mixins/_forms.scss */
+/* line 54, sourcefiles/scss/mixins/_forms.scss */
 .mw-ui-checkbox-label > input[type="checkbox"], .mw-ui-checkbox-label > input[type="radio"], .mw-ui-radio-label > input[type="checkbox"], .mw-ui-radio-label > input[type="radio"] {
   width: auto;
   height: auto;

diff --git a/resources/mediawiki.ui/mediawiki.ui.vector.css b/resources/mediawiki.ui/mediawiki.ui.vector.css
index 94e3300..6c10397 100644 (file)
--- a/resources/mediawiki.ui/mediawiki.ui.vector.css
+++ b/resources/mediawiki.ui/mediawiki.ui.vector.css
@@ -288,19 +288,22 @@ a.mw-ui-button {
 }
 /* line 36, sourcefiles/scss/components/default/_forms.scss */
 .mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]) {
-  outline: 0;
   border-style: solid;
   border-width: 1px;
   border-color: #c9c9c9;
   color: #252525;
   padding: 0.35em 0 0.35em 0.5em;
 }
-/* line 12, sourcefiles/scss/mixins/_forms.scss */
+/* line 11, sourcefiles/scss/mixins/_forms.scss */
 .mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]):focus {
   box-shadow: #4091ed 0px 0px 5px;
   border-color: #4091ed;
 }
-/* line 38, sourcefiles/scss/components/default/_forms.scss */
+/* line 13, sourcefiles/scss/mixins/_forms.scss */
+.mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]):focus:not([type=checkbox]):not([type=radio]) {
+  outline: 0;
+}
+/* line 40, sourcefiles/scss/components/default/_forms.scss */
 .mw-ui-vform > div label {
   display: block;
   -webkit-box-sizing: border-box;
@@ -312,11 +315,11 @@ a.mw-ui-button {
   margin: 0 0 0.2em 0;
   padding: 0;
 }
-/* line 34, sourcefiles/scss/mixins/_forms.scss */
+/* line 38, sourcefiles/scss/mixins/_forms.scss */
 .mw-ui-vform > div label * {
   font-weight: normal;
 }
-/* line 49, sourcefiles/scss/components/default/_forms.scss */
+/* line 51, sourcefiles/scss/components/default/_forms.scss */
 .mw-ui-vform > div input[type="checkbox"],
 .mw-ui-vform > div input[type="radio"] {
   display: inline;
@@ -326,32 +329,35 @@ a.mw-ui-button {
   width: auto;
 }
 
-/* line 65, sourcefiles/scss/components/default/_forms.scss */
+/* line 67, sourcefiles/scss/components/default/_forms.scss */
 .mw-ui-input {
-  outline: 0;
   border-style: solid;
   border-width: 1px;
   border-color: #c9c9c9;
   color: #252525;
   padding: 0.35em 0 0.35em 0.5em;
 }
-/* line 12, sourcefiles/scss/mixins/_forms.scss */
+/* line 11, sourcefiles/scss/mixins/_forms.scss */
 .mw-ui-input:focus {
   box-shadow: #4091ed 0px 0px 5px;
   border-color: #4091ed;
 }
+/* line 13, sourcefiles/scss/mixins/_forms.scss */
+.mw-ui-input:focus:not([type=checkbox]):not([type=radio]) {
+  outline: 0;
+}
 
-/* line 72, sourcefiles/scss/components/default/_forms.scss */
+/* line 74, sourcefiles/scss/components/default/_forms.scss */
 .mw-ui-label {
   font-size: 0.9em;
   color: #4a4a4a;
 }
-/* line 34, sourcefiles/scss/mixins/_forms.scss */
+/* line 38, sourcefiles/scss/mixins/_forms.scss */
 .mw-ui-label * {
   font-weight: normal;
 }
 
-/* line 81, sourcefiles/scss/components/default/_forms.scss */
+/* line 83, sourcefiles/scss/components/default/_forms.scss */
 .mw-ui-checkbox-label, .mw-ui-radio-label {
   margin-bottom: 0.5em;
   cursor: pointer;
@@ -359,7 +365,7 @@ a.mw-ui-button {
   line-height: normal;
   font-weight: normal;
 }
-/* line 50, sourcefiles/scss/mixins/_forms.scss */
+/* line 54, sourcefiles/scss/mixins/_forms.scss */
 .mw-ui-checkbox-label > input[type="checkbox"], .mw-ui-checkbox-label > input[type="radio"], .mw-ui-radio-label > input[type="checkbox"], .mw-ui-radio-label > input[type="radio"] {
   width: auto;
   height: auto;

diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss
index 5db857a..0f3f6ad 100644 (file)
--- a/resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss
+++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss
@@ -1,62 +1,66 @@
 // Font is not included.
 // For Vector, that should be layered on top with vector-type
 @mixin agora-field-styling() {
-    @include reset-focus;  // Removes OS field focus
-
-    border: {
-        style: solid;
-        width: 1px;
-        color: $agoraGray;
-    };
-
-    &:focus {
-        // @include box-shadow generates unneeded prefixes
-        // https://github.com/chriseppstein/compass/issues/1054 , so specify
-        // directly.
-        box-shadow: $agoraBlueShadow 0px 0px 5px;
-
-        border: {
-            color: $agoraBlueShadow;
-        };
-    }
-
-    color: $agoraTextColor;
-    padding: 0.35em 0 0.35em 0.5em;
+
+       border: {
+               style: solid;
+               width: 1px;
+               color: $agoraGray;
+       };
+
+       &:focus {
+               // Styling focus of native checkboxes etc on Mac is almost impossible.
+               &:not([type=checkbox]):not([type=radio]) {
+                       @include reset-focus;  // Removes OS field focus
+               };
+
+               // @include box-shadow generates unneeded prefixes
+               // https://github.com/chriseppstein/compass/issues/1054 , so specify
+               // directly.
+               box-shadow: $agoraBlueShadow 0px 0px 5px;
+
+               border: {
+                       color: $agoraBlueShadow;
+               };
+       }
+
+       color: $agoraTextColor;
+       padding: 0.35em 0 0.35em 0.5em;
 }
 
 @mixin agora-label-styling() {
-    font: {
-        //weight: bold;
-        size: 0.9em;
-    };
-    color: darken($agoraGray, 50%);
-
-    & * {
-        font-weight: normal;
-    }
+       font: {
+               //weight: bold;
+               size: 0.9em;
+       };
+       color: darken($agoraGray, 50%);
+
+       & * {
+               font-weight: normal;
+       }
 }
 
 @mixin agora-inline-label-styling() {
-    margin-bottom: 0.5em;
-    cursor: pointer;
-    vertical-align: bottom;
-    line-height: normal;
-
-    font: {
-        weight: normal;
-    };
-
-    & > input[type="checkbox"],
-    & > input[type="radio"] {
-        width: auto;
-        height: auto;
-        margin: 0 0.1em 0em 0;
-        padding: 0;
-        border: {
-            style: solid;
-            width: 1px;
-            color: $agoraGray;
-        }
-        cursor: pointer;
-    }
+       margin-bottom: 0.5em;
+       cursor: pointer;
+       vertical-align: bottom;
+       line-height: normal;
+
+       font: {
+               weight: normal;
+       };
+
+       & > input[type="checkbox"],
+       & > input[type="radio"] {
+               width: auto;
+               height: auto;
+               margin: 0 0.1em 0em 0;
+               padding: 0;
+               border: {
+                       style: solid;
+                       width: 1px;
+                       color: $agoraGray;
+               }
+               cursor: pointer;
+       }
 }