From cd7b5d93ee00ffaae7fa0b4a683c50dbcc49bf7a Mon Sep 17 00:00:00 2001
From: Chris Garrity <chrisg@media.mit.edu>
Date: Tue, 23 Jul 2019 16:33:47 -0400
Subject: [PATCH] fix focus styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Don’t use default focus style it’s ugly.
Don’t allow the image to be dragged.
---
src/components/delete-button/delete-button.css | 6 ++++++
src/components/delete-button/delete-button.jsx | 1 +
.../__snapshots__/sprite-selector-item.test.jsx.snap | 2 ++
3 files changed, 9 insertions(+)
diff --git a/src/components/delete-button/delete-button.css b/src/components/delete-button/delete-button.css
index 6abca7ec0..b8f937eff 100644
--- a/src/components/delete-button/delete-button.css
+++ b/src/components/delete-button/delete-button.css
@@ -6,11 +6,17 @@
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 6e84fb983..acbb365a4 100644
--- a/src/components/delete-button/delete-button.jsx
+++ b/src/components/delete-button/delete-button.jsx
@@ -19,6 +19,7 @@ const DeleteButton = props => (
<div className={styles.deleteButtonVisible}>
<img
className={styles.deleteIcon}
+ draggable={false}
src={deleteIcon}
/>
</div>
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 f7f19434a..36e144933 100644
--- a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
+++ b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
@@ -57,6 +57,7 @@ exports[`SpriteSelectorItemComponent matches snapshot when given a number and de
>
<img
className={undefined}
+ draggable={false}
src="test-file-stub"
/>
</div>
@@ -141,6 +142,7 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
>
<img
className={undefined}
+ draggable={false}
src="test-file-stub"
/>
</div>
--
GitLab