Accessible emoiji picker

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

app/styles/components/detailed-status.scss

@@ -87,6 +87,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,7 @@
   transition: 0.1s;
   z-index: 999;
 
-  &--visible {
+  &--visible, &--focused {
     opacity: 1;
     pointer-events: all;
   }
@@ -99,7 +99,7 @@
       transition: 0.1s;
     }
 
-    &:hover {
+    &:hover, &:focus {
       img {
         width: 36px;
         height: 36px;

app/styles/components/status.scss

@@ -666,3 +666,21 @@ 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;
+      }
+    }
+  }
+}