Data views: Improve the checkboxes labels

[afercia]

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:

https://github.com/WordPress/gutenberg/blob/80f0554b9300e95460d7e2d8aea7e5e7081a6e6d/packages/dataviews/src/single-selection-checkbox.js#L22

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

[alexstine]

@afercia I haven't really seen any of the data views work yet as I took a rather long business trip and have been AFK from personal commitments for a bit. I agree, labels should not hold the state as this is already communicated by the form control.

Thanks.

[ntsekouras]

Thanks for the issue! So the suggestion is to just use the item's title, right? I get that we would need to update a bit the table header in table view. Can the label update work better than trunk, even if we don't have the update of the table header in the same PR?

Finally, does the same suggestion stand in grid view too, where the checkbox is inside each item container?