Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#47944 closed defect (bug) (fixed)

The jQuery UI dialog "close" button misses a focus style

Reported by: afercia's profile afercia Owned by: joedolson's profile joedolson
Milestone: 5.3 Priority: normal
Severity: normal Version: 3.9
Component: Administration Keywords: has-screenshots has-patch
Focuses: ui, accessibility Cc:


In [27494] / #26952 the jQuery UI dialog was restyled to match the rest of the admin styling. That change prevented the focus style to work properly on the "X" close button at the top of the dialog.

To my knowledge, core doesn't use jQuery UI dialog any longer. However, plugins may still use it either directly or via wp.wpdialog. For example:

A clear, visible, focus indication is essential for keyboard users to navigate through a user interface.

Although jQuery UI powered dialogs are legacy, restoring a proper focus style is a matter of a few CSS lines and it's a small improvement I'd like to recommend.

Attachments (1)

47944.diff (1.5 KB) - added by afercia 5 years ago.

Download all attachments as: .zip

Change History (5)

5 years ago

#1 @afercia
5 years ago

  • Keywords has-patch added; needs-patch removed

47944.diff adds the same focus style used for other legacy modal dialogs e.g. the Classic Editor link dialog #wp-link and the "attach to existing content" dialog #find-posts:

#2 @joedolson
5 years ago

  • Owner set to joedolson
  • Status changed from new to assigned

I don't see any reason this can't go in as is; the patch looks good, it's a simple thing to do, and is consistent with other UI elements.

I think that as long as something like this exists in core, it should meet core requirements, even if core is no longer using it directly.

#3 @joedolson
5 years ago

  • Status changed from assigned to accepted

#4 @afercia
5 years ago

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

In 45931:

Accessibility: Improve focus styles for legacy modal dialogs powered by jQuery UI.

Fixes #47944.

Note: See TracTickets for help on using tickets.