Merge pull request #986 from quachtina96/libraryScreenReader

Make libraries screen reader accessible.

src/components/close-button/close-button.jsx

@@ -17,6 +17,7 @@ const CloseButton = props => (
             }
         )}
         role="button"
+        tabIndex="0"
         onClick={props.onClick}
     >
         <img

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

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}

src/index.jsx

 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);

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}