For BuddyPress 2.6.0, the core team worked to improve the structure of several extended profile input field types to improve the accessibility of the fields and also make them easier for developers to style. The field types that have been updated are checkboxes, radio buttons, and date boxes.
All three types have been restructured as <fieldset>s with the label for the field residing in the field set’s <legend>.
Checkboxes and radio buttons options have been wrapped in a new <div> with the class input-options and either checkbox-options or radio-button-options. Additionally, the labels for the individual options have been given the class option-label. These changes taken together should make it much easier to target option labels to apply styling. (Goodbye .selector > label + label to catch option labels!)
Date boxes have similarly gained a wrapper <div> with the classes input-options and datebox-selects around the three selects.
Here are some examples of how the code output for these fields has changed:
<!-- Checkbox inputs, before changes -->
<div class="editfield field_2 field_core-makeup optional-field visibility-public alt field_type_checkbox">
<div class="checkbox">
<label for="field_2">Core makeup</label>
<label for="field_11_0"><input name="field_2[]" id="field_11_0" value="Goat" type="checkbox">Goat</label>
<label for="field_12_1"><input name="field_2[]" id="field_12_1" value="Rhinoceros" type="checkbox">Rhinoceros</label>
<label for="field_13_2"><input name="field_2[]" id="field_13_2" value="Slow Loris" type="checkbox">Slow Loris</label>
</div>
</div>
<!-- Checkbox inputs, after changes -->
<div class="editfield field_2 field_core-makeup optional-field visibility-public alt field_type_checkbox">
<fieldset class="checkbox">
<legend>Core makeup</legend>
<div id="field_2" class="input-options checkbox-options">
<label for="field_11_0" class="option-label"><input name="field_2[]" id="field_11_0" value="Goat" type="checkbox">Goat</label>
<label for="field_12_1" class="option-label"><input name="field_2[]" id="field_12_1" value="Rhinoceros" type="checkbox">Rhinoceros</label>
<label for="field_13_2" class="option-label"><input name="field_2[]" id="field_13_2" value="Slow Loris" type="checkbox">Slow Loris</label>
</div>
</fieldset>
</div>
<!-- Radio button inputs, before changes -->
<div class="editfield field_6 field_home-turf optional-field visibility-public field_type_radio">
<div class="radio">
<label for="field_6">Home turf</label>
<div id="field_6">
<label for="option_7"><input name="field_6" id="option_7" value="Honali" type="radio">Honali</label>
<label for="option_8"><input name="field_6" id="option_8" value="Fantastica" type="radio">Fantastica</label>
<label for="option_9"><input name="field_6" id="option_9" value="Toledo" type="radio">Toledo</label>
</div>
</div>
</div>
<!-- Radio button inputs, after changes -->
<div class="editfield field_6 field_home-turf optional-field visibility-public field_type_radio">
<fieldset class="radio">
<legend>Home turf</legend>
<div id="field_6" class="input-options radio-button-options">
<label for="option_7" class="option-label"><input name="field_6" id="option_7" value="Honali" type="radio">Honali</label>
<label for="option_8" class="option-label"><input name="field_6" id="option_8" value="Fantastica" type="radio">Fantastica</label>
<label for="option_9" class="option-label"><input name="field_6" id="option_9" value="Toledo" type="radio">Toledo</label>
</div>
</fieldset>
</div>
<!-- Date box inputs, before changes -->
<div class="editfield field_10 field_birth-date optional-field visibility-public alt field_type_datebox">
<div class="datebox">
<label for="field_10_day">Birth date</label>
<label for="field_10_day" class="bp-screen-reader-text">Select day</label>
<select id="field_10_day" name="field_10_day">
...Day options...
</select>
<label for="field_10_month" class="bp-screen-reader-text">Select month</label>
<select id="field_10_month" name="field_10_month">
...Month options...
</select>
<label for="field_10_year" class="bp-screen-reader-text">Select year</label>
<select id="field_10_year" name="field_10_year">
...Year options...
</select>
</div>
</div>
<!-- Date box inputs, after changes -->
<div class="editfield field_10 field_birth-date optional-field visibility-public alt field_type_datebox">
<fieldset class="datebox">
<legend>Birth date</legend>
<div class="input-options datebox-selects">
<label for="field_10_day" class="bp-screen-reader-text">Select day</label>
<select id="field_10_day" name="field_10_day">
...Day options...
</select>
<label for="field_10_month" class="bp-screen-reader-text">Select month</label>
<select id="field_10_month" name="field_10_month">
...Month options...
</select>
<label for="field_10_year" class="bp-screen-reader-text">Select year</label>
<select id="field_10_year" name="field_10_year">
...Year options...
</select>
</div>
</fieldset>
</div>
These changes represent a continued effort to update and improve BP templates and the markup they use. In this case we’ve aimed for improved accessibility by structuring our form markup using meaningful groupings of semantic elements and homogenized rendering across browsers and devices. If you have styled the above-mentioned form controls, please review your styles and make the necessary changes, if any.
BP Dev Updates 