WordPress.org

Make WordPress Core

Opened 22 months ago

Closed 9 months ago

#43151 closed defect (bug) (fixed)

Media widgets shouldn't use a clickable div as an UI control

Reported by: afercia Owned by: afercia
Milestone: 5.2 Priority: normal
Severity: normal Version: 4.8
Component: Widgets Keywords: has-screenshots has-patch
Focuses: ui, accessibility, javascript Cc:
PR Number:

Description

All the new media widgets (image, audio, video, gallery) display a media "placeholder":

https://cldup.com/niQGhcAASo.png

It has a double functionality:

  • it displays an informative message, e.g. "No image selected"
  • it's clickable to open the media modal

However, this clickable placeholder is actually a clickable <div> element. Elements that are non-natively interactive shouldn't be used as UI controls. In the last years. WordPress has been progressively addressing this issue across the whole admin interface, trying to use semantic and natively interactive elements instead.

The introduction of clickable <div> elements in core is a regression compared to the best practices used in the last years. Additionally, it's an accessibility barrier, as these elements can only be used with a pointing device and there's no way to use them with other devices, e.g. with a keyboard.

The same issue was discussed at length for the similar "placeholders" in the customizer, see #34323. There was also a discussion on Slack with different opinions, which highlighted how such a pattern is controversial.

Regardless of all the feedback, suggestions, and expertise provided previously, these clickable <div> elements are now implemented in the media widgets. Worth noting they just duplicate the functionality of the "Add media" buttons placed below them.

They also introduce a new inconsistency in core: in the Customizer there are other "placeholders" that visually look the same but they're not clickable:

https://cldup.com/Pfbgq2z4yW.png

We've discussed again this pattern in a recent weckly accessibility meeting on Slack, and agreed on all the points previously discussed.

The root cause of the issue is this placeholder is visually designed to look like a clickable control. However, it's labeled just with an informative message. Since it's immediately followed by an "Add media" button that does the same thing, it's not clear why the placeholder should be clickable in the first place.

As pointed out in all the resources linked above, it should be either a real button (thus, the Add Media button would be redundant) or be just text, and look like just text.

Attachments (7)

43151.diff (6.3 KB) - added by ramonopoly 14 months ago.
Implementing a placeholder add media button similar to Gutenberg design
Screen Shot 2018-10-03 at 6.06.15 pm.png (100.0 KB) - added by ramonopoly 14 months ago.
43151.diff - Widget add media placeholder buttons
Screen Shot 2018-10-03 at 6.06.59 pm.png (95.2 KB) - added by ramonopoly 14 months ago.
43151.diff - Customize site identity
Screen Shot 2018-10-03 at 6.07.08 pm.png (62.9 KB) - added by ramonopoly 14 months ago.
43151.diff - Customize header video
43151.2.diff (8.8 KB) - added by afercia 10 months ago.
43151.3.diff (8.5 KB) - added by afercia 9 months ago.
43151.4.diff (37.2 KB) - added by afercia 9 months ago.

Download all attachments as: .zip

Change History (31)

#1 @afercia
22 months ago

  • Summary changed from Media widget shouldn't use a clickable div as an UI control to Media widgets shouldn't use a clickable div as an UI control

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


22 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


22 months ago

#4 @afercia
22 months ago

  • Milestone changed from Awaiting Review to Future Release

#5 @afercia
14 months ago

Worth noting a similar case in Gutenberg was solved simply removing the second button and making the "visual placeholder" a button:

http://cldup.com/qkWlzb9k9g.png

Special care should be taken when crafting the button text: it should not indicate the state (No image selected). Instead, it should indicate the available action: "Select image". The only presence of the button implies the state (no image selected).

It would be nice to align with the Gutenberg implementation.

This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.


14 months ago

#7 @afercia
14 months ago

  • Keywords needs-patch added
  • Milestone changed from Future Release to 5.0

@ramonopoly
14 months ago

Implementing a placeholder add media button similar to Gutenberg design

#8 @ramonopoly
14 months ago

  • Keywords needs-testing has-patch added; needs-patch removed

@ramonopoly
14 months ago

43151.diff - Widget add media placeholder buttons

@ramonopoly
14 months ago

43151.diff - Customize site identity

@ramonopoly
14 months ago

43151.diff - Customize header video

#9 @pento
13 months ago

  • Milestone changed from 5.0 to 5.1

#10 @afercia
10 months ago

  • Milestone changed from 5.1 to 5.2

Unfortunately we're running out of time for 5.1. It's a bit unfortunate clickable divs have been introduced in recent development cycles, this should never happen. However, this ticket still needs a clear direction and review. Punting to 5.2 (because there's a patch) and pinging the Widgets component maintainers @westonruter @welcher

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


10 months ago

#12 @welcher
10 months ago

Patch looks fine to me.

I'd like someone who knows the CSS better to say if renaming the placeholder class to placeholder-button is an issue, however. cc @afercia

#13 @afercia
10 months ago

Thanks @welcher and @ramonopoly ! Yep, not a big issue but it would be nice to use a different name for the CSS class. Also, quickly testing:

  • the button needs a focus style otherwise the browsers native focus style will be used:

http://cldup.com/1YtkyCKBRU.png

Will refresh the patch.

#14 @afercia
10 months ago

Just realized in the WP color palette on Codepen some light grays values are missing :)

@afercia
10 months ago

#15 @afercia
10 months ago

43151.2.diff

  • updates the CSS class name
  • adds the focus style
  • removes a couple <label> elements used for buttons: buttons don't need to be associated to labels

It would be great to address also the case of the Header image: it still uses a placeholder "div" that looks like a clickable thingy. It should be a "Add header image" button, while the other buttons should appear only when there's an image. I guess it can be addressed separately. /Cc @welcher

http://cldup.com/Bv5CsywIYK.png

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


10 months ago

#17 @afercia
10 months ago

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

#18 @afercia
10 months ago

Realized the QUnit test needs to be updated. @westonruter @welcher any feedback on the actual usefulness of these tests would be great, I guess they haven't been updated for a while...

This ticket was mentioned in Slack in #core-customize by afercia. View the logs.


9 months ago

@afercia
9 months ago

#20 @afercia
9 months ago

43151.3.diff refreshes the patch. @westonruter @welcher I'd need some feedback, when you have a chance. Thanks!

#21 @welcher
9 months ago

@afercia patch looks good to me - thanks for pushing forward on this!

#22 @afercia
9 months ago

@welcher thanks. Does anything in the QUnit test needs to be updated? I have the feeling they're a bit out of date.

@afercia
9 months ago

#23 @afercia
9 months ago

  • Keywords needs-testing removed

Although the QUnit tests were passing, they were running on an outdated index.html file. 43151.4.diff updates it with the most recent versions of the widget templates.

#24 @afercia
9 months ago

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

In 44796:

Accessibility: Replace media placeholder clickable divs with buttons.

<button> elements are natively interactive, supported by any assistive technology, and must be used instead of non-semantic, non-accessible <div> elements.

Also, this change aligns the Media Widgets and the Customizer site icon and site logo controls with the design pattern used in the new Block Editor for similar controls.

Props ramonopoly, welcher, afercia.
Fixes #43151.

Note: See TracTickets for help on using tickets.