add :focus-within to all cards (#3284)

Co-authored-by: Michael Benson <[email protected]>
microsoft · Jun 16, 2020 · 0333bee · 0333bee
1 parent c57c064
commit 0333bee
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/sites/fast-website/src/app/components/card-section/card-section.styles.ts b/sites/fast-website/src/app/components/card-section/card-section.styles.ts
@@ -23,7 +23,8 @@ export const CardSectionStyles = css`
         filter: saturate(0);
     }
 
-    :host ::slotted(site-feature-card:hover) {
+    :host ::slotted(site-feature-card:hover),
+    :host ::slotted(site-feature-card:focus-within) {
         cursor: pointer;
         color: currentColor;
         background-color: var(--neutral-fill-hover);

diff --git a/...site/src/app/components/content-placement-container/content-placement-container.styles.ts b/...site/src/app/components/content-placement-container/content-placement-container.styles.ts
@@ -45,7 +45,8 @@ export const ContentPlacementContainerStyles = css`
         margin-bottom: calc(var(--design-unit) * 2px);
     }
 
-    :host([section="feature"]) site-feature-card:hover :first-child::before {
+    :host([section="feature"]) site-feature-card:hover :first-child::before,
+    :host([section="feature"]) site-feature-card:focus-within :first-child::before {
         color: var(--accent-foreground-rest);
     }
 
@@ -54,23 +55,29 @@ export const ContentPlacementContainerStyles = css`
     /* This creates the color, background, and elevation changes on hover */
 
     :host([section="feature"]:hover),
+    :host([section="feature"]:focus-within),
     :host([section="community"]:hover) site-content-placement,
-    :host([section="community"]:hover) site-content-placement ::part(content) {
+    :host([section="community"]:focus-within) site-content-placement,
+    :host([section="community"]:hover) site-content-placement ::part(content),
+    :host([section="community"]:focus-within) site-content-placement ::part(content) {
         color: var(--neutral-foreground-hint);
     }
 
-    :host([section="feature"]:hover) site-feature-card {
+    :host([section="feature"]:hover) site-feature-card,
+    :host([section="feature"]:focus-within) site-feature-card {
         filter: saturate(0);
     }
 
-    :host([section="feature"]) site-feature-card:hover {
+    :host([section="feature"]) site-feature-card:hover,
+    :host([section="feature"]) site-feature-card:focus-within {
         color: var(--neutral-foreground-rest);
         background: var(--neutral-fill-focus);
         cursor: pointer;
         filter: saturate(1);
     }
 
-    :host([section="community"]) site-content-placement:hover {
+    :host([section="community"]) site-content-placement:hover,
+    :host([section="community"]) site-content-placement:focus-within {
         --elevation: 4;
         cursor: pointer;
         background: var(--neutral-fill-focus);
@@ -79,7 +86,8 @@ export const ContentPlacementContainerStyles = css`
         ${elevation}
     }
 
-    :host([section="community"]) site-content-placement:hover ::part(content) {
+    :host([section="community"]) site-content-placement:hover ::part(content),
+    :host([section="community"]) site-content-placement:focus-within ::part(content) {
         color: var(--accent-foreground-rest);
     }
 

diff --git a/sites/fast-website/src/app/components/content-placement/content-placement.styles.ts b/sites/fast-website/src/app/components/content-placement/content-placement.styles.ts
@@ -50,7 +50,8 @@ export const ContentPlacementStyles = css`
         margin-top: calc(var(--design-unit) * 2px);
     }
 
-    fast-card:hover .contentPlacement_icon {
+    fast-card:hover .contentPlacement_icon,
+    fast-card:focus-within .contentPlacement_icon {
         visibility: visible;
     }