[buddypress-trac] [BuddyPress Trac] #6678: Simplify CSS targeting of radio and checkbox label fields.

[buddypress-trac]

#6678: Simplify CSS targeting of radio and checkbox label fields.
----------------------------------+-----------------------------
 Reporter:  dcavins               |      Owner:
     Type:  enhancement           |     Status:  new
 Priority:  normal                |  Milestone:  Awaiting Review
Component:  Component - XProfile  |    Version:  2.3.3
 Severity:  normal                |   Keywords:  has-patch
----------------------------------+-----------------------------
 Currently, our markup for a radio group or checkbox group looks like this:

 {{{
 <div class="editfield field_35 field_best-tusks required-field visibility-
 adminsonly field_type_radio">
     <div class="radio">
       <label for="field_35">Best Tusks <span class="bp-required-field-
 label"> (required)</span></label>
       <div id="field_35">
         <label for="option_72"><input type="radio" name="field_35"
 id="option_72" value="Unicorn">Unicorn</label>
         <label for="option_73" ><input type="radio" name="field_35"
 id="option_73" value="Bicorn">Bicorn</label>
         <label for="option_74"><input type="radio" name="field_35"
 id="option_74" value="Triceratops">Triceratops</label>
       </div>
     </div>

     <!-- visibility toggle and settings normally go here, removed for
 simplicity -->

     <p class="description">Which is the superior number of tusks or
 horns?</p>
 </div>
 }}}

 It would be easier to target the label for the checkbox or radio group
 separately from each option's label (without resorting to descendant
 selectors or similar) if there were a little more info, like adding
 classes like `option-group-label` or `option-label`:

 {{{
 <div class="editfield field_35 field_best-tusks required-field visibility-
 adminsonly field_type_radio">
     <div class="radio">
       <label for="field_35" class="option-group-label">Best Tusks <span
 class="bp-required-field-label"> (required)</span></label>
       <div id="field_35">
         <label for="option_72" class="option-label"><input type="radio"
 name="field_35" id="option_72" value="Unicorn">Unicorn</label>
         <label for="option_73" class="option-label"><input type="radio"
 name="field_35" id="option_73" value="Bicorn">Bicorn</label>
         <label for="option_74" class="option-label"><input type="radio"
 name="field_35" id="option_74" value="Triceratops">Triceratops</label>
       </div>
     </div>

     <!-- visibility toggle and settings normally go here, removed for
 simplicity -->

     <p class="description">Which is the superior number of tusks or
 horns?</p>
 </div>
 }}}

 This is easy to do, so I'll attach a patch that accomplishes that, but in
 thinking about this, I was wondering if this is a good use case for a
 fieldset and legend.

 {{{
 <div class="editfield field_35 field_best-tusks required-field visibility-
 adminsonly field_type_radio">
     <fieldset class="radio">
       <legend>Best Tusks <span class="bp-required-field-label">
 (required)</span></legend>
         <label for="option_72"><input type="radio" name="field_35"
 id="option_72" value="Unicorn">Unicorn</label>
         <label for="option_73"><input type="radio" name="field_35"
 id="option_73" value="Bicorn">Bicorn</label>
         <label for="option_74"><input type="radio" name="field_35"
 id="option_74" value="Triceratops">Triceratops</label>
     </fieldset>

     <!-- visibility toggle and settings normally go here, removed for
 simplicity -->

     <p class="description">Which is the superior number of tusks or
 horns?</p>
 </div>
 }}}

 @hnla, @mercime, do you have opinions on any of this?

--
Ticket URL: <https://buddypress.trac.wordpress.org/ticket/6678>
BuddyPress Trac <http://buddypress.org/>
BuddyPress Trac