Merge branch 'tabs-outline' into 'develop'

Add outline in some places

See merge request soapbox-pub/soapbox-fe!1451

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>
   );

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>

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;
 }

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] {

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;