[wp-trac] [WordPress Trac] #34323: Make customizer media control placeholders clickable

[WordPress Trac]

#34323: Make customizer media control placeholders clickable
-------------------------------------------------+-------------------------
 Reporter:  NateWr                               |       Owner:
     Type:  enhancement                          |  celloexpressions
 Priority:  normal                               |      Status:  assigned
Component:  Customize                            |   Milestone:  4.6
 Severity:  normal                               |     Version:  4.1
 Keywords:  has-patch needs-testing ui-feedback  |  Resolution:
  ux-feedback                                    |     Focuses:  ui,
                                                 |  accessibility
-------------------------------------------------+-------------------------

Comment (by afercia):

 @celloexpressions I'm sorry my personal opinion hasn't changed. I will ask
 again also the other a11y team members. When using screen readers or other
 assistive technologies the `Tab` key is not the only way to navigate
 through content. With all the screen readers I've tested with, using
 arrows to navigate I can reach the placeholder and activate it. NVDA
 announces both the label and the placeholder as "clickable" elements, see
 below:

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

 So trying to recap what [attachment:34323.2.diff] does:
 - as far as I see it works only on the background image control, not on
 the header image control for example
 - clicking the "Background Image" label opens the modal
 - clicking the "placeholder" opens the modal
 - clicking the button opens the modal
 - all the 3 controls can be reached and activated with a screen reader
 - the button is announced as "Background Image" because screen readers
 read the associated label, not the button content

 From an accessibility perspective, this is far from ideal. I'd say the
 same also from an UI and design perspective. I still think the idea behind
 this patch tries to solve a problem introducing another problem.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/34323#comment:33>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform