Add the undo button to cancel video removal.

[derekherman]

Summary

Fixes #86
Fixes #96

• Adds a "Undo" button to cancel individual video removal.
• Removes invalid <button> markup. Buttons may not contain interactive content, which among others means <img> elements.
• Added tabindex attributes and role="button" to spans instead to keep things accessible.

2021-03-12_10-22-20.mp4

[dero]

This also fixes #96 – marking in the description.

@derekherman, could you please share what issues you encountered when you first merged this? Or – if we decide to not go with this update – please let me know and I'll cherry pick the changes necessary to fix #96 into a new PR.

[merapi]

• Removes invalid <button> markup. Buttons may not contain interactive content, which among others means <img> elements.

This is valid markup (check the usemap part).

And to just confirm with W3C:
<button><img usemap="#map" alt="..." src="..." /></button> =

<button><img alt="..." src="..." /></button> = ✅

That change also broke the accessibility (keyboard usage is now broken).

[dero]

I stand corrected, @merapi, and will revert the unnecessary change. 👍

[dero]

@derekherman I merged the latest develop in and I'm not seeing any issues. Can you please re-test?

[dero]

@derekherman Fixed the issues with download buttons.

• db4d4cb

I have not fixed the issue with downloaded videos dimming out incorrectly, because #104 changes the whole system anyway and fixes the issue.

If you don't want to deal with the two PRs separately and deal with merge conflicts, I merged the branches together into:

• https://github.com/xwp/web-dev-media/tree/update/undo-and-connection

Feel free to use it for testing and open a PR from that branch if you don't want to deal with merge conflicts.

[derekherman]

@dero this appears to have had the connection PR merged in, as well.