[buddypress-trac] [BuddyPress Trac] #7348: Accessibility: Group related form elements within fieldsets in Profile > Edit screen

[buddypress-trac]

#7348: Accessibility: Group related form elements within fieldsets in Profile >
Edit screen
------------------------------+-----------------------------
 Reporter:  mercime           |       Owner:
     Type:  enhancement       |      Status:  new
 Priority:  normal            |   Milestone:  Future Release
Component:  Extended Profile  |     Version:
 Severity:  normal            |  Resolution:
 Keywords:  has-patch         |
------------------------------+-----------------------------
Changes (by mercime):

 * keywords:   => has-patch


Comment:

 Attached patches 7348.patch and 7348-alt.patch have the same changes
 except for #2 below with explanations for the differences.

 1/ Extended the `fieldset` already wrapped around the radio, checkbox, and
 datebox fields to include the other form elements related to the
 aforementioned fields.

 2/ Created new  `fieldset`s to surround the select box, multi select box,
 text area, number, text box, and URL fields.
 - in 7348.patch I re-used the content of `label` elements as the content
 of the `legend`s in the new `fieldset`s, then surrounded the same content
 in the `label` element with `<span class="bp-screen-reader-text">` to hide
 the same info from sighted users.
 - in 7348-alt.patch I removed the `label` element of each and appropriated
 the content of the said respective `label` elements to serve as the
 `legend`s for the new `fieldset`s and added `aria-labelledby` attribute on
 each of the `input`, `textarea`, and `select` fields pointing to the
 `legend` element.

 3/ Removed the `UL` and `LI` surrounding the radio controls of the profile
 field visibility settings. Attached screenshot shows the before and after.
 https://cldup.com/ST3qQNREro.jpg

 4/ Kept the Change `button` within `p.field-visibility-settings-toggle`
 and added `<span id="<?php bp_the_profile_field_input_name(); ?>-2">` to
 surround the text within the paragraph which the Change `button` will
 point to in its `aria-describedby` value.

 5/ Moved up the field description to right under the field control and
 above the profile field visibility settings `fieldset`.

 6/ Connected the field controls with respective `aria-describedby` dynamic
 values pointing to the new dynamic `id`s of the field descriptions.

 7/ Updated the localization of the Change `button` on the Profile > Edit
 template for parity with the same element on the Register template.

 8/ Added `role="button"` to the Clear links

--
Ticket URL: <https://buddypress.trac.wordpress.org/ticket/7348#comment:7>
BuddyPress Trac <http://buddypress.org/>
BuddyPress Trac