[wp-trac] [WordPress Trac] #33085: Customizer: controls description inside labels are not real labels nor descriptions

[WordPress Trac]

#33085: Customizer: controls description inside labels are not real labels nor
descriptions
-------------------------------+-----------------------------
 Reporter:  afercia            |      Owner:
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Customize          |    Version:  4.2
 Severity:  normal             |   Keywords:
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 Splitting this out from #32493 (which changed its scope)

 I'd propose to investigate about the Customizer controls descriptions.
 Currently, they're inside the label element. The result is they're not a
 proper form label, since labels should be short. Longer descriptions
 should be associated with form controls using `aria-describedby`.

 As consequence for accessibility: as soon as a form control is focused,
 its label gets read out. In the following example from the new "Site Icon"
 functionality in 4.3, all the text highlighted in the blue box will be
 read out but the actual button text "Select File" won't.
 [http://www.w3.org/TR/html5/forms.html#category-label Buttons can have
 labels], that's correct HTML, but of course the label text will override
 the button text.

 Not to mention all the label text is clickable and will activate the
 button when clicked.

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

 Same for input fields, the control description used as label will be read
 out as... a label.

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

 Related: #31540

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