From 6308dca76aef6dd8265813d58f7aab3f96eb21cc Mon Sep 17 00:00:00 2001
From: Trevor Wolf <teeerevor@gmail.com>
Date: Thu, 3 Aug 2023 03:33:41 +1000
Subject: [PATCH] change column link to add a better keyboard focus indicator
 (#26278)

---
 app/javascript/styles/mastodon/basics.scss     | 2 +-
 app/javascript/styles/mastodon/components.scss | 9 ++++++++-
 app/javascript/styles/mastodon/variables.scss  | 4 +++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index a77f8425dd..6714b24268 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -164,7 +164,7 @@ body {
 a {
   &:focus {
     border-radius: 4px;
-    outline: $ui-button-icon-focus-outline;
+    outline: $ui-button-focus-outline;
   }
 
   &:focus:not(:focus-visible) {
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 7fe7a00412..76928ba1fa 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -3283,6 +3283,8 @@ $ui-header-height: 55px;
   text-decoration: none;
   overflow: hidden;
   white-space: nowrap;
+  border: 0;
+  border-left: 4px solid transparent;
 
   &:hover,
   &:focus,
@@ -3294,6 +3296,11 @@ $ui-header-height: 55px;
     outline: 0;
   }
 
+  &:focus-visible {
+    border-color: $ui-button-focus-outline-color;
+    border-radius: 0;
+  }
+
   &--transparent {
     background: transparent;
     color: $ui-secondary-color;
@@ -3958,7 +3965,7 @@ a.status-card {
   }
 
   &:focus-visible {
-    outline: $ui-button-icon-focus-outline;
+    outline: $ui-button-focus-outline;
   }
 
   &.active {
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index 073bb16e59..611c8bb5d1 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -43,6 +43,8 @@ $ui-highlight-color: $classic-highlight-color !default;
 $ui-button-color: $white !default;
 $ui-button-background-color: $blurple-500 !default;
 $ui-button-focus-background-color: $blurple-600 !default;
+$ui-button-focus-outline-color: $blurple-400 !default;
+$ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default;
 
 $ui-button-secondary-color: $grey-100 !default;
 $ui-button-secondary-border-color: $grey-100 !default;
@@ -57,7 +59,7 @@ $ui-button-tertiary-focus-color: $white !default;
 $ui-button-destructive-background-color: $red-500 !default;
 $ui-button-destructive-focus-background-color: $red-600 !default;
 
-$ui-button-icon-focus-outline: solid 2px $blurple-400 !default;
+$ui-button-icon-focus-outline: $ui-button-focus-outline !default;
 $ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default;
 
 // Variables for texts