Accessibility: settings checkbox labels are not unique

[joedolson]

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

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]

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]

closed with #145

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