Make post status form use focused-style

src/_mixins.scss

@@ -16,3 +16,15 @@
     @content;
   }
 }
+
+@mixin focused-style-with($selectors...) {
+  @include focused-style {
+    @content;
+  }
+
+  @each $selector in $selectors {
+    #{$selector} {
+      @content;
+    }
+  }
+}

src/components/chat_list_item/chat_list_item.scss

@@ -1,3 +1,5 @@
+@import "src/mixins";
+
 .chat-list-item {
   display: flex;
   flex-direction: row;
@@ -7,11 +9,11 @@
   box-sizing: border-box;
   cursor: pointer;
 
-  :focus {
+  @include unfocused-style {
     outline: none;
   }
 
-  &:hover {
+  @include focused-style {
     background-color: var(--selectedPost, $fallback--lightBg);
     box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
   }
@@ -63,13 +65,15 @@
     pointer-events: none;
   }
 
-  &:hover .animated.avatar {
+  @include focused-style {
-    canvas {
+    .animated.avatar {
-      display: none;
+      canvas {
-    }
+        display: none;
+      }
 
-    img {
+      img {
-      visibility: visible;
+        visibility: visible;
+      }
     }
   }
 

src/components/chat_list_item/chat_list_item.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="chat-list-item"
+    tabindex="0"
     @click.capture.prevent="openChat"
   >
     <div class="chat-list-item-left">

src/components/extra_buttons/extra_buttons.vue

@@ -192,11 +192,6 @@
     position: static;
     padding: 10px;
     margin: -10px;
-
-    &:hover .svg-inline--fa {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
   }
 
   .popover-trigger-button {
@@ -213,6 +208,11 @@
       .focus-marker {
         visibility: visible;
       }
+
+      .svg-inline--fa {
+        color: $fallback--text;
+        color: var(--text, $fallback--text);
+      }
     }
   }
 }

src/components/favorite_button/favorite_button.vue

@@ -86,7 +86,6 @@
       animation-duration: 0.6s;
     }
 
-    &:hover .svg-inline--fa,
     &.-favorited .svg-inline--fa {
       color: $fallback--cOrange;
       color: var(--cOrange, $fallback--cOrange);
@@ -103,6 +102,11 @@
     }
 
     @include focused-style {
+      .svg-inline--fa {
+        color: $fallback--cOrange;
+        color: var(--cOrange, $fallback--cOrange);
+      }
+
       .focus-marker {
         visibility: visible;
       }

src/components/post_status_form/post_status_form.vue

@@ -88,6 +88,9 @@
         >
           <a
             class="preview-toggle faint"
+            role="button"
+            tabindex="0"
+            :aria-expanded="showPreview"
             @click.stop.prevent="togglePreview"
           >
             {{ $t('post_status.preview') }}
@@ -346,6 +349,7 @@
 
 <style lang="scss">
 @import "../../variables";
+@import "src/mixins";
 
 .post-status-form {
   position: relative;
@@ -389,7 +393,7 @@
     cursor: pointer;
     user-select: none;
 
-    &:hover {
+    @focused-style {
       text-decoration: underline;
     }
 
@@ -470,8 +474,7 @@
     display: flex;
     align-items: center;
 
-    &.selected,
+    @include focused-style-with("&.selected") {
-    &:hover {
       // needs to be specific to override icon default color
       svg,
       i,
@@ -488,7 +491,7 @@
         color: $fallback--icon;
         color: var(--btnDisabledText, $fallback--icon);
 
-        &:hover {
+        @include focused-style {
           color: $fallback--icon;
           color: var(--btnDisabledText, $fallback--icon);
         }

src/components/react_button/react_button.vue

@@ -121,7 +121,7 @@
       line-height: 1.5;
       align-content: center;
 
-      &:hover {
+      @include focused-style {
         transform: scale(1.25);
       }
     }
@@ -130,11 +130,6 @@
   .popover-trigger {
     padding: 10px;
     margin: -10px;
-
-    &:hover .svg-inline--fa {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
   }
 
   .popover-trigger-button {
@@ -151,6 +146,11 @@
       .focus-marker {
         visibility: visible;
       }
+
+      .svg-inline--fa {
+        color: $fallback--text;
+        color: var(--text, $fallback--text);
+      }
     }
   }
 }

src/components/reply_button/reply_button.vue

@@ -76,7 +76,6 @@
   }
 
   .interactive {
-    &:hover .svg-inline--fa,
     &.-active .svg-inline--fa {
       color: $fallback--cBlue;
       color: var(--cBlue, $fallback--cBlue);
@@ -89,6 +88,11 @@
     }
 
     @include focused-style {
+      .svg-inline--fa {
+        color: $fallback--cBlue;
+        color: var(--cBlue, $fallback--cBlue);
+      }
+
       .focus-marker {
         visibility: visible;
       }

src/components/retweet_button/retweet_button.vue

@@ -105,7 +105,6 @@
       animation-duration: 0.6s;
     }
 
-    &:hover .svg-inline--fa,
     &.-repeated .svg-inline--fa {
       color: $fallback--cGreen;
       color: var(--cGreen, $fallback--cGreen);
@@ -122,6 +121,11 @@
     }
 
     @include focused-style {
+      .svg-inline--fa {
+        color: $fallback--cGreen;
+        color: var(--cGreen, $fallback--cGreen);
+      }
+
       .focus-marker {
         visibility: visible;
       }