From b54396588e74b311bbc8f1e3fcec1bc3350685a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 25 May 2022 17:59:54 +0200
Subject: [PATCH] Add outline in some places
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/account.tsx       | 2 +-
 app/soapbox/components/ui/card/card.tsx  | 2 +-
 app/soapbox/components/ui/menu/menu.css  | 4 ++++
 app/soapbox/components/ui/tabs/tabs.css  | 3 ++-
 app/styles/components/dropdown-menu.scss | 4 +++-
 5 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index cc91ded59..e0fe7ff14 100644
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@@ -26,7 +26,7 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account }) => {
   };
 
   return (
-    <button className='w-4 h-4 flex-none' onClick={handleClick}>
+    <button className='w-4 h-4 flex-none focus:ring-primary-500 focus:ring-2 focus:ring-offset-2' onClick={handleClick}>
       <img src={account.favicon} alt='' title={account.domain} className='w-full max-h-full' />
     </button>
   );
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 08b501cde..3eedaaf40 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -63,7 +63,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
     const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
 
     return (
-      <Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
+      <Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100 focus:ring-primary-500 focus:ring-2' aria-label={intl.formatMessage(messages.back)}>
         <SvgIcon src={require('@tabler/icons/icons/arrow-left.svg')} className='h-6 w-6' />
         <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
diff --git a/app/soapbox/components/ui/menu/menu.css b/app/soapbox/components/ui/menu/menu.css
index cb72cd702..21f916508 100644
--- a/app/soapbox/components/ui/menu/menu.css
+++ b/app/soapbox/components/ui/menu/menu.css
@@ -4,6 +4,10 @@
   z-index: 1003;
 }
 
+[data-reach-menu-button] {
+  @apply focus:ring-primary-500 focus:ring-2 focus:ring-offset-2;
+}
+
 div:focus[data-reach-menu-list] {
   outline: none;
 }
diff --git a/app/soapbox/components/ui/tabs/tabs.css b/app/soapbox/components/ui/tabs/tabs.css
index 180641acf..ee2b5cccb 100644
--- a/app/soapbox/components/ui/tabs/tabs.css
+++ b/app/soapbox/components/ui/tabs/tabs.css
@@ -13,7 +13,8 @@
 [data-reach-tab] {
   @apply flex-1 flex justify-center items-center
   py-4 px-1 text-center font-medium text-sm text-gray-500
-  dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200;
+  dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200
+  focus:ring-primary-500 focus:ring-2;
 }
 
 [data-reach-tab][data-selected] {
diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss
index 4be465849..47e2da514 100644
--- a/app/styles/components/dropdown-menu.scss
+++ b/app/styles/components/dropdown-menu.scss
@@ -44,8 +44,10 @@
   }
 
   &__item {
+    @apply focus-within:ring-primary-500 focus-within:ring-2;
+
     a {
-      @apply flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 cursor-pointer;
+      @apply flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 focus:bg-gray-100 focus:hover:bg-slate-800 cursor-pointer;
 
       > .svg-icon:first-child {
         @apply h-5 w-5 mr-2.5 transition-none;