Merge pull request #46 from NASA-IMPACT/card-hover

Change hover,focus style for theme card, add screen reader only heading
NASA-IMPACT · Nov 23, 2023 · 368b51f · 368b51f
2 parents a984df5 + 41575a7
commit 368b51f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/overrides/common/style.ts b/overrides/common/style.ts
@@ -9,15 +9,15 @@ export const hoverStyle = css`
 `;
 
 export const focusStyle = css`
-  // Very subtle outline for mouse 
+  // Very subtle outline for mouse focus
   &:focus:not(:focus-visible) { 
     outline: none 
     box-shadow: ${themeVal("boxShadow.elevationA")}
   }
-  // Enable outline for keyboard
+  // More visible outline for keyboard focus
   &:focus,
   &:focus-visible {
-    outline: 5px auto ${themeVal("color.base-300")};
+    outline: 5px auto ${themeVal("color.primary")};
   }
 `;
 

diff --git a/overrides/components/theme-cards.tsx b/overrides/components/theme-cards.tsx
@@ -21,7 +21,12 @@ const ThemeCard = styled.article`
   display: flex;
   flex-flow: column nowrap;
   border-top: 1px solid ${themeVal("color.base-200a")};
-  ${hoverStyle}
+  
+  &:hover {
+    h3 {
+      text-decoration: underline;
+    }
+  }
 `;
 const ThemeCardImageWrapper = styled.figure`
   height: 240px;

diff --git a/overrides/theme/content/component.tsx b/overrides/theme/content/component.tsx
@@ -1,9 +1,19 @@
 import React from "$veda-ui/react";
-import { stories} from "veda";
-import ThemeCards from '../../components/theme-cards';
+import styled from "$veda-ui/styled-components";
+import { stories } from "veda";
+import ThemeCards from "../../components/theme-cards";
 import { Fold } from "$veda-ui-scripts/components/common/fold";
 import { themeLandingPageIds } from "../../common/story-data";
 
+/* Screen reader only h2 for heading hierarchy */
+const SrOnlyH2 = styled.h2`
+  width: 1px;
+  height: 1px;
+  left: -10000px;
+  overflow: hidden;
+  position: absolute;
+  top: auto;
+`;
 
 const themeData = Object.keys(stories)
   .map((key) => stories[key].data)
@@ -12,6 +22,7 @@ const themeData = Object.keys(stories)
 export default function ThemeLandingPage() {
   return (
     <Fold>
+      <SrOnlyH2> Nine themes</SrOnlyH2>
       <ThemeCards storyIds={themeLandingPageIds} />
     </Fold>
   );