From 6d15c8af26b8d46b7aabcc975388ffc57ca4e93c Mon Sep 17 00:00:00 2001
From: Cecilia Sanare <ceci@sanare.dev>
Date: Wed, 26 Jun 2024 17:39:22 -0500
Subject: [PATCH] fix(AppImage): active hover visuals on focus as well

---
 src/components/AppImage.module.css | 3 ++-
 src/components/AppImage.tsx        | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/AppImage.module.css b/src/components/AppImage.module.css
index 7a053d4..1f30b41 100644
--- a/src/components/AppImage.module.css
+++ b/src/components/AppImage.module.css
@@ -15,7 +15,8 @@ a.appImage {
     @apply rounded-md pointer-events-none opacity-0 inset-0 absolute bg-white/10 transition-opacity hover:opacity-100;
   }
 
-  &:hover .name {
+  &:hover .name,
+  &:focus .name {
     @apply translate-y-0 opacity-100;
   }
 }
diff --git a/src/components/AppImage.tsx b/src/components/AppImage.tsx
index ab02c7e..12eae2d 100644
--- a/src/components/AppImage.tsx
+++ b/src/components/AppImage.tsx
@@ -19,7 +19,7 @@ export const AppImage: FC<Props> = ({ className, app, to }) => {
         <div className={styles.name}>{app.name}</div>
       </div>
       <img src={url} />
-      <img className="blur-none group-hover:blur absolute inset-0 -z-10 transition-all" src={url} />
+      <img className="blur-none group-hover:blur group-focus:blur absolute inset-0 -z-10 transition-all" src={url} />
     </Link>
   ) : (
     <div className={cn(styles.appImage, className)}>