fix: focus button styles #713

Esri · Jan 2, 2020 · 8a32670 · 8a32670
1 parent 24a17d9
commit 8a32670
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/src/components/calcite-action/calcite-action.scss b/src/components/calcite-action/calcite-action.scss
@@ -27,7 +27,8 @@
     padding-right: var(--calcite-app-side-spacing-quarter);
   }
 
-  &:hover {
+  &:hover,
+  &:focus {
     background-color: var(--calcite-app-background-hover);
     color: var(--calcite-app-foreground-hover);
     fill: var(--calcite-app-foreground-hover);
@@ -81,6 +82,7 @@
 
 :host([active]) .button,
 :host([active]) .button:hover,
+:host([active]) .button:focus,
 :host([active][loading]) .button {
   color: var(--calcite-app-foreground-active);
   fill: var(--calcite-app-foreground-active);
@@ -92,13 +94,15 @@
   transition: box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);
 }
 
-:host([appearance="clear"]) .button:hover {
+:host([appearance="clear"]) .button:hover,
+:host([appearance="clear"]) .button:focus {
   background-color: var(--calcite-app-background-clear);
   @include borderShadowHover();
 }
 
 :host([active][appearance="clear"]) .button,
-:host([active][appearance="clear"]) .button:hover {
+:host([active][appearance="clear"]) .button:hover,
+:host([active][appearance="clear"]) .button:focus {
   color: var(--calcite-app-foreground-active);
   fill: var(--calcite-app-foreground-active);
   background-color: var(--calcite-app-background-active);
@@ -111,7 +115,8 @@
 }
 
 :host([loading]) .button,
-:host([loading]) .button:hover {
+:host([loading]) .button:hover,
+:host([loading]) .button:focus {
   background-color: var(--calcite-app-background);
 }
 
@@ -121,14 +126,16 @@
 }
 
 :host([disabled]) .button,
-:host([disabled]) .button:hover {
+:host([disabled]) .button:hover,
+:host([disabled]) .button:focus {
   cursor: default;
   opacity: var(--calcite-app-disabled-opacity);
   background-color: var(--calcite-app-background);
 }
 
 :host([disabled][active]) .button,
-:host([disabled][active]) .button:hover {
+:host([disabled][active]) .button:hover,
+:host([disabled][active]) .button:focus {
   opacity: var(--calcite-app-disabled-opacity);
   background-color: var(--calcite-app-background-active);
 }
@@ -160,7 +167,8 @@
   padding-left: var(--calcite-app-side-spacing);
 }
 
-:host([indicator]) .button:hover::after {
+:host([indicator]) .button:hover::after,
+:host([indicator]) .button:focus::after {
   border-color: var(--calcite-app-background-hover);
 }
 

diff --git a/src/components/calcite-filter/calcite-filter.scss b/src/components/calcite-filter/calcite-filter.scss
@@ -51,7 +51,8 @@ input[type="text"]:focus {
   background: none;
   border: 0;
   cursor: pointer;
-  &:hover {
+  &:hover,
+  &:focus {
     color: var(--calcite-app-foreground-hover);
   }
 }

diff --git a/src/components/calcite-pick-list-item/calcite-pick-list-item.scss b/src/components/calcite-pick-list-item/calcite-pick-list-item.scss
@@ -8,7 +8,8 @@
   animation: calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function);
 }
 
-:host(:hover) {
+:host(:hover),
+:host(:focus) {
   background-color: var(--calcite-app-background-hover);
 }