OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

return focus after PosePicker closes

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-05-02 23:04:31 -07:00
parent 5ea717c391
commit a142df86cf
1 changed files with 17 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/app/PosePicker.js
View file

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