fix(a11y): add a11y to modal close button svg

[sardesam]

Because

• We want ensure all user interactions meet accessibility standards

This pull request

• Adds a11y attributes to modal close button svg

Issue that this pull request solves

Closes: #12921

Checklist

Put an x in the boxes that apply

• My commit is GPG signed.
• If applicable, I have modified or added tests which pass locally.
• I have added necessary documentation (if appropriate).
• I have verified that my changes render correctly in RTL (if appropriate).

Screenshots (Optional)

N/A

Other information (Optional)

The <svg> can be hidden from screen readers since the parent <button> already has an aria-label associated with it, and <svg> is being used strictly for visual purposes.

[StaberindeZA]

r+

Just out of curiosity, is there a reason you went with aria-hidden over adding aria-labelledby.

[sardesam]

In this particular situation, aria-labelledby wasn't needed (I did also test out of curiosity, and to verify). There are a few different ways one can code a (single) button without text. A few examples (not all) include:

1. no aria attribute on the button, but text inside the button that is automatically read by the screen reader, and optional graphic (usually hidden - unless it really adds to the context and purpose of the button in some way)
2. an aria-labelledby attribute on the button, attached to a label inside the button or another labelled element explaining the purpose of the button
3. an aria-label on the button, no text or label, and non-text graphic inside

Although option 1 is always preferred, it's fairly common to see option 3 in this scenario, particularly the top right-hand corner of a modal (option 2 happens but there's a lot more factors to consider; I usually see it for information 'tooltips'/'bubbles' or non-button elements like tables with visually-hidden headers or charts, etc.).

For option 3, the 'X' is strictly a visual aid for sighted users. Whether they use a screen reader or not, they know it's a button and can infer its purpose. But non-sighted users will only see what they hear and because the button includes an aria-label describing its exact purpose, it's not necessary to even mention the existence of or focus on the 'X' graphic.