From 445874cb9cf907e8725c2f9379de36597b1a5184 Mon Sep 17 00:00:00 2001
From: Ray Schamp <rschamp@users.noreply.github.com>
Date: Thu, 8 Aug 2019 10:30:58 -0400
Subject: [PATCH] Revert "Make delete button accessible"
---
.../delete-button/delete-button.css | 6 ---
.../delete-button/delete-button.jsx | 39 ++++----------
.../sprite-selector-item.jsx | 2 +-
src/containers/delete-button.jsx | 52 -------------------
.../sprite-selector-item.test.jsx.snap | 2 -
.../components/sprite-selector-item.test.jsx | 2 +-
6 files changed, 11 insertions(+), 92 deletions(-)
delete mode 100644 src/containers/delete-button.jsx
diff --git a/src/components/delete-button/delete-button.css b/src/components/delete-button/delete-button.css
index b8f937eff..6abca7ec0 100644
--- a/src/components/delete-button/delete-button.css
+++ b/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;
diff --git a/src/components/delete-button/delete-button.jsx b/src/components/delete-button/delete-button.jsx
index c4618d43f..6e84fb983 100644
--- a/src/components/delete-button/delete-button.jsx
+++ b/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;
diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index e3ed71735..458df186f 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.jsx
+++ b/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';
diff --git a/src/containers/delete-button.jsx b/src/containers/delete-button.jsx
deleted file mode 100644
index 600fbcdee..000000000
--- a/src/containers/delete-button.jsx
+++ /dev/null
@@ -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;
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 36e144933..f7f19434a 100644
--- a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
+++ b/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>
diff --git a/test/unit/components/sprite-selector-item.test.jsx b/test/unit/components/sprite-selector-item.test.jsx
index b274d967b..fb103b4ef 100644
--- a/test/unit/components/sprite-selector-item.test.jsx
+++ b/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;
--
GitLab