From 9f65821fcea59f80f02cb9c62c600017e0436d3f Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Tue, 21 Nov 2023 19:34:42 +0100
Subject: [PATCH] mediagrid focus styles

---
 src/components/media/MediaCard.tsx |  7 +++++--
 src/components/utils/Flare.tsx     | 17 +++++++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index 1277abf8..2664651c 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -42,9 +42,11 @@ function MediaCardContent({
 
   return (
     <Flare.Base
-      className={`group -m-3 mb-2 rounded-xl bg-background-main transition-colors duration-100 ${
-        canLink ? "hover:bg-mediaCard-hoverBackground" : ""
+      className={`group -m-3 mb-2 rounded-xl bg-background-main transition-colors duration-100 focus:relative focus:z-10 ${
+        canLink ? "hover:bg-mediaCard-hoverBackground tabbable" : ""
       }`}
+      tabIndex={canLink ? 0 : -1}
+      onKeyUp={(e) => e.key === "Enter" && e.currentTarget.click()}
     >
       <Flare.Light
         flareSize={300}
@@ -157,6 +159,7 @@ export function MediaCard(props: MediaCardProps) {
   return (
     <Link
       to={link}
+      tabIndex={-1}
       className={classNames(
         "tabbable",
         props.closable ? "hover:cursor-default" : ""
diff --git a/src/components/utils/Flare.tsx b/src/components/utils/Flare.tsx
index 267f4c85..81ceb8ec 100644
--- a/src/components/utils/Flare.tsx
+++ b/src/components/utils/Flare.tsx
@@ -13,8 +13,21 @@ export interface FlareProps {
 const SIZE_DEFAULT = 200;
 const CSS_VAR_DEFAULT = "--colors-global-accentA";
 
-function Base(props: { className?: string; children?: ReactNode }) {
-  return <div className={c(props.className, "relative")}>{props.children}</div>;
+function Base(props: {
+  className?: string;
+  children?: ReactNode;
+  tabIndex?: number;
+  onKeyUp?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+}) {
+  return (
+    <div
+      tabIndex={props.tabIndex}
+      className={c(props.className, "relative")}
+      onKeyUp={props.onKeyUp}
+    >
+      {props.children}
+    </div>
+  );
 }
 
 function Child(props: { className?: string; children?: ReactNode }) {