Skip to:
Content

Opened 3 years ago

Closed 3 years ago

Last modified 2 years ago

#6531 closed defect (bug) (fixed)

Accessibility bp-legacy templates: Controls and media elements should have labels or aria-labelledby

Reported by: mercime Owned by:
Milestone: 2.4 Priority: normal
Severity: normal Version:
Component: Core Keywords: has-patch needs-testing good-first-bug
Cc:

Description (last modified by mercime)

Found one issue and decided to do a sweep of the templates rendered. Accessibility issues were found in the following:

  • What’s New - for textarea
  • Change Avatar (upload) - for input element
  • Change Avatar (take photo) - for video element
  • Notifications - for select and inputs
  • Messages (inbox)- for input (checkboxes)
  • Messages (starred)- for input (checkboxes)
  • Messages (sent)- for input (checkboxes)
  • Messages (compose)- for input and textarea
  • Messages (responding to message) - for textarea
  • Settings (general) - for input (pass2)
  • Settings (email) - for all input-type radios
  • Settings (profile visibility) - for all select elements
  • Group (send invites) - for all input elements
  • Group (manage details) - for input element
  • Group (manage photo) - for input element

Attachments (17)

6531-whats-new-label.patch (1.1 KB) - added by mercime 3 years ago.
Add label to the What’s New textarea.
6531-notifications.patch (1.9 KB) - added by mercime 3 years ago.
6531-change-avatar-upload.patch (970 bytes) - added by mercime 3 years ago.
6531-group-manage-details.patch (712 bytes) - added by mercime 3 years ago.
6531-message-compose.patch (1.3 KB) - added by mercime 3 years ago.
6531-message-respond.patch (644 bytes) - added by mercime 3 years ago.
6531-notifications.2.patch (2.0 KB) - added by mercime 3 years ago.
6531-settings-general.patch (1.1 KB) - added by mercime 3 years ago.
6531-change-avatar-upload.2.patch (1.1 KB) - added by mercime 3 years ago.
6531-settings-email.patch (8.9 KB) - added by mercime 3 years ago.
6531-settings-profile-visibility.patch (937 bytes) - added by mercime 3 years ago.
6531-messages-inbox-starred-sent.patch (1011 bytes) - added by mercime 3 years ago.
6531-settings-email.2.patch (10.4 KB) - added by mercime 3 years ago.
6531-whats-new-label.2.patch (1.5 KB) - added by mercime 3 years ago.
6531-change-avatar-upload.3.patch (1.1 KB) - added by imath 3 years ago.
6531.bpuploader-wpadmin.patch (506 bytes) - added by imath 3 years ago.
6531.bpuploader-wpadmin.alternative.patch (1.2 KB) - added by imath 3 years ago.

Download all attachments as: .zip

Change History (54)

@mercime
3 years ago

Add label to the What’s New textarea.

#1 @mercime
3 years ago

Attached patch to add label to the What’s New textarea.

#2 @mercime
3 years ago

Attached patch to add label to the Change Avatar upload input element.

#3 @mercime
3 years ago

  • Description modified (diff)

#4 @mercime
3 years ago

Attached patch add labels to the select and input elements in the Notifications screens.

#5 @imath
3 years ago

About 6531-change-avatar-upload.patch, apart from a line feed i don't see any difference, am i missing something ?

#6 @DJPaul
3 years ago

  • Keywords has-patch needs-testing good-first-bug added
  • Milestone changed from Awaiting Review to 2.4

#7 @mercime
3 years ago

@imath Sorry about that. I replaced the patch I originally uploaded. It worked in the test install but white-screened when I tested the patch in another installation.

#8 @mercime
3 years ago

Attached patches as follows:

6531-group-manage-details.patch

  • Add missing ID to the select tag as label is bound to the ID not name in a group's Manage > Details screen.

6531-message-compose-patch

  • Add label for input tag in Messages > Compose screen.
  • Bind the label to the textarea ID and not name, in same screen.

6531-message-respond.patch

  • Add label for textarea shown when you respond to a message.

6531-notifications.2.patch -replacement

  • Bind the label tag to the select tag ID and not name in the notifications template.
  • Add label for the input tag in the notifications loop.

6531-settings-general.patch

  • Add label to input tag in the member's Settings > General screen.
Last edited 3 years ago by mercime (previous) (diff)

#9 @imath
3 years ago

No problemo, as this part is built dynamically in JS a can imagine the problem. Could you add the patch back even if it's not working, i'll try to see why.

#10 follow-up: @mercime
3 years ago

Merci @imath. Attached 6531-change-avatar-upload.2.patch fixes accessibility for "Member > Change Avatar" and "Group - Manage > Photo" screens, and it's working :)

Last edited 3 years ago by mercime (previous) (diff)

#11 @mercime
3 years ago

Also attaching additional patches:

6531-settings-email.patch

  • Add labels to input tags in the Settings > Email screen.

6531-settings-profile-visibility.patch

  • Add IDs to select tags in the Profile Visibility screen.
  • Add labels to select tags as well.

#12 in reply to: ↑ 10 @imath
3 years ago

Replying to mercime:

Merci @imath. Attached 6531-change-avatar-upload.2.patch fixes accessibility for "Member > Change Avatar" and "Group - Manage > Photo" screens, and it's working :)

Ok will check it out asap. Thanks a lot.

#13 @mercime
3 years ago

Thanks @imath :)

Attached patches as follows:

6531-messages-inbox-starred-sent.patch

  • Add label and screen reader text to messages.loop. Fixes accessibility for Messages' Inbox, Sent, and Starred screens noted in original post.

6531-settings-email.2.patch - replacement

  • Improve previous patch by adding text for screen readers
Last edited 3 years ago by mercime (previous) (diff)

#14 @mercime
3 years ago

6531-whats-new-label.1.patch - added label to a select tag

#15 @imath
3 years ago

@mercime, tested the 6531-change-avatar-upload.2.patch. I'm not sure the title attribute for the input (type=button) is necessary as there is a label element. According to this site, using the title attribute for an input is only advised when adding a label is not possible.

So i'm suggesting 6531-change-avatar-upload.3.patch. If you're ok with this, i'll still need to test the patch on Internet Explorer and touch devices to be completely sure there's no problem before committing it :)

#16 @mercime
3 years ago

@imath Thank you for your patch. Two thumbs up. I agree that the title attribute is redundant, 'twas a careless mistake on my part.

Last edited 3 years ago by mercime (previous) (diff)

#17 @imath
3 years ago

In 9978:

Avatar UI: Improve the accessibility of the uploader view

Props mercime

See #6531

#18 @mercime
3 years ago

@imath unfortunately the automated accessibility check missed what a manual check (second step) would have found in the Avatar UI as reported in forums https://buddypress.org/support/topic/request-feature-improvement-to-help-visually-challenged-people/

Confirmed the issue reported above using keyboard navigation: Use Tab key to navigate the profile photo upload page, and then use the Enter key to open up the file selection window when you focus on the input. Keyboard navigation works in wp-admin/media-new.php upload UI where the Space bar in addition to the Enter key works in this case because input type="button", same as in the _attachment/uploader.php.

Would appreciate your help in resolving this for the blind BP user. Thanks.

#19 @imath
3 years ago

I'm sorry, i'm not sure to understand what i need to do. Just tested and it's possible to tab to the upload button and then hit space or enter to open the file browser. The only thing that differs from the WordPress media editor is that the button does not have blue borders to inform it has the focus.

What should we do ?

Should we add a role attribute eg: role="browse" to the input ?
Should we add a css rule to add borders, but this is visual so.. ?

i'm not a specialist :(

#20 @mercime
3 years ago

@imath Thank you for checking the issue. I tested in another laptop and the keyboard navigation is working. I rebooted the first laptop where I tested the report locally and tested at your wpserveur site using FF/Chrome/IE and keyboard nav is now working after reboot. Strange that this happened in the first place. I will contact the OP again. Thanks again.

#21 @imath
3 years ago

no problem :) Weird i agree. Hope it will be ok.

#22 @imath
3 years ago

in r9978 i forgot the case when the BP Uploader is loaded inside the WP Admin > Users > Extended profile.

We have 2 choices :

  • Add a css rule to src/bp-core/admin/css/common.css > see 6531.bpuploader-wpadmin.patch
  • Or simply use 'screen-reader-text' instead of 'bp-screen-reader-text' if is_admin() > see 6531.bpuploader-wpadmin.alternative.patch

What is the best one ?

#23 @imath
3 years ago

In 10051:

BuddyPress Uploader Accessibility: "screen-reader" classes

Use the "screen-reader-text" class inside the WP Administration and use the "bp-screen-reader-text" one into the front-end.

See #6531

#24 @mercime
3 years ago

In 10078:

Fix 'for' value of label in Messages > Compose.

Accessibility fix to bind label and textarea by matching the 'for'
value of the label tag with the 'id' value of the textarea input
field in the Message > Compose template.

See #6531

#25 @mercime
3 years ago

In 10079:

Fix 'for' value of label in Notifications page.

Accessibility fix to bind label and select field by matching the 'for'
value of the label tag with the 'id' value of select field rendered
in the Notifications page.

See #6531.

#26 @mercime
3 years ago

In 10080:

Add 'id' attribute to "Notify group members of these changes" input element.

Accessibility fix to add the missing 'id' attribute of checkbox field to
match the 'for' value of associated label tag in Groups > Manage >
Details page.

See #6531.

#27 @mercime
3 years ago

In 10081:

Add label and 'id' for radio input type.

Accessibility fix which adds a label for every radio input field
generated in the Settings > Notifications page when any or all of the
following components are activated: Activity, Friends, Groups, and/or
Messages.

See #6531.

#28 @mercime
3 years ago

In 10082:

Add label and 'id' for select control field.

Accessibility fix which adds a label for every select form control, as
seen in Settings > Profile, that is dynamically generated whenever a
profile field added by a site administrator is set to a visibility level
that allows any member to override it.

See #6531.

#29 @mercime
3 years ago

In 10083:

Add label and 'id' for checkboxes in Messages.

Accessibility fix adds label tag and dynamic 'id' for every checkbox form
control generated in the Messages screens.

See #6531.

#30 @mercime
3 years ago

In 10085:

Add label tags for Activity post form controls.

Accessibility fix which adds label tags for textarea and select fields
in the Activity status update form for logged in users.

See #6531.

#31 @mercime
3 years ago

In 10086:

Add label for checkbox in Messages > Compose.

Accessibility fix adds label tag for checkbox input field to send the
notice to all users in the Messages > Compose screen.

See #6531.

#32 @mercime
3 years ago

In 10087:

Add label for textarea in Messages screen.

Accessibility fix adds label tag to the textarea form control to reply
to the message received in the view message screen.

See #6531.

#33 @mercime
3 years ago

In 10088:

Add label for checkbox in all Notifications.

Accessibility fix adds label tag for every checkbox form control generated
in the Notifications screens.

See #6531.

#34 @mercime
3 years ago

In 10089:

Add label for the password confirmation input field.

Accessibility fix in the Settings > General page.

See #6531.

#35 @DJPaul
3 years ago

@mercime is there more to do here?

#36 @mercime
3 years ago

  • Resolution set to fixed
  • Status changed from new to closed

@DJPaul Will be moving the video issue in another ticket and closing this ticket now. Thanks :)

#37 @DJPaul
2 years ago

  • Component changed from API to Core
Note: See TracTickets for help on using tickets.