From 41575a7e37f7965543adb9c009c13c09e5a3451d Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Wed, 22 Nov 2023 08:47:49 -0500
Subject: [PATCH] Change hover,focus style for theme card, add screen reader
 only heading

---
 overrides/common/style.ts             |  6 +++---
 overrides/components/theme-cards.tsx  |  7 ++++++-
 overrides/theme/content/component.tsx | 15 +++++++++++++--
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/overrides/common/style.ts b/overrides/common/style.ts
index ec5aabc48..1d0486daa 100644
--- 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
index 62ed52313..ada8a1802 100644
--- 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
index 9f35289b6..9f58f2ee9 100644
--- 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>
   );