Thickbox modal outputs replacement character in screen reader output

[stevejonesdev]

In the thickbox modal, the close button dashicon shows as a replacement character (�) in the screen reader output.

Current screen reader output:

Close �, button, group

Expected screen reader output:

Close, button

This can be fixed by adding aria-hidden="true" to the icon span.

<button type="button" id="TB_closeWindowButton">
     <span class="screen-reader-text">Close</span>
     <span class="tb-close-icon" aria-hidden="true"></span>
</button>

[sabernhardt]

dashicons character is part of screen reader output

[sabernhardt]

"Close, button" output without the dashicons character

[sabernhardt]

adding aria-hidden to each Close button

[sabernhardt]

I changed the version to 3.8 because [26395] is when the icon was introduced. For more historical context:

• [22378] added 'tb-close-icon' div
• [26395] replaced PNGs with Dashicons
• [30376] added screen reader text
• [37531] changed link to button

[sabernhardt]

Thanks for the report!

[joedolson]

Changing this from an enhancement to a bug.

[joedolson]

Patch works as expected, and looks good to go.

[joedolson]

In 58167:

Administration: A11y: Hide thickbox close icon from screen readers.

Add aria-hidden="true" to the dashicon symbol used as the close icon in Thickbox modals. Prevent the icon from being read as a replacement character by screen readers.

Props stevejonesdev, sabernhardt, joedolson.
See #61028.

[joedolson]

Closing as fixed; the see reference was supposed to be a fixed.