Make WordPress Core

Opened 6 weeks ago

Closed 9 days ago

#61028 closed defect (bug) (fixed)

Thickbox modal outputs replacement character in screen reader output

Reported by: stevejonesdev's profile stevejonesdev Owned by: joedolson's profile joedolson
Milestone: 6.6 Priority: normal
Severity: normal Version: 3.8
Component: Administration Keywords: has-patch commit
Focuses: accessibility Cc:

Description (last modified by sabernhardt)

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

dashicons character is shown in speech viewer with text: 'Close, button, group'

Expected screen reader output:

Close, button

speech viewer should only show text: '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>

Attachments (3)

current-screen-reader-output.png (12.8 KB) - added by sabernhardt 5 weeks ago.
dashicons character is part of screen reader output
expected-screen-reader-output.png (11.4 KB) - added by sabernhardt 5 weeks ago.
"Close, button" output without the dashicons character
61028.diff (4.4 KB) - added by sabernhardt 5 weeks ago.
adding aria-hidden to each Close button

Download all attachments as: .zip

Change History (9)

@sabernhardt
5 weeks ago

dashicons character is part of screen reader output

@sabernhardt
5 weeks ago

"Close, button" output without the dashicons character

@sabernhardt
5 weeks ago

adding aria-hidden to each Close button

#1 @sabernhardt
5 weeks ago

  • Component changed from General to Administration
  • Description modified (diff)
  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to 6.6
  • Version changed from 6.5 to 3.8

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

#2 @sabernhardt
5 weeks ago

Thanks for the report!

#3 @joedolson
12 days ago

  • Owner set to joedolson
  • Status changed from new to accepted
  • Type changed from enhancement to defect (bug)

Changing this from an enhancement to a bug.

#4 @joedolson
12 days ago

  • Keywords commit added

Patch works as expected, and looks good to go.

#5 @joedolson
12 days ago

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.

#6 @joedolson
9 days ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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

Note: See TracTickets for help on using tickets.