fix: make attachement removal button static & more visible #1067

[dilinger]

The black background makes it a lot more obvious, and let's always leave it there rather than requiring a mouseover. Added the translated text as an aria-label for screenreaders/a11y, because "X" isn't super descriptive.

Description

This takes a chainsaw to the existing image deletion button in the PublishAttachement component, but.. It's currently really hard to find/see, as described in #1067 and #1283. It also makes it stylishly consistent w/ the Edit button.

This fixes #1067. Tested on both my laptop (firefox 102) and my phone (android 11).

Additional context

---

What is the purpose of this pull request?

• [X] Bug fix
• [ ] New Feature
• [ ] Documentation update
• [ ] Translations update
• [ ] Other

Before submitting the PR, please make sure you do the following

• [ ] Read the Contributing Guidelines.
• [ ] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• [ ] Provide related snapshots or videos.
• [ ] Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).

[stackblitz[bot]]

Run & review this pull request in StackBlitz Codeflow.

[netlify[bot]]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	26d65b80f39288658e0d07ead78f4b2d4f1b5f3f
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/63cbc392834d03000871bd76

[netlify[bot]]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	26d65b80f39288658e0d07ead78f4b2d4f1b5f3f
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/63cbc39208277b0008334c4d
😎 Deploy Preview	https://deploy-preview-1286--elk-zone.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[dilinger]

Oh yeah, here's what it looks like on firefox:

[antfu]

Can we keep using the icon instead of the char X? And also would be better to make the button square

[dilinger]

Um, square or round? I personally like it square so that it matches both the image itself as well as the Edit button.

[patak-dev]

I think it should be a circle, we have other icon action buttons that are circles too.

[Servelan]

Can't see the image delete icon (using the web version). This is an accessibility issue, btw.

[edimitchel]

We should probably use an invert filter to be sure the contrast is respected.

[dilinger]

Alright, how's this? Here's what it looks like on my end:

[Servelan]

Accessibility would suggest a bigger x (50% bigger).  Good background, good contrast, however.

On 1/21/2023 12:06 AM, dilinger wrote:

Alright, how's this? Here's what it looks like on my end:

Screenshot-2023-01-21,03-05-32 https://user-images.githubusercontent.com/11581730/213857121-74844ea1-bd4e-4eb2-8af5-3ca839193eed.png

— Reply to this email directly, view it on GitHub https://github.com/elk-zone/elk/pull/1286#issuecomment-1399204272, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB6VAZIPAU2PR26MX3WVDV3WTOKJZANCNFSM6AAAAAAT62VIRY. You are receiving this because you commented.Message ID: @.***>

[patak-dev]

@Servelan PR or issue welcome about the 50% bigger, thanks for your feedback