From be84598a9f96c4547fb2d3ffafb5e33014947445 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 19 Dec 2021 14:45:01 +0200
Subject: [PATCH] Fix TODO: no indicator when tabbing

---
 app/components/tournament/InfoBanner.tsx |  1 -
 app/styles/tournament.css                | 12 ++++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/components/tournament/InfoBanner.tsx b/app/components/tournament/InfoBanner.tsx
index fbcd18d37..42b5ac40f 100644
--- a/app/components/tournament/InfoBanner.tsx
+++ b/app/components/tournament/InfoBanner.tsx
@@ -133,7 +133,6 @@ function InfoBannerActionButton() {
     .some(({ member }) => member.id === user.id);
   if (alreadyRegistered) {
     return (
-      // TODO: no indicator when tabbing
       <Link
         to="manage-roster"
         className="info-banner__action-button"
diff --git a/app/styles/tournament.css b/app/styles/tournament.css
index 66a6fcd5c..512d1d3c7 100644
--- a/app/styles/tournament.css
+++ b/app/styles/tournament.css
@@ -84,6 +84,10 @@
   font-weight: var(--bold);
 }
 
+.tournament__nav-link:focus-visible {
+  background-color: var(--bg-lighter-transparent);
+}
+
 .tournament__nav-link.active {
   background-color: transparent;
   color: var(--tournaments-text);
@@ -183,6 +187,10 @@
   transform: translateY(1px);
 }
 
+.info-banner__icon-button:focus-visible {
+  outline: 2px solid var(--tournaments-text-transparent);
+}
+
 .info-banner__action-button {
   all: unset;
   display: inline-flex;
@@ -204,6 +212,10 @@
   transform: translateY(1px);
 }
 
+.info-banner__action-button:focus-visible {
+  outline: 2px solid var(--tournaments-text-transparent);
+}
+
 .tournament__outlet-container {
   padding-block-start: var(--s-8);
 }