Voting: animate card's voted indicator on focus / blur (aragon#1034)

ConsiderItDone · Nov 22, 2019 · 2ee52b5 · 2ee52b5
1 parent 1df0ac0
commit 2ee52b5
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/apps/voting/app/src/components/VoteCard/VoteCard.js b/apps/voting/app/src/components/VoteCard/VoteCard.js
@@ -50,15 +50,19 @@ function VoteCard({ vote, onOpen }) {
   const handleOpen = useCallback(() => {
     onOpen(voteId)
   }, [voteId, onOpen])
+  const handleStartHighlight = useCallback(() => setHighlighted(true), [])
+  const handleEndHighlight = useCallback(() => setHighlighted(false), [])
 
   // “highlighted” means either focused or hovered
   const [highlighted, setHighlighted] = useState(false)
 
   return (
     <Card
       onClick={handleOpen}
-      onMouseEnter={() => setHighlighted(true)}
-      onMouseLeave={() => setHighlighted(false)}
+      onMouseEnter={handleStartHighlight}
+      onMouseLeave={handleEndHighlight}
+      onFocus={handleStartHighlight}
+      onBlur={handleEndHighlight}
       css={`
         display: grid;
         grid-template-columns: 100%;