Add focus states for links and buttons.

web-illinois · Sep 10, 2024 · 84382e5 · 84382e5
1 parent 857f56b
commit 84382e5
Showing 1 changed file with 24 additions and 8 deletions.
diff --git a/src/ilw-card.css b/src/ilw-card.css
@@ -244,8 +244,10 @@ ilw-card {
 
     a {
         color: var(--ilw-card--link);
-        &:visited {
-            color: var(--ilw-card--link-visited);
+        &:focus {
+            color: var(--ilw-link--focus-color);
+            background-color: var(--ilw-link--focus-background-color);
+            outline: var(--ilw-link--focus-outline);
         }
         &:hover {
             color: var(--ilw-card--link-focus);
@@ -282,6 +284,12 @@ ilw-card {
                 position: relative;
                 vertical-align: middle;
 
+                &:focus {
+                    color: var(--ilw-link--focus-color);
+                    background-color: var(--ilw-link--focus-background-color);
+                    outline: var(--ilw-link--focus-outline);
+                }
+
                 &::after {
                     content: "»";
                     display: block;
@@ -304,6 +312,11 @@ ilw-card {
 
             a {
                 color: var(--ilw-card--hover--link);
+                &:focus {
+                    color: var(--ilw-link--focus-color);
+                    background-color: var(--ilw-link--focus-background-color);
+                    outline: var(--ilw-link--focus-outline);
+                }
                 &:hover {
                     color: var(--ilw-card--hover--link-focus);
                 }
@@ -317,11 +330,10 @@ ilw-card {
                 color: var(--ilw-card--hover--heading-color);
                 a {
                     color: var(--ilw-card--hover--heading-color);
-                    &:visited {
-                        color: var(--ilw-card--hover--heading-color);
-                    }
-                    &:hover {
-                        color: var(--ilw-card--hover--heading-color);
+                    &:focus {
+                        color: var(--ilw-link--focus-color);
+                        background-color: var(--ilw-link--focus-background-color);
+                        outline: var(--ilw-link--focus-outline);
                     }
                 }
             }
@@ -344,9 +356,13 @@ ilw-card[clickable] {
 
         /* Fix button text colors in clickable cards */
         color: var(--ilw-button--foreground-color);
-        &:focus, &:hover {
+        &:hover {
             color: var(--ilw-button--focused-foreground-color);
         }
+        &:focus {
+            color: var(--ilw-link--focus-color);
+            outline: var(--ilw-link--focus-outline);
+        }
     }
 }