jenkins-bot has submitted this change and it was merged.
Change subject: Accessibility: Don't remove checkbox outline on focus
......................................................................
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
---
M resources/mediawiki.ui/mediawiki.ui.default.css
M resources/mediawiki.ui/mediawiki.ui.vector.css
M resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss
3 files changed, 85 insertions(+), 69 deletions(-)
Approvals:
MarkTraceur: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/mediawiki.ui/mediawiki.ui.default.css
b/resources/mediawiki.ui/mediawiki.ui.default.css
index 89ca25a..498d134 100644
--- a/resources/mediawiki.ui/mediawiki.ui.default.css
+++ b/resources/mediawiki.ui/mediawiki.ui.default.css
@@ -159,19 +159,22 @@
}
/* 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 @@
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 @@
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 @@
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
--- a/resources/mediawiki.ui/mediawiki.ui.vector.css
+++ b/resources/mediawiki.ui/mediawiki.ui.vector.css
@@ -288,19 +288,22 @@
}
/* 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 @@
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 @@
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 @@
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
--- 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;
- };
+ 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;
+ &: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
+ };
- border: {
- color: $agoraBlueShadow;
- };
- }
+ // @include box-shadow generates unneeded prefixes
+ // https://github.com/chriseppstein/compass/issues/1054 , so
specify
+ // directly.
+ box-shadow: $agoraBlueShadow 0px 0px 5px;
- color: $agoraTextColor;
- padding: 0.35em 0 0.35em 0.5em;
+ 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: bold;
+ size: 0.9em;
+ };
+ color: darken($agoraGray, 50%);
- & * {
- font-weight: normal;
- }
+ & * {
+ font-weight: normal;
+ }
}
@mixin agora-inline-label-styling() {
- margin-bottom: 0.5em;
- cursor: pointer;
- vertical-align: bottom;
- line-height: normal;
+ margin-bottom: 0.5em;
+ cursor: pointer;
+ vertical-align: bottom;
+ line-height: normal;
- font: {
- weight: 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;
- }
+ & > 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;
+ }
}
--
To view, visit https://gerrit.wikimedia.org/r/80813
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I716c84b34b5adb26691f0d4ecd13739de7b8bdbf
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: TheDJ <[email protected]>
Gerrit-Reviewer: Hoo man <[email protected]>
Gerrit-Reviewer: Jack Phoenix <[email protected]>
Gerrit-Reviewer: MarkTraceur <[email protected]>
Gerrit-Reviewer: Mattflaschen <[email protected]>
Gerrit-Reviewer: Spage <[email protected]>
Gerrit-Reviewer: Swalling <[email protected]>
Gerrit-Reviewer: TheDJ <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
