[wp-trac] [WordPress Trac] #61028: Thickbox modal outputs replacement character in screen reader output

[WordPress Trac]

#61028: Thickbox modal outputs replacement character in screen reader output
----------------------------+----------------------------
 Reporter:  stevejonesdev   |       Owner:  (none)
     Type:  enhancement     |      Status:  new
 Priority:  normal          |   Milestone:  6.6
Component:  Administration  |     Version:  3.8
 Severity:  normal          |  Resolution:
 Keywords:  has-patch       |     Focuses:  accessibility
----------------------------+----------------------------
Changes (by sabernhardt):

 * keywords:  needs-patch => has-patch
 * version:  6.5 => 3.8
 * component:  General => Administration
 * milestone:  Awaiting Review => 6.6


Old description:

> 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
> }}}
>
> [https://www.dropbox.com/s/1xlv1dvvehr9s5p/Screenshot%202024-04-17%20at%204.48.50%20PM.png?dl=0
> / Screenshot]
>
> Expected screen reader output:
>
> {{{
> Close, button
> }}}
>
> [https://www.dropbox.com/s/wyptnkouuqngllj/Screenshot%202024-04-17%20at%204.49.00%20PM.png?dl=0
> / Screenshot]
>
> This can be fixed by addind 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>
> }}}

New description:

 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
 }}}

 [[Image(https://core.trac.wordpress.org/raw-attachment/ticket/61028
 /current-screen-reader-output.png, alt="dashicons character is shown in
 speech viewer with text: 'Close, button, group'", title="")]]

 Expected screen reader output:

 {{{
 Close, button
 }}}

 [[Image(https://core.trac.wordpress.org/raw-attachment/ticket/61028
 /expected-screen-reader-output.png, alt="speech viewer should only show
 text: 'Close, button'", title="")]]

 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>
 }}}

--

Comment:

 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

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/61028#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform