Merge commit 'abe5413638043a52e4fcbb5f16aefd14e76bf96c' into glitch-soc/merge-upstream

app/javascript/styles/mastodon-light/diff.scss

@@ -384,14 +384,8 @@
 
 .compose-form__actions .icon-button.active,
 .dropdown-button.active,
-.privacy-dropdown__option.active,
-.privacy-dropdown__option:focus,
 .language-dropdown__dropdown__results__item:focus,
 .language-dropdown__dropdown__results__item.active,
-.privacy-dropdown__option:focus .privacy-dropdown__option__content,
-.privacy-dropdown__option:focus .privacy-dropdown__option__content strong,
-.privacy-dropdown__option.active .privacy-dropdown__option__content,
-.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
 .language-dropdown__dropdown__results__item:focus
   .language-dropdown__dropdown__results__item__common-name,
 .language-dropdown__dropdown__results__item.active
@@ -399,6 +393,14 @@
   color: $white;
 }
 
+.privacy-dropdown__option,
+.visibility-dropdown__option {
+  &:focus,
+  &.active {
+    --dropdown-text-color: #{$white};
+  }
+}
+
 .compose-form .spoiler-input__input {
   color: lighten($ui-highlight-color, 8%);
 }
@@ -435,6 +437,10 @@
 .inline-follow-suggestions {
   background-color: color.change($ui-highlight-color, $alpha: 0.1);
   border-bottom-color: color.change($ui-highlight-color, $alpha: 0.3);
+
+  &.focusable:focus-visible {
+    background: color.change($ui-highlight-color, $alpha: 0.1);
+  }
 }
 
 .inline-follow-suggestions__body__scrollable__card {

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;
   }
 }
 
@@ -2384,6 +2384,7 @@ a .account__avatar {
 .detailed-status__display-name,
 .detailed-status__datetime,
 .detailed-status__application,
+.detailed-status__link,
 .account__display-name {
   text-decoration: none;
 }
@@ -2416,7 +2417,8 @@ a.account__display-name {
 }
 
 .detailed-status__application,
-.detailed-status__datetime {
+.detailed-status__datetime,
+.detailed-status__link {
   color: inherit;
 }
 
@@ -2602,8 +2604,9 @@ a.account__display-name {
 }
 
 .status__relative-time,
-.detailed-status__datetime {
-  &:hover {
+.detailed-status__datetime,
+.detailed-status__link {
+  &:is(a):hover {
     text-decoration: underline;
   }
 }
@@ -4370,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;
@@ -5488,6 +5496,8 @@ a.status-card {
 
 .privacy-dropdown__option,
 .visibility-dropdown__option {
+  --dropdown-text-color: $primary-text-color;
+
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.25px;
@@ -5497,7 +5507,22 @@ a.status-card {
   align-items: center;
   gap: 12px;
   border-radius: 4px;
-  color: $primary-text-color;
+  color: var(--dropdown-text-color);
+
+  // Make sure adjacent hover/active states don't have a meeting radius.
+  &:hover + &:is(:focus, .active),
+  &:is(:focus, .active) + &:hover,
+  &:is(:focus, .active) + &:is(:focus, .active) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  &:hover:has(+ :focus, .active),
+  &:is(:focus, .active):has(+ :hover),
+  &:is(:focus, .active):has(+ :is(:focus, .active)) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 
   &:hover,
   &:active {
@@ -5507,13 +5532,16 @@ a.status-card {
   &:focus,
   &.active {
     background: $ui-highlight-color;
-    color: $primary-text-color;
+    color: var(--dropdown-text-color);
     outline: 0;
 
     .privacy-dropdown__option__content,
     .privacy-dropdown__option__content strong,
-    .privacy-dropdown__option__additional {
-      color: $primary-text-color;
+    .privacy-dropdown__option__additional,
+    .visibility-dropdown__option__content,
+    .visibility-dropdown__option__content strong,
+    .visibility-dropdown__option__additional {
+      color: var(--dropdown-text-color);
     }
   }
 
@@ -5526,13 +5554,15 @@ a.status-card {
   }
 }
 
-.privacy-dropdown__option__icon {
+.privacy-dropdown__option__icon,
+.visibility-dropdown__option__icon {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.privacy-dropdown__option__content {
+.privacy-dropdown__option__content,
+.visibility-dropdown__option__content {
   flex: 1 1 auto;
   color: $darker-text-color;
 
@@ -6519,6 +6549,14 @@ a.status-card {
         max-height: 45vh;
       }
     }
+
+    &__actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      justify-content: flex-end;
+      padding: 0 24px 24px;
+    }
   }
 
   &__popout {
@@ -10368,6 +10406,10 @@ noscript {
   border-bottom: 1px solid var(--background-border-color);
   background: color.change($ui-highlight-color, $alpha: 0.05);
 
+  &.focusable:focus-visible {
+    background: color.change($ui-highlight-color, $alpha: 0.05);
+  }
+
   &__header {
     display: flex;
     align-items: center;
@@ -10440,8 +10482,10 @@ noscript {
     }
 
     &__scrollable {
+      box-sizing: border-box;
       display: flex;
       flex-wrap: nowrap;
+      min-height: 228px;
       gap: 16px;
       padding: 16px;
       scroll-snap-type: x mandatory;