Make the entire .check-column the click target for the checkbox

[mitchoyoshitaka]

Sometimes checkboxes are quite small. In various list tables, checkboxes are wrapped in a .check-column. Why not make the entire .check-column clickable, in case people (like me) miss?

[lessbloat]

Looks good to me. In 21516.2.diff I updated the patch, and made a slight tweak to include this functionality for the "check all" checkboxes in the table header row.

[TacoVerdo]

Current patch breaks checking.
Cannot use check all anymore.

[joostdevalk]

Looked at this with @TacoVerdo, this needs a new patch if we want to fix it that ties into the check all functionality. Right now it doesn't check all when it should and doesn't check the current checkbox when you click it.

[karmatosed]

This would be great to have as an enhancement, we discussed this in our weekly design triage and it would be great to have implemented. Could we get a new patch for this?

[audrasjb]

The patch is 9 years old and needs refresh. Adding accessibility focus and 2nd-opinion. I don't think it's safe for 5.9 as it is now. Let's move to future release. Feel free to bring it back to 5.9 if a working patch is ready to go.

[joedolson]

We think this could be beneficial for accessibility by providing a larger click target for users. The JS solution isn't really necessary; if we make the label a block-level element filling the table cell & move the screen reader text class to an internal span, then we get this behavior for free.

We may want to add some kind of hover state to provide affordance that the entire cell is clickable, although the mouse cursor will provide a clue there.

[sabernhardt]

proof of concept with labels that cover their entire cell

[sabernhardt]

21516.3.diff would need some polishing (indentation to meet coding standards, etc.). Note that it does not affect the Select All checkboxes on the Updates page because those have a label in a separate cell. The hover style uses the same box-shadow as the focus style, which might confuse some mouse users after they select a checkbox and hover over another.

[oglekler]

@sabernhardt does it mean that an element needs to lose focus after the mouse is moved to another place? It can be tricky. I think existing behaviour is consistent across all admin and if so, this questions about focus and hover can be moved to another ticket and this patch can be applied with small adjustments to targeting issue in question.

I noticed 4px borders at Privacy tables (screenshot is above), and I have no idea what they are used for.

For testing — this patch is applied to:

• updates (themes and plugins tables): /wp-admin/update-core.php
• media (list view): /wp-admin/upload.php?mode=list
• post list: /wp-admin/edit.php
• pages list: /wp-admin/edit.php?post_type=page
• categories: /wp-admin/edit-tags.php?taxonomy=category
• tags: /wp-admin/edit-tags.php?taxonomy=post_tag
• comments: /wp-admin/edit-comments.php
• plugins: /wp-admin/plugins.php
• users: /wp-admin/users.php
• Export Personal Data: /wp-admin/export-personal-data.php (with border)
• Erase Personal Data: /wp-admin/export-personal-data.php (with border)
• list of sites for multisite

Correct if I missed something.

[sabernhardt]

clicking on one checkbox and then hovering over the next while the first checkbox still has the focus state

[sabernhardt]

No, focus loss would be a problem.

The question about focus is whether reusing the same style for the hover state would confuse someone. If so, I do not have a good idea for a new hover style.

In privacy-related tables, the left border is a way to reinforce the status of privacy requests with specific colors.

[joedolson]

I don't have a problem with reusing the hover/focus states. Hover states are reinforced by the mouse cursor and selected states are reinforced by being checked; I think that the common characteristics of the checkbox itself are not a concern.

This works for me; marking for commit.

Make entire checkbox cell clickable in list tables.

Trac ticket: https://core.trac.wordpress.org/ticket/21516

[joedolson]

In 55954:

Administration: Make checkbox column clickable.

Change the label for .check-column inside list tables to a block filling the entire cell. Improves accessibility by increasing the target area for the control.

Props mitchoyoshitaka, lessbloat, sabernhardt, ogleker, tacoverdo, joostdevalk, karmatosed.

Fixes #21516.

Closed in r55954

[sabernhardt]

Follow-up ticket about moving the checkboxes before the labels: #58703

Also, I made a mistake with the .check-column .label-covers-full-cell input selector, which probably should have been .check-column .label-covers-full-cell + input with the label first.

[mukesh27]

This ticket was discussed during the bug scrub.

@sabernhardt do you have any plans to add a new patch or pull request to address this issue?

[sabernhardt]

selector correction

[audrasjb]

In 56135:

Administration: CSS selector correction for list table checkboxes.

This replaces .check-column .label-covers-full-cell input selector with .check-column .label-covers-full-cell + input.

Follow-up to [55954].

Props sabernhardt.
Fixes #21516.