wip accessible emoji picker

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/styles/components/detailed-status.scss

@@ -94,6 +94,22 @@
       transform: translateY(-1px);
     }
   }
+
+  .emoji-picker-expand {
+    display: none;
+  }
+
+  &:focus-within {
+    .emoji-picker-expand {
+      display: inline-flex;
+      width: 0;
+      overflow: hidden;
+
+      &:focus-within {
+        width: unset;
+      }
+    }
+  }
 }
 
 .detailed-status__wrapper {

app/styles/components/emoji-reacts.scss

@@ -80,7 +80,8 @@
   transition: 0.1s;
   z-index: 999;
 
-  &--visible {
+  &--visible,
+  &--focused {
     opacity: 1;
     pointer-events: all;
   }
@@ -99,7 +100,8 @@
       transition: 0.1s;
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
       img {
         width: 36px;
         height: 36px;

app/styles/components/status.scss

@@ -434,7 +434,8 @@
     background: var(--brand-color--med);
     transition: 0.2s;
 
-    &:hover {
+    &:hover,
+    &:focus {
       background: hsla(var(--brand-color_hsl), 0.5);
       text-decoration: none;
     }
@@ -676,3 +677,22 @@ a.status-card.compact:hover {
     border-radius: 4px;
   }
 }
+
+.status__action-bar,
+.detailed-status__action-bar {
+  .emoji-picker-expand {
+    display: none;
+  }
+
+  &:focus-within {
+    .emoji-picker-expand {
+      display: inline-flex;
+      width: 0;
+      overflow: hidden;
+
+      &:focus-within {
+        width: unset;
+      }
+    }
+  }
+}