-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Description
Description
In the data views, the checkboxes are associated with visually hidden labels.
Each label text is prefixed with the text Select item:
or Deselect item:
isSelected ? __( 'Deselect item: %s' ) : __( 'Select item: %s' ), |
For clarity purpose, I made the visually hidden labels visible in the screenshot below. Reminder: so far, the checkboxes are visible only on hover, focus, or when they are checked.
I'm not sure a checkbox label text should ever dynamically report the state of the selection. This kind of labeling seems less than ideal to me. The selection state is a native HTML feature and it's already communicated visually and semantically
A label is meant to provide the name of the control, not its state.
Additioally, the current implementation is inspired to the Core list tables. In core, not everything is ideal and over time we couldn't change many things due to technical debt and bacwards compatibility issues. Specifically to these labels, I'm not even sure they should contain the word 'select' or 'deselect'. In a list of checkboxes, I wouldn't ever prefix each label with the those words. In a web form, the context of the checkboxes should be clarified by a fieldset legend. In this case, the checkboxes are in a table column and the context should be clarified by the table header. I will split the table header in a separat eissue but for now I'd recommend to drastically simplify these labels and remove any extraneous text. I'd recommend to keep just the item title.
Additionally, it's unlikely that speech recognition software users would ever be able to easily interact with these checkboxes by issuing a voice command. In fact, the visual labeling is given by the item title (although that's not a label, semantivcally) while the actual accessible name mismatches and it is prefixed with extraneous text.
Cc @joedolson @alexstine @andrewhayward
Step-by-step reproduction instructions
- Go to Site editor > Pages > Manage all pages.
- Hover a table row so that the checkbox becomes visible.
- Inspect the checkbox and observe the associated label element.
- Observe the label text is:
Select item: {title}
. - Check the checkbox.
- Observe the label text becomes:
Deelect item: {title}
.
Screenshots, screen recording, code snippet
No response
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 Gutenberg.
Yes