[wp-trac] [WordPress Trac] #47141: Radio and checkbox labels rely on implicit association

[WordPress Trac]

#47141: Radio and checkbox labels rely on implicit association
-------------------------------------------------+-------------------------
 Reporter:  anevins                              |       Owner:  afercia
     Type:  defect (bug)                         |      Status:  assigned
 Priority:  normal                               |   Milestone:  5.3
Component:  Media                                |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots wpcampus-report      |     Focuses:
  form-controls has-patch commit                 |  accessibility
-------------------------------------------------+-------------------------
Changes (by afercia):

 * keywords:  has-screenshots needs-patch wpcampus-report form-controls =>
     has-screenshots wpcampus-report form-controls has-patch commit


Comment:

 [attachment:"47141.diff"] changes ''all'' the media views labels (at least
 the ones I could find) from implicitly associated (wrapping) labels to
 implicitly associated (with for/id attributes).

 It's a big patch and I'd like to commit it soon in this release cycle, as
 I think that's the most efficient way to test it. I tested it as best as I
 can, also on Windows and Internet Explorer 11.

 **To limit the CSS changes as much as possible I took this approach:**
 - a `<span class="setting">` now wraps most of the inputs + labels
 - though it's an additional element, in most of the cases this replaces
 the previous wrapping `<label class="setting">`
 - the new span element is the only way to address this issue
 programmatically in a consistent way and allows to keep the CSS changes
 pretty contained
 - I did my best to provide some backwards compatibility for plugins that
 may use custom views and get the styles from core

 I do expect some minor CSS glitches and I'd tend to think the best way to
 discover and fix them is to commit this patch so the testers base gets
 larger. Following fixes can go in additional patches attached to this
 ticket. Testing and reports greatly appreciated, especially for the
 responsive views with breakpoints at 900 and 600 pixels.

 **Trying to recap the most relevant changes:**
 - changes the media views form controls to have explicitly associated
 labels with for/id attributes
 - adds a few missing labels / aria-labels
 - improves a few existing labels / aria-labels
 - improves semantics in a few places, by adding visually hidden headings,
 fieldset + legend elements, aria-describedby attributes
 - improves the image custom size input fields and their labelling
 - adds `role="status"` to the "saved" indicator
 - swaps the columns order in the image details template, to make visual
 and DOM order match
 - swaps the "Replace" and "Back" buttons order in the Replace Image view,
 to make visual and DOM order match
 - gallery settings: move checkbox label to the right: checkboxes are
 supposed to have labels on the right
 - merge similar strings, unified to "Drop files to upload" (removed "Drop
 files here", and "Drop files anywhere to upload")
 - also makes the "upload-ui" consistent across the media views
 - hides the IE 11 "X" -ms-clear button in the Insert from URL field, as it
 conflicts with the spinner
 - adds comments to all the media templates to clarify their usage
 - increases vertical spacing between form fields in the media sidebar
 - removes some CSS selectors introduced as back-compat for WordPress
 pre-4.4
 - removes some CSS still targeting Internet Explorer 7 and 8

 Todo: update the QUnit index file.

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