[wp-trac] [WordPress Trac] #62548: Move checkbox input outside of the wrapping `label` element.

[WordPress Trac]

#62548: Move checkbox input outside of the wrapping `label` element.
-----------------------------+----------------------------
 Reporter:  kkmuffme         |       Owner:  (none)
     Type:  defect (bug)     |      Status:  new
 Priority:  low              |   Milestone:  6.8
Component:  Administration   |     Version:
 Severity:  trivial          |  Resolution:
 Keywords:  has-patch close  |     Focuses:  accessibility
-----------------------------+----------------------------
Changes (by sabernhardt):

 * keywords:  has-patch => has-patch close
 * priority:  normal => low


Comment:

 > There's no impact on styles

 Yes, moving the checkboxes outside of (and before) their labels would have
 at least two issues just with Core styles, and plugins can make the
 situation worse.

 1. The checkbox and label text need some kind of wrapping element to keep
 them together across multiple rows (comment:3).
 2. The checkboxes have a 6-pixel right margin that would become
 unclickable if the input is outside the label.
 3. [https://wpdirectory.net/search/01JEERG0XG2APYDJ2CERR7Q6BD Plugin
 styles and scripts] target the labels—even to **hide or remove** them—and
 some styles target inputs inside labels.

 The first two issues theoretically could be fixed by adding a wrapper
 `span` and by reassigning the 6 pixels to the left padding of the label.
 {{{
 .metabox-prefs .new-wrapper-span-class-name {
         display: inline-block;
 }
 .metabox-prefs .new-wrapper-span-class-name input {
         margin-right: 0;
 }
 .metabox-prefs .new-wrapper-span-class-name input + label {
         padding-left: 6px;
 }
 }}}

 Looking at a few
 [https://wpdirectory.net/search/01JEERG0XG2APYDJ2CERR7Q6BD plugins from
 the search results], I did not find a //specific// problem with explicit
 labels. Plugins that include
 [https://github.com/farinspace/wpalchemy/blob/29d870ff51788cf8213449c39b4210b774291b08
 /wp-content/wpalchemy/MetaBox.php#L775 WPAlchemy] might not use its
 `.remove()` script to remove screen options. The Themify plugins would
 hide the label (yet show the checkbox) if no options are available, but I
 had option fields with both Themify Popup and Themify Portfolio Post when
 adding a new item.

 Ultimately, however, I do not want to force any extenders to update their
 code because of a 'trivial' and 'relatively low priority' change. The
 admin redesign should avoid implicit labels, and I would prefer to wait
 until then to worry about it.

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