[wp-trac] [WordPress Trac] #43151: Media widget shouldn't use a clickable div as an UI control

[WordPress Trac]

#43151: Media widget shouldn't use a clickable div as an UI control
-------------------------------------------+-----------------------------
 Reporter:  afercia                        |      Owner:
     Type:  defect (bug)                   |     Status:  new
 Priority:  normal                         |  Milestone:  Awaiting Review
Component:  Widgets                        |    Version:  4.8
 Severity:  normal                         |   Keywords:  has-screenshots
  Focuses:  ui, accessibility, javascript  |
-------------------------------------------+-----------------------------
 All the new media widgets (image, audio, video, gallery) display a media
 "placeholder":

 [[Image(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,
 [https://core.trac.wordpress.org/query?keywords=~semantic-buttons 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
 [https://wordpress.slack.com/archives/C02S78ZAL/p1462228081000246
 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:

 [[Image(https://cldup.com/Pfbgq2z4yW.png)]]

 We've discussed again this pattern in a
 [https://wordpress.slack.com/archives/C02RP4X03/p1516038456000043 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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/43151>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform