[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:  Awaiting Review
Component:  Extended Profile  |     Version:
 Severity:  normal            |  Resolution:
 Keywords:                    |
------------------------------+------------------------------

Comment (by mercime):

 @dcavins :) Thanks for your question and sorry for the delay. I thought it
 better to show you what I meant with the images below.

 We will have a profile visibility fieldset within each existing and new
 fieldset. It would have been ideal if we didn't have nested fieldsets
 because of the extra noise in some assistive technologies (AT). However,
 the impact here for some AT's at most is that the legend of the main
 fieldset will be repeated along with the legend of the profile visibility
 for the radio buttons. In other ATs, the legend of the main fieldset is
 not repeated at all.

 [[Image(https://cldup.com/Zg2sQTsvNY.png)]]

 As you might have noted in the image above, the field's description has
 been moved above the profile visibility section. This is because the
 description, if any, will be bound to the input field by adding an `id`
 attribute and value to the `<p>` description so that the new `aria-
 describedby` attribute of the text input field with value pointing to the
 new `id` of the `<p>` description and ATs will hear/learn how that field
 is described.

 Then, since the label of that text input field (all fields except
 checkboxes, radio buttons, and date fields) is now the legend for the
 fieldset, we could add an `id` attribute to the legend then add `aria-
 labelledby` attribute to the text input field which points to the `id` of
 the legend. Note that I have only checked this with one screen reader and
 passed as I was making this. Need to double-check how this works with
 other ATs as like the browsers, they have different behaviors for ARIA
 attributes and nested fieldsets. I'm open to other suggestions though.

 e.g.

 {{{
 <div class="editfield field_67 field_text-field optional-field visibility-
 public field_type_textbox">
         <fieldset>
                 <legend id="legend-67">Text Field</legend> <!-- Add ID to
 legend -->
                 <input id="field-67" name="field-67" type="text" aria-
 labelledby="legend-67" aria-describedby="description-67"> <!-- Add aria-
 labelledby and aria-describedby attributes -->
                 <p id="description-67" class="description">Description of
 this text field.</p>

                 <p class="field-visibility-settings-toggle" id="field-
 visibility-settings-toggle-67" tabindex="0"> <!-- add tabindex so that
 this section is included in tab order and read whether they can change
 visibility of the field or not when in "forms" mode -->
                         This field can be seen by: <span class="current-
 visibility-level">Everyone</span>
                         <button type="button" class="visibility-toggle-
 link">Change</a> <!-- Change empty link <a href="#">...</a> to <button> in
 another ticket -->
                 </p>

                 <div class="field-visibility-settings" id="field-
 visibility-settings-67">
                         <fieldset>
                                 <legend>Who can see this field?</legend>
                                 <ul class="radio"> <!-- Checking: do we
 really need the UL and LIs here? -->
                                         <li class="public">
                                                 <label for="see-
 field_67_public">
                                                         <input
 type="radio" id="see-field_67_public" name="field_67_visibility"
 value="public" checked="checked">
                                                         <span class
 ="field-visibility-text">Everyone</span>
                                                 </label>
                                         </li>
                                         <li class="adminsonly">
                                                 <label for="see-
 field_67_adminsonly">
                                                         <input
 type="radio" id="see-field_67_adminsonly" name="field_67_visibility"
 value="adminsonly">
                                                         <span class
 ="field-visibility-text">Only Me</span>
                                                 </label>
                                         </li>
                                         <li class="loggedin">
                                                 <label for="see-
 field_67_loggedin">
                                                         <input
 type="radio" id="see-field_67_loggedin" name="field_67_visibility"
 value="loggedin">
                                                         <span class
 ="field-visibility-text">All Members</span>
                                                 </label>
                                         </li>
                                         <li class="friends">
                                                 <label for="see-
 field_67_friends">
                                                         <input
 type="radio" id="see-field_67_friends" name="field_67_visibility"
 value="friends">
                                                         <span class
 ="field-visibility-text">My Friends</span>
                                                 </label>
                                         </li>
                                 </ul>
                         </fieldset>
                         <button type="button" class="field-visibility-
 settings-close" aria-label="Close to save selection">Close</button> <!--
 add aria-label to explain what closing the button will do ---- Change
 empty link <a href="#">...</a> to <button> in another ticket -->
                 </div>
   </fieldset>
 </div>
 }}}


 Image below shows the prototype I designed so that you can see the
 fieldsets around each profile field.

 [[Image(https://cldup.com/32jwp0TWYk.png)]]

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