Fix focus color contrast (#15544)

WordPress · May 10, 2019 · 5746ac3 · 5746ac3
1 parent 8195c74
commit 5746ac3
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss
@@ -180,8 +180,8 @@
 
 @mixin input-style__focus() {
  color: $dark-gray-900;
- border-color: $blue-medium-500;
- box-shadow: 0 0 0 1px $blue-medium-500;
+ border-color: $blue-medium-focus;
+ box-shadow: 0 0 0 1px $blue-medium-focus;
 
  // Windows High Contrast mode will show this outline, but not the box-shadow.
  outline: 2px solid transparent;

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -40,7 +40,8 @@
  border-color: #999;
  box-shadow:
  inset 0 -1px 0 #999,
- 0 0 0 2px $blue-medium-200;
+ 0 0 0 1px $white,
+ 0 0 0 3px $blue-medium-focus;
  text-decoration: none;
 
  }
@@ -88,7 +89,8 @@
  &:focus:enabled {
  box-shadow:
  inset 0 -1px 0 color(theme(button) shade(50%)),
- 0 0 0 2px $blue-medium-200;
+ 0 0 0 1px $white,
+ 0 0 0 3px $blue-medium-focus;
  }
 
  &:active:enabled {

diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss
@@ -50,6 +50,11 @@
  .DayPickerNavigation_button__horizontalDefault {
  padding: 2px 8px;
  top: 20px;
+
+ &:focus {
+ border-color: $blue-medium-focus;
+ box-shadow: 0 0 0 1px $blue-medium-focus;
+ }
  }
 
  .DayPicker_weekHeader {
@@ -94,6 +99,12 @@
  border-radius: 0 3px 3px 0;
  }
 
+ .components-datetime__time-am-button:focus,
+ .components-datetime__time-pm-button:focus {
+ position: relative;
+ z-index: 1;
+ }
+
  .components-datetime__time-am-button.is-toggled,
  .components-datetime__time-pm-button.is-toggled {
  background: $light-gray-300;