Description

This issue stems from the work done in #38152

In many places throughout Gutenberg, we render SVGs with role="img" but we do not include an aria-label. At first glance this may seem ok because in all instances we also have something like this:

<svg role="img" aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
      ...
</svg>

However in my reading about a11y, I don't believe aria-hidden="true" focusable="false" is sufficient here. Since we are including role="img", there should also be an aria-label as described here in the MDN Wed Docs. Now I am by no means a a11y expert, so I would love someone else to confirm or deny this issue.

If it is an issue, the solution appears to be very simple. We just remove role="img" from all these SVGs since they are intended to be hidden from screen readers anyway. They are purely decoration and/or have other descriptive text that is readable by screen readers.

If someone can confirm, I am happy to put together this PR.

Offending files/blocks:

• Navigation Link
• Navigation Submenu
• Navigation
• Page List
• Social Link

Step-by-step reproduction instructions

1. Using the latest version of Gutenberg, add a Social Icons block to the page.
2. Add a couple social links
3. Preview the page on the frontend and notice role="img" being added to all SVG icons.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes