From f7a73b568ac08a5af90a0a6b9cd1a24096de8e4d Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Wed, 1 May 2019 19:23:19 -0700
Subject: [PATCH] improve keyboard navigation with escape to close

---
 components/BackgroundSelect.js |  2 ++
 components/Popout.js           | 14 ++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/components/BackgroundSelect.js b/components/BackgroundSelect.js
index 21ffc66..d457b32 100644
--- a/components/BackgroundSelect.js
+++ b/components/BackgroundSelect.js
@@ -38,6 +38,8 @@ class BackgroundSelect extends React.PureComponent {
           selected={isVisible}
           className={`bg-select-display ${isVisible ? 'is-visible' : ''}`}
           onClick={toggleVisibility}
+          background="white"
+          hoverBackground="white"
         >
           <div className="bg-color-alpha" />
           <div className="bg-color" />
diff --git a/components/Popout.js b/components/Popout.js
index dd1c63e..e319de3 100644
--- a/components/Popout.js
+++ b/components/Popout.js
@@ -15,6 +15,20 @@ export const managePopout = WrappedComponent => {
 
     handleClickOutside = () => this.setState({ isVisible: false })
 
+    handleKeyDown = e => {
+      if (e.key === 'Escape') {
+        this.handleClickOutside()
+      }
+    }
+
+    componentDidMount() {
+      document.addEventListener('keydown', this.handleKeyDown)
+    }
+
+    componentWillUnmount() {
+      document.removeEventListener('keydown', this.handleKeyDown)
+    }
+
     render() {
       return (
         <WrappedComponent