"Notice" Block: Dissmissible Button not accessible for screenreader users

[00travelgirl00]

Describe the bug
Screen reader user can't access the control button "Dismiss" for Notice Blocks.

The "Dismiss" notice is a div. it should be a Button, as it has an action.

Also it should provide a alt-text for svg or screen reader text via screen-reader-class in WordPress.

To Reproduce
Steps to reproduce the behavior:

1. Create "Notice" Block and add the state "Dismissible
2. Publish Post and read it with a Screen Reader (VoiceOver for Mac or NVDA for Windows for example). Alternativ open dev tools in Browser
3. you can't access button for "Dismiss" via Screen reader

Expected behavior
If you read a post with a screen reader you are supposed to do any action a mouse user can do.

While reading the notice you should first hear the Title, than the message, than access the button for dismiss.

It is important to first hear the whole message, bevor coming to the "Dismiss" Button, otherwise the screen reader user would miss out the notice message.

The "Dismiss" Action should be also possible for screen reader users, as it takes more time to consume websites with screen readers.

The Action "Dismiss" should be really clear, that you disable the message. So the Screen reader text should be "Dismiss [title of notification]"

Screenshots
I have made a little Video:
Clip for behavior with screen reader (not listet) https://youtu.be/REMX11Zqqz8

Version

• Atomic Blocks 2.8.3
• WordPress 5.4.1

Device and browser information

• OS: Mojave 10.14.6
• Safari 13.1
• VoiceOver

Additional context
Not sure how the exact solution is, as I'm not a Developer. But I'm happy to test, if you have a PR.

[mindctrl]

@00travelgirl00 thank you for the detailed report!