From 9b80e0117e2e50b49214212884b8b0183ca15eb7 Mon Sep 17 00:00:00 2001 From: Derk-Jan Hartman Date: Sun, 25 Aug 2013 15:22:39 +0200 Subject: [PATCH] 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 --- .../mediawiki.ui/mediawiki.ui.default.css | 30 +++-- .../mediawiki.ui/mediawiki.ui.vector.css | 30 +++-- .../sourcefiles/scss/mixins/_forms.scss | 108 +++++++++--------- 3 files changed, 92 insertions(+), 76 deletions(-) diff --git a/resources/mediawiki.ui/mediawiki.ui.default.css b/resources/mediawiki.ui/mediawiki.ui.default.css index 89ca25ad02..498d13487f 100644 --- 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 94e3300d6f..6c10397046 100644 --- 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 5db857ae1b..0f3f6ad341 100644 --- 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; + } } -- 2.20.1