WordPress.org

Make WordPress Core

Opened 8 weeks ago

Closed 7 weeks ago

#47944 closed defect (bug) (fixed)

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

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

Description

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:

http://cldup.com/q2kgTSQGbG.png

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 8 weeks ago.

Download all attachments as: .zip

Change History (5)

@afercia
8 weeks ago

#1 @afercia
8 weeks 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:

http://cldup.com/qDXo2Xe_yS.png

#2 @joedolson
8 weeks 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
8 weeks ago

  • Status changed from assigned to accepted

#4 @afercia
7 weeks 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.