Fix CommunityCard tab navigation behaviour

thunderstore-io · Aug 28, 2024 · 6b13b6e · 6b13b6e
1 parent fef4c6d
commit 6b13b6e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/packages/cyberstorm/src/components/CommunityCard/CommunityCard.module.css b/packages/cyberstorm/src/components/CommunityCard/CommunityCard.module.css
@@ -8,11 +8,18 @@
   filter: brightness(1.15);
 }
 
+.root:focus-within {
+  border-radius: var(--border-radius--8);
+  outline: 0.2rem solid var(--color-cyber-green--50);
+  outline-offset: 0.5rem;
+}
+
 .root .imageWrapper > div {
   transform-origin: bottom;
 }
 
-.root:hover .imageWrapper > div {
+.root:hover .imageWrapper > div,
+.root:focus-within .imageWrapper > div {
   transform: scale(1.05);
 }
 
@@ -26,6 +33,10 @@
   text-overflow: ellipsis;
 }
 
+.title > a:focus-visible {
+  outline: none !important;
+}
+
 .metaItemList {
   display: flex;
   flex-direction: row;

diff --git a/packages/cyberstorm/src/components/CommunityCard/CommunityCard.tsx b/packages/cyberstorm/src/components/CommunityCard/CommunityCard.tsx
@@ -20,7 +20,11 @@ export function CommunityCard(props: Props) {
 
   return (
     <div className={styles.root}>
-      <a href={`/c/${community.identifier}`} title={community.name}>
+      <a
+        tabIndex={-1}
+        href={`/c/${community.identifier}`}
+        title={community.name}
+      >
         <ImageWithFallback
           src={community.cover_image_url}
           type="community"