From 1b4b50b09a8ae03298786fb26a404ca144743d07 Mon Sep 17 00:00:00 2001
From: Chris Garrity <chrisg@media.mit.edu>
Date: Fri, 26 Jul 2019 09:37:39 -0400
Subject: [PATCH] Make space and enter actually work if focused
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

If the delete button is the current active element (e.g. focused by tab) make hitting ‘space’ or ‘Enter’ do the actual delete.
---
 .../delete-button/delete-button.jsx           | 69 +++++++++++++------
 1 file changed, 48 insertions(+), 21 deletions(-)

diff --git a/src/components/delete-button/delete-button.jsx b/src/components/delete-button/delete-button.jsx
index acbb365a4..62dfcc08a 100644
--- a/src/components/delete-button/delete-button.jsx
+++ b/src/components/delete-button/delete-button.jsx
@@ -1,31 +1,58 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import bindAll from 'lodash.bindall';
 import classNames from 'classnames';
 
 import styles from './delete-button.css';
 import deleteIcon from './icon--delete.svg';
 
-const DeleteButton = props => (
-    <div
-        aria-label="Delete"
-        className={classNames(
-            styles.deleteButton,
-            props.className
-        )}
-        role="button"
-        tabIndex={props.tabIndex}
-        onClick={props.onClick}
-    >
-        <div className={styles.deleteButtonVisible}>
-            <img
-                className={styles.deleteIcon}
-                draggable={false}
-                src={deleteIcon}
-            />
-        </div>
-    </div>
-
-);
+class DeleteButton extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleKeyPress',
+            'setRef'
+        ]);
+    }
+    componentDidMount () {
+        document.addEventListener('keydown', this.handleKeyPress);
+    }
+    componentWillUnmount () {
+        document.removeEventListener('keydown', this.handleKeyPress);
+    }
+    setRef (ref) {
+        this.ref = ref;
+    }
+    handleKeyPress (event) {
+        if (this.ref === event.currentTarget.activeElement && (event.key === 'Enter' || event.key === ' ')) {
+            this.props.onClick(event);
+            event.preventDefault();
+        }
+    }
+    render () {
+        return (
+            <div
+                aria-label="Delete"
+                className={classNames(
+                    styles.deleteButton,
+                    this.props.className
+                )}
+                ref={this.setRef}
+                role="button"
+                tabIndex={this.props.tabIndex}
+                onClick={this.props.onClick}
+            >
+                <div className={styles.deleteButtonVisible}>
+                    <img
+                        className={styles.deleteIcon}
+                        draggable={false}
+                        src={deleteIcon}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
 
 DeleteButton.propTypes = {
     className: PropTypes.string,