Improve feed item focus outlines (#35864)

3 months ago · a1c7b853ec
parent 118c30fbc7
commit a1c7b853ec
1 changed files with 7 additions and 2 deletions
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@ -1438,9 +1438,9 @@ body > [data-popper-placement] {

 .focusable {
  &:focus-visible {
-    outline: 0;
+    outline: 2px solid $ui-button-focus-outline-color;
+    outline-offset: -2px;
    background: color.change($ui-highlight-color, $alpha: 0.05);
-    box-shadow: inset 0 0 0 2px $ui-button-focus-outline-color;
  }
 }

@ -4373,6 +4373,11 @@ a.status-card {
    background: var(--on-surface-color);
  }

+  &:focus-visible {
+    outline: 2px solid $ui-button-focus-outline-color;
+    outline-offset: -2px;
+  }
+
  .icon {
    width: 22px;
    height: 22px;