WordPress / wp-feature-notifications

WP Feature Notifications - a proposal to modernise the way in which WordPress handles emails, admin notices and user notifications
https://wordpress.github.io/wp-feature-notifications/
GNU General Public License v2.0
189 stars 19 forks source link

Accessibility: settings checkbox labels are not unique #110

Closed joedolson closed 1 year ago

joedolson commented 2 years ago

Description

Each notification source 's collection of checkboxes has the same ID. IDs should be unique, with unique labels. With these relationships, the accessible name produced for any given will be unpredictable, depending on how that browser selects the labeling value when there are multiple IDs with different values. (In Chrome, for example, the 'SMS' checkbox comes up with no accessible name.)

In the current model, these settings are difficult to parse non-visually, since they have three separate parts (table row heading, table column heading, 'Show In' instructive text, and the label itself.

I'd suggest remodeling these settings using fieldset/legend relationships so that the context of each grouping is more manageable.

At minimum, the label values need to be unique; perhaps using aria-describedby to associate with the visible headings instead of using a visually hidden label element.

Step-by-step reproduction instructions

  1. Inspect code.
  2. Observe the duplicated IDs.

Screenshots, screen recording, code snippet

image

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except WP Feature Notifications.

Yes

erikyo commented 1 year ago

This one is related to a commit that has been reverted because it didn't address the scope of #92 (furthermore coding standards needed to be fixed). I reopen because it will be moved into a dedicated PR

erikyo commented 1 year ago

closed with #145

https://github.com/WordPress/wp-feature-notifications/pull/145/files#diff-c8ae8b0d03b0f11bcf4f7a601722e23bdacc8bf0ebfa49bd6a1fbbb89c245864R180-R188