diff --git a/src/components/close-button/close-button.jsx b/src/components/close-button/close-button.jsx
index e90bd1d64b892306ecb613d15e6c2d891fc9d576..039a8750b7ae108506a2077c07ad2e66496c1217 100644
--- a/src/components/close-button/close-button.jsx
+++ b/src/components/close-button/close-button.jsx
@@ -17,6 +17,7 @@ const CloseButton = props => (
             }
         )}
         role="button"
+        tabIndex="0"
         onClick={props.onClick}
     >
         <img
diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx
index 0f1443e36363fbba8dbbc89c9474163ef64ac23c..04e5c08056b05d7247f34dde0d558ce9c99b2a9b 100644
--- a/src/components/library-item/library-item.jsx
+++ b/src/components/library-item/library-item.jsx
@@ -10,15 +10,30 @@ class LibraryItem extends React.PureComponent {
     constructor (props) {
         super(props);
         bindAll(this, [
+            'handleBlur',
             'handleClick',
+            'handleFocus',
+            'handleKeyPress',
             'handleMouseEnter',
             'handleMouseLeave'
         ]);
     }
+    handleBlur () {
+        this.props.onBlur(this.props.id);
+    }
+    handleFocus () {
+        this.props.onFocus(this.props.id);
+    }
     handleClick (e) {
         this.props.onSelect(this.props.id);
         e.preventDefault();
     }
+    handleKeyPress (e) {
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            this.props.onSelect(this.props.id);
+        }
+    }
     handleMouseEnter () {
         this.props.onMouseEnter(this.props.id);
     }
@@ -48,7 +63,12 @@ class LibraryItem extends React.PureComponent {
         ) : (
             <Box
                 className={styles.libraryItem}
+                role="button"
+                tabIndex="0"
+                onBlur={this.handleBlur}
                 onClick={this.handleClick}
+                onFocus={this.handleFocus}
+                onKeyPress={this.handleKeyPress}
                 onMouseEnter={this.handleMouseEnter}
                 onMouseLeave={this.handleMouseLeave}
             >
@@ -73,6 +93,8 @@ LibraryItem.propTypes = {
     iconURL: PropTypes.string.isRequired,
     id: PropTypes.number.isRequired,
     name: PropTypes.string.isRequired,
+    onBlur: PropTypes.func,
+    onFocus: PropTypes.func,
     onMouseEnter: PropTypes.func.isRequired,
     onMouseLeave: PropTypes.func.isRequired,
     onSelect: PropTypes.func.isRequired
diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 91ac1117b6606e4b900de26f433f5342f4ee634b..92066eca3d60e62e22d203bd2afb70fa2f3f4400 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -11,8 +11,10 @@ class LibraryComponent extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
+            'handleBlur',
             'handleFilterChange',
             'handleFilterClear',
+            'handleFocus',
             'handleMouseEnter',
             'handleMouseLeave',
             'handleSelect'
@@ -22,6 +24,12 @@ class LibraryComponent extends React.Component {
             filterQuery: ''
         };
     }
+    handleBlur (id) {
+        this.handleMouseLeave(id);
+    }
+    handleFocus (id) {
+        this.handleMouseEnter(id);
+    }
     handleSelect (id) {
         this.props.onRequestClose();
         this.props.onItemSelected(this.getFilteredData()[id]);
@@ -65,6 +73,8 @@ class LibraryComponent extends React.Component {
                                 id={index}
                                 key={`item_${index}`}
                                 name={dataItem.name}
+                                onBlur={this.handleBlur}
+                                onFocus={this.handleFocus}
                                 onMouseEnter={this.handleMouseEnter}
                                 onMouseLeave={this.handleMouseLeave}
                                 onSelect={this.handleSelect}
diff --git a/src/index.jsx b/src/index.jsx
index e55fc0ef4d29ef81ff2e8f970b9e932a6412a967..e6f35044060725497597a3de5e125d89fe18693d 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import Modal from 'react-modal';
 
 import AppStateHOC from './lib/app-state-hoc.jsx';
 import GUI from './containers/gui.jsx';
@@ -18,4 +19,6 @@ const appTarget = document.createElement('div');
 appTarget.className = styles.app;
 document.body.appendChild(appTarget);
 
+Modal.setAppElement(appTarget);
+
 ReactDOM.render(<App />, appTarget);
diff --git a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
index 22b12a467fe94868401db9c26d292214f153f259..62c177e38ba2b9fee6808cb0d5ee37a75bf37a6a 100644
--- a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
+++ b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
@@ -16,6 +16,7 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
     className=""
     onClick={[Function]}
     role="button"
+    tabIndex="0"
   >
     <img
       className={undefined}