change column link to add a better keyboard focus indicator

mastodon · Aug 2, 2023 · b64d49c · b64d49c
1 parent fd28431
commit b64d49c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git 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
@@ -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;
@@ -3956,7 +3963,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
@@ -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