From a142df86cfafd30235ffd21cda0e6adeee313702 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Sat, 2 May 2020 23:04:31 -0700
Subject: [PATCH] return focus after PosePicker closes

---
 src/app/PosePicker.js | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/app/PosePicker.js b/src/app/PosePicker.js
index 6afbc74..c0bc7d1 100644
--- a/src/app/PosePicker.js
+++ b/src/app/PosePicker.js
@@ -65,6 +65,7 @@ function PosePicker({
     <Popover
       placement="bottom-end"
       usePortal
+      returnFocusOnClose
       onOpen={onLockFocus}
       onClose={onUnlockFocus}
       initialFocusRef={checkedInputRef}
@@ -99,7 +100,15 @@ function PosePicker({
                 isOpen && "is-open"
               )}
             >
-              <EmojiImage src={twemojiSmile} aria-label="Choose a pose" />
+              {outfitState.emotion === "HAPPY" && (
+                <EmojiImage src={twemojiSmile} alt="Choose a pose" />
+              )}
+              {outfitState.emotion === "SAD" && (
+                <EmojiImage src={twemojiCry} alt="Choose a pose" />
+              )}
+              {outfitState.emotion === "SICK" && (
+                <EmojiImage src={twemojiSick} alt="Choose a pose" />
+              )}
             </Button>
           </PopoverTrigger>
           <PopoverContent>
@@ -109,20 +118,20 @@ function PosePicker({
                   <tr>
                     <th />
                     <Cell as="th">
-                      <EmojiImage src={twemojiSmile} aria-label="Happy" />
+                      <EmojiImage src={twemojiSmile} alt="Happy" />
                     </Cell>
                     <Cell as="th">
-                      <EmojiImage src={twemojiCry} aria-label="Sad" />
+                      <EmojiImage src={twemojiCry} alt="Sad" />
                     </Cell>
                     <Cell as="th">
-                      <EmojiImage src={twemojiSick} aria-label="Sick" />
+                      <EmojiImage src={twemojiSick} alt="Sick" />
                     </Cell>
                   </tr>
                 </thead>
                 <tbody>
                   <tr>
                     <Cell as="th">
-                      <EmojiImage src={twemojiMasc} aria-label="Masculine" />
+                      <EmojiImage src={twemojiMasc} alt="Masculine" />
                     </Cell>
                     <Cell as="td">
                       <PoseButton
@@ -148,7 +157,7 @@ function PosePicker({
                   </tr>
                   <tr>
                     <Cell as="th">
-                      <EmojiImage src={twemojiFem} aria-label="Feminine" />
+                      <EmojiImage src={twemojiFem} alt="Feminine" />
                     </Cell>
                     <Cell as="td">
                       <PoseButton
@@ -321,8 +330,8 @@ function PoseButton({ pose, onChange, inputRef }) {
   );
 }
 
-function EmojiImage({ src, "aria-label": ariaLabel }) {
-  return <Image src={src} aria-label={ariaLabel} width="16px" height="16px" />;
+function EmojiImage({ src, alt }) {
+  return <img src={src} alt={alt} width="16px" height="16px" />;
 }
 
 function usePoses(outfitState) {