diff --git a/src/components/delete-button/delete-button.css b/src/components/delete-button/delete-button.css index 6abca7ec00c1ad04569236b4c3db73c53c02d1da..b8f937eff75853b49e364244d63cab3c03940182 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 6e84fb983f3bffe4813e9fc9eb6a91105217ea3c..acbb365a444469fe9a4413812519ebfd3930ba9e 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 f7f19434a6109bf1772637da5b6e80ccc1a04143..36e1449333f0819bdf3f4fb123a75a706cb19b59 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>