Merge pull request #5076 from LLK/revert-5017-fix-up-delete-button

Revert "Make delete button accessible"

src/components/delete-button/delete-button.css

@@ -6,17 +6,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
     user-select: none;
     cursor: pointer;
     transition: all 0.15s ease-out;
 }
 
-.delete-button:focus {
-    outline: none;
-    box-shadow: 0px 0px 0px 4px $motion-transparent;
-}
-
 .delete-button-visible {
   display: flex;
   align-items: center;

src/components/delete-button/delete-button.jsx

@@ -1,60 +1,39 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import {defineMessages, injectIntl, intlShape} from 'react-intl';
 
 import styles from './delete-button.css';
 import deleteIcon from './icon--delete.svg';
 
-const messages = defineMessages({
-    delete: {
-        id: 'gui.deleteButton.delete',
-        description: 'Title of the button to delete a sprite, costume or sound',
-        defaultMessage: 'Delete'
-    }
-});
-
-const DeleteButtonComponent = ({
-    className,
-    intl,
-    onClick,
-    setRef,
-    tabIndex,
-    ...props
-}) => (
+const DeleteButton = props => (
     <div
-        aria-label={intl.formatMessage(messages.delete)}
+        aria-label="Delete"
         className={classNames(
             styles.deleteButton,
-            className
+            props.className
         )}
-        ref={setRef}
         role="button"
-        tabIndex={tabIndex}
-        onClick={onClick}
-        {...props}
+        tabIndex={props.tabIndex}
+        onClick={props.onClick}
     >
         <div className={styles.deleteButtonVisible}>
             <img
                 className={styles.deleteIcon}
-                draggable={false}
                 src={deleteIcon}
             />
         </div>
     </div>
+
 );
 
-
-DeleteButtonComponent.propTypes = {
+DeleteButton.propTypes = {
     className: PropTypes.string,
-    intl: intlShape,
     onClick: PropTypes.func.isRequired,
-    setRef: PropTypes.func.isRequired,
     tabIndex: PropTypes.number
 };
 
-DeleteButtonComponent.defaultProps = {
+DeleteButton.defaultProps = {
     tabIndex: 0
 };
 
-export default injectIntl(DeleteButtonComponent);
+export default DeleteButton;

src/components/sprite-selector-item/sprite-selector-item.jsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import DeleteButton from '../../containers/delete-button.jsx';
+import DeleteButton from '../delete-button/delete-button.jsx';
 import styles from './sprite-selector-item.css';
 import {ContextMenuTrigger} from 'react-contextmenu';
 import {DangerousMenuItem, ContextMenu, MenuItem} from '../context-menu/context-menu.jsx';

src/containers/delete-button.jsx

@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import bindAll from 'lodash.bindall';
-
-import DeleteButtonComponent from '../components/delete-button/delete-button.jsx';
-
-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 (
-            <DeleteButtonComponent
-                className={this.props.className}
-                setRef={this.setRef}
-                tabIndex={this.props.tabIndex}
-                onClick={this.props.onClick}
-            />
-        );
-    }
-}
-
-DeleteButton.propTypes = {
-    className: PropTypes.string,
-    onClick: PropTypes.func.isRequired,
-    tabIndex: PropTypes.number
-};
-
-DeleteButton.defaultProps = {
-    tabIndex: 0
-};
-
-export default DeleteButton;

test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap

@@ -57,7 +57,6 @@ exports[`SpriteSelectorItemComponent matches snapshot when given a number and de
     >
       <img
         className={undefined}
-        draggable={false}
         src="test-file-stub"
       />
     </div>
@@ -142,7 +141,6 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
     >
       <img
         className={undefined}
-        draggable={false}
         src="test-file-stub"
       />
     </div>

test/unit/components/sprite-selector-item.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {mountWithIntl, shallowWithIntl, componentWithIntl} from '../../helpers/intl-helpers.jsx';
 import SpriteSelectorItemComponent from '../../../src/components/sprite-selector-item/sprite-selector-item';
-import DeleteButton from '../../../src/containers/delete-button.jsx';
+import DeleteButton from '../../../src/components/delete-button/delete-button';
 
 describe('SpriteSelectorItemComponent', () => {
     let className;