Ensure catd text color persists when browser loses focus

a11yproject · Apr 29, 2021 · 5daf364 · 5daf364
1 parent e10665b
commit 5daf364
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/css/components/_c-card-resource.scss b/src/css/components/_c-card-resource.scss
@@ -22,13 +22,19 @@
 		border-left-color: $color-green-shade;
 	}
 
+	&:focus-within > * {
+		color: $color-white;
+	}
+
+
 	// User Queries
 	@media screen and (prefers-reduced-motion: reduce) {
 		transition: none;
 	}
 }
 
 // Color the author link when the title link is focused
+.c-card-resource__title:focus,
 .c-card-resource__title:focus ~ .c-card-resource__meta,
 .c-card-resource__title:focus ~ .c-card-resource__description {
 	color: $color-white;

diff --git a/src/css/components/_c-featured.scss b/src/css/components/_c-featured.scss
@@ -17,7 +17,8 @@
 		background-color: $color-white;
 	}
 
-	&:focus-within {
+	&:focus-within,
+	&:focus-within * {
 		color: $color-white;
 	}
 
@@ -53,6 +54,7 @@
 
 
 // Color the author link when the title link is focused
+.c-featured__title:focus,
 .c-featured__title:focus ~ .c-featured__meta,
 .c-featured__title:focus ~ .c-featured__description {
 	color: $color-white;