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

[afercia]

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

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:

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.

[afercia]

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

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.

[ramonopoly]

Implementing a placeholder add media button similar to Gutenberg design

[ramonopoly]

43151.diff - Widget add media placeholder buttons

[ramonopoly]

43151.diff - Customize site identity

[ramonopoly]

43151.diff - Customize header video

[afercia]

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

[welcher]

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

[afercia]

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:

• it needs a focus stile for Windows High Contrast mode as well, see https://core.trac.wordpress.org/changeset/44544
• when clicking the button, its text color becomes white on Safari: the :active state needs to be styled
• instead of the colors #edeff0 and #f8f9f9, it would be nice to use the closest colors from the official WP palette, see ​https://make.wordpress.org/design/handbook/design-guide/foundations/colors/ and ​https://codepen.io/hugobaeta/full/RNOzoV/

Will refresh the patch.

[afercia]

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

[afercia]

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

[afercia]

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

[afercia]

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

[welcher]

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

[afercia]

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

[afercia]

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.

[afercia]

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.