Accessibility: Change sitewide notices "Close" controls to semantic buttons

[mercime]

Change "close" empty link, <a href="#"...>, to <button> element in the sitewide notices markup showing up in either the widget or under the admin bar.

[slaFFik]

What about the same concept that is used in is-dismissable (or similar) class for notices in wp-admin area?
Mainly the x "button" on the right side of the notice.

[mercime]

alternatives

[mercime]

@slaFFik Could do that for the sitewide notice under admin bar. Attached 2 new images for both scenarios. I am partial to simply changing the link to a button element though :)

[johnjamesjacoby]

This is a welcome change.

How about a combination of keeping the text but floating it to the right? Visually, I'd want it to be aligned with the top-most line of text, and with a right-margin that's equal to the left-margin of the top line of text. Does that make sense? Kinda like how the admin-notices in wp-admin work currently?

[DJPaul]

@mercime If you can finish this and get it into trunk very soon, feel free to move this ticket back to 2.8.

[mercime]

Replying to johnjamesjacoby:

How about a combination of keeping the text but floating it to the right? Visually, I'd want it to be aligned with the top-most line of text, and with a right-margin that's equal to the left-margin of the top line of text. Does that make sense? Kinda like how the admin-notices in wp-admin work currently?

Sorry I was delayed. Per your feedback, new patch tested with long subject title and text plus screenshot are attached .

Replying to DJPaul:

@mercime If you can finish this and get it into trunk very soon, feel free to move this ticket back to 2.8.

Swamped at the time to do complete at the time for 2.8 :(

[mercime]

7421.4.patch​ uses the new BP tooltip introduced in #7188
New screenshot attached - new button element on Twenty Seventeen.

[mercime]

In 11582:

Accessibility: Change empty link in Sitewide Notice to a button element.

Using semantic markup like the button element instead of an empty anchor link
like href=# in this case, helps us improve accessibility for all users.

Props mercime, slaFFik, johnjamesjacoby.
Fixes #7421.