2 files changed, 42 insertions(+), 36 deletions(-)

M app/javascript/mastodon/components/intersection_observer_article.jsx
M app/javascript/styles/mastodon/components.scss

@@ 114,7 114,7 @@ export default class IntersectionObserverArticle extends Component {
           aria-setsize={listLength}
           style={{ height: `${this.height || cachedHeight}px`, opacity: 0, overflow: 'hidden' }}
           data-id={id}
-          tabIndex={0}
+          tabIndex={-1}
         >
           {children && cloneElement(children, { hidden: true })}
         </article>


@@ 122,7 122,7 @@ export default class IntersectionObserverArticle extends Component {
     }
 
     return (
-      <article ref={this.handleRef} aria-posinset={index + 1} aria-setsize={listLength} data-id={id} tabIndex={0}>
+      <article ref={this.handleRef} aria-posinset={index + 1} aria-setsize={listLength} data-id={id} tabIndex={-1}>
         {children && cloneElement(children, { hidden: false })}
       </article>
     );

@@ 74,7 74,7 @@
     background-color: $ui-button-focus-background-color;
   }
 
-  &:focus {
+  &:focus-visible {
     outline: $ui-button-icon-focus-outline;
   }
 


@@ 191,8 191,6 @@
   border-radius: 4px;
   background: transparent;
   cursor: pointer;
-  transition: all 100ms ease-out;
-  transition-property: background-color, color;
   text-decoration: none;
 
   a {


@@ 203,11 201,11 @@
   &:hover,
   &:active,
   &:focus {
-    color: lighten($action-button-color, 20%);
-    background-color: $ui-button-icon-hover-background-color;
+    color: lighten($action-button-color, 7%);
+    background-color: rgba($action-button-color, 0.15);
   }
 
-  &:focus {
+  &:focus-visible {
     outline: $ui-button-icon-focus-outline;
   }
 


@@ 224,10 222,10 @@
     &:active,
     &:focus {
       color: darken($lighter-text-color, 7%);
-      background-color: $ui-button-icon-hover-background-color;
+      background-color: rgba($lighter-text-color, 0.15);
     }
 
-    &:focus {
+    &:focus-visible {
       outline: $ui-button-icon-focus-outline;
     }
 


@@ 239,6 237,13 @@
     &.active {
       color: $highlight-text-color;
 
+      &:hover,
+      &:active,
+      &:focus {
+        color: $highlight-text-color;
+        background-color: transparent;
+      }
+
       &.disabled {
         color: lighten($highlight-text-color, 13%);
       }


@@ 283,19 288,15 @@
   font-size: 11px;
   padding: 0 3px;
   line-height: 27px;
-  transition: all 100ms ease-in;
-  transition-property: background-color, color;
 
   &:hover,
   &:active,
   &:focus {
     color: darken($lighter-text-color, 7%);
-    background-color: $ui-button-icon-hover-background-color;
-    transition: all 200ms ease-out;
-    transition-property: background-color, color;
+    background-color: rgba($lighter-text-color, 0.15);
   }
 
-  &:focus {
+  &:focus-visible {
     outline: $ui-button-icon-focus-outline;
   }
 


@@ 307,6 308,13 @@
 
   &.active {
     color: $highlight-text-color;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: $highlight-text-color;
+      background-color: transparent;
+    }
   }
 }
 


@@ 1975,7 1983,7 @@ a.account__display-name {
     font-size: inherit;
     line-height: inherit;
 
-    &:focus {
+    &:focus-visible {
       outline: 1px dotted;
     }
   }


@@ 3838,7 3846,6 @@ a.status-card.compact:hover {
   position: relative;
   z-index: 2;
   outline: 0;
-  overflow: hidden;
 
   & > button {
     margin: 0;


@@ 3853,6 3860,10 @@ a.status-card.compact:hover {
     overflow: hidden;
     white-space: nowrap;
     flex: 1;
+
+    &:focus-visible {
+      outline: $ui-button-icon-focus-outline;
+    }
   }
 
   & > .column-header__back-button {


@@ 3893,10 3904,18 @@ a.status-card.compact:hover {
   font-size: 16px;
   padding: 0 15px;
 
+  &:last-child {
+    border-start-end-radius: 4px;
+  }
+
   &:hover {
     color: lighten($darker-text-color, 4%);
   }
 
+  &:focus-visible {
+    outline: $ui-button-icon-focus-outline;
+  }
+
   &.active {
     color: $primary-text-color;
     background: lighten($ui-base-color, 4%);


@@ 4542,7 4561,7 @@ a.status-card.compact:hover {
 .emoji-picker-dropdown__menu {
   background: $simple-background-color;
   position: relative;
-  box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
+  box-shadow: var(--dropdown-shadow);
   border-radius: 4px;
   margin-top: 5px;
   z-index: 2;


@@ 4720,7 4739,7 @@ a.status-card.compact:hover {
     }
   }
 
-  &:focus {
+  &:focus-visible {
     img {
       outline: $ui-button-icon-focus-outline;
     }


@@ 4734,7 4753,7 @@ a.status-card.compact:hover {
 
 .privacy-dropdown__dropdown {
   background: $simple-background-color;
-  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+  box-shadow: var(--dropdown-shadow);
   border-radius: 4px;
   overflow: hidden;
   z-index: 2;


@@ 4811,19 4830,6 @@ a.status-card.compact:hover {
   .privacy-dropdown__value {
     background: $simple-background-color;
     border-radius: 4px 4px 0 0;
-    box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
-
-    .icon-button {
-      transition: none;
-    }
-
-    &.active {
-      background: $ui-highlight-color;
-
-      .icon-button {
-        color: $primary-text-color;
-      }
-    }
   }
 
   &.top .privacy-dropdown__value {


@@ 4832,14 4838,14 @@ a.status-card.compact:hover {
 
   .privacy-dropdown__dropdown {
     display: block;
-    box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
+    box-shadow: var(--dropdown-shadow);
   }
 }
 
 .language-dropdown {
   &__dropdown {
     background: $simple-background-color;
-    box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+    box-shadow: var(--dropdown-shadow);
     border-radius: 4px;
     overflow: hidden;
     z-index: 2;