Merge branch 'accessible-emoji-picker' into 'develop'

Keyboard-accessible emoji picker

See merge request soapbox-pub/soapbox-fe!634

app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap

@@ -2,55 +2,80 @@
 
 exports[`<EmojiSelector /> renders correctly 1`] = `
 <div
-  className="emoji-react-selector"
+  onBlur={[Function]}
+  onFocus={[Function]}
+  tabIndex="-1"
 >
-  <button
+  <div
-    className="emoji-react-selector__emoji"
+    className="emoji-react-selector"
-    dangerouslySetInnerHTML={
+    onBlur={[Function]}
-      Object {
+  >
-        "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"👍\\" title=\\":+1:\\" src=\\"/emoji/1f44d.svg\\" />",
+    <button
+      className="emoji-react-selector__emoji"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"👍\\" title=\\":+1:\\" src=\\"/emoji/1f44d.svg\\" />",
+        }
       }
-    }
+      onClick={[Function]}
-  />
+      onKeyUp={[Function]}
-  <button
+      tabIndex={-1}
-    className="emoji-react-selector__emoji"
+    />
-    dangerouslySetInnerHTML={
+    <button
-      Object {
+      className="emoji-react-selector__emoji"
-        "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"❤\\" title=\\":heart:\\" src=\\"/emoji/2764.svg\\" />",
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"❤\\" title=\\":heart:\\" src=\\"/emoji/2764.svg\\" />",
+        }
       }
-    }
+      onClick={[Function]}
-  />
+      onKeyUp={[Function]}
-  <button
+      tabIndex={-1}
-    className="emoji-react-selector__emoji"
+    />
-    dangerouslySetInnerHTML={
+    <button
-      Object {
+      className="emoji-react-selector__emoji"
-        "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😆\\" title=\\":laughing:\\" src=\\"/emoji/1f606.svg\\" />",
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😆\\" title=\\":laughing:\\" src=\\"/emoji/1f606.svg\\" />",
+        }
       }
-    }
+      onClick={[Function]}
-  />
+      onKeyUp={[Function]}
-  <button
+      tabIndex={-1}
-    className="emoji-react-selector__emoji"
+    />
-    dangerouslySetInnerHTML={
+    <button
-      Object {
+      className="emoji-react-selector__emoji"
-        "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😮\\" title=\\":open_mouth:\\" src=\\"/emoji/1f62e.svg\\" />",
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😮\\" title=\\":open_mouth:\\" src=\\"/emoji/1f62e.svg\\" />",
+        }
       }
-    }
+      onClick={[Function]}
-  />
+      onKeyUp={[Function]}
-  <button
+      tabIndex={-1}
-    className="emoji-react-selector__emoji"
+    />
-    dangerouslySetInnerHTML={
+    <button
-      Object {
+      className="emoji-react-selector__emoji"
-        "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😢\\" title=\\":cry:\\" src=\\"/emoji/1f622.svg\\" />",
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😢\\" title=\\":cry:\\" src=\\"/emoji/1f622.svg\\" />",
+        }
       }
-    }
+      onClick={[Function]}
-  />
+      onKeyUp={[Function]}
-  <button
+      tabIndex={-1}
-    className="emoji-react-selector__emoji"
+    />
-    dangerouslySetInnerHTML={
+    <button
-      Object {
+      className="emoji-react-selector__emoji"
-        "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😩\\" title=\\":weary:\\" src=\\"/emoji/1f629.svg\\" />",
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😩\\" title=\\":weary:\\" src=\\"/emoji/1f629.svg\\" />",
+        }
       }
-    }
+      onClick={[Function]}
-  />
+      onKeyUp={[Function]}
+      tabIndex={-1}
+    />
+  </div>
 </div>
 `;

app/soapbox/locales/pl.json

@@ -403,6 +403,7 @@
   "keyboard_shortcuts.notifications": "aby otworzyć kolumnę powiadomień",
   "keyboard_shortcuts.pinned": "aby przejść do listy przypiętych wpisów",
   "keyboard_shortcuts.profile": "aby przejść do profilu autora wpisu",
+  "keyboard_shortcuts.react": "aby zareagować na wpis",
   "keyboard_shortcuts.reply": "aby odpowiedzieć",
   "keyboard_shortcuts.requests": "aby przejść do listy próśb o możliwość śledzenia",
   "keyboard_shortcuts.search": "aby przejść do pola wyszukiwania",
@@ -707,6 +708,7 @@
   "status.reactions.like": "Lubię",
   "status.reactions.open_mouth": "Wow",
   "status.reactions.weary": "Nuda…",
+  "status.reactions_expand": "Wybierz emoji",
   "status.read_more": "Czytaj dalej",
   "status.reblog": "Podbij",
   "status.reblog_private": "Podbij dla odbiorców oryginalnego wpisu",

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

@@ -677,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;
+      }
+    }
+  }
+}