From c1d65419010c120f778d950d8ae78455df9e36f9 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 2 Mar 2023 21:55:16 -0500
Subject: [PATCH] Make post status form use focused-style

---
 src/_mixins.scss                                     | 12 ++++++++++++
 src/components/post_status_form/post_status_form.vue | 11 +++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/_mixins.scss b/src/_mixins.scss
index e99fe26f..b96d2318 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -16,3 +16,15 @@
     @content;
   }
 }
+
+@mixin focused-style-with($selectors...) {
+  @include focused-style {
+    @content;
+  }
+
+  @each $selector in $selectors {
+    #{$selector} {
+      @content;
+    }
+  }
+}
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 86c1f907..9b32aa18 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/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,
-    &:hover {
+    @include focused-style-with("&.selected") {
       // 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);
         }