Make WordPress Core

Opened 12 years ago

Closed 8 months ago

#21516 closed enhancement (fixed)

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

Reported by: mitchoyoshitaka's profile mitchoyoshitaka Owned by: joedolson's profile joedolson
Milestone: 6.3 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-ux-feedback has-testing-info has-screenshots needs-patch
Focuses: accessibility Cc:


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?

Attachments (6)

21516.diff (851 bytes) - added by mitchoyoshitaka 12 years ago.
21516.2.diff (827 bytes) - added by lessbloat 11 years ago.
21516.3.diff (12.4 KB) - added by sabernhardt 9 months ago.
proof of concept with labels that cover their entire cell
white-border.png (55.4 KB) - added by oglekler 9 months ago.
privacy-checkboxes-focus-hover.webm (80.2 KB) - added by sabernhardt 8 months ago.
clicking on one checkbox and then hovering over the next while the first checkbox still has the focus state
21516.4.diff (390 bytes) - added by sabernhardt 8 months ago.
selector correction

Download all attachments as: .zip

Change History (30)

11 years ago

#1 @lessbloat
11 years ago

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.

#2 @TacoVerdo
10 years ago

Current patch breaks checking.
Cannot use check all anymore.

#3 @joostdevalk
10 years ago

  • Keywords needs-patch added; has-patch removed

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.

#4 @chriscct7
8 years ago

  • Keywords dev-feedback added
  • Severity changed from minor to normal

This ticket was mentioned in Slack in #design by karmatosed. View the logs.

7 years ago

#6 @karmatosed
7 years ago

  • Keywords has-ux-feedback added; ux-feedback removed

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?

#7 @Hareesh Pillai
3 years ago

  • Milestone changed from Awaiting Review to 5.9

This ticket was mentioned in Slack in #core by audrasjb. View the logs.

2 years ago

#9 @audrasjb
2 years ago

  • Focuses accessibility added
  • Keywords needs-refresh 2nd-opinion added
  • Milestone changed from 5.9 to Future Release

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.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.

11 months ago

#11 @joedolson
11 months ago

  • Keywords 2nd-opinion removed
  • Milestone changed from Future Release to 6.3

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.

9 months ago

proof of concept with labels that cover their entire cell

#12 @sabernhardt
9 months ago

  • Keywords has-patch added; needs-patch needs-refresh removed

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.

Last edited 8 months ago by sabernhardt (previous) (diff)

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.

9 months ago

#14 @oglekler
9 months ago

  • Keywords has-testing-info has-screenshots added

@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.

8 months ago

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

#15 @sabernhardt
8 months ago

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.

#16 @joedolson
8 months ago

  • Keywords commit added; dev-feedback removed

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.

#17 @joedolson
8 months ago

  • Owner set to joedolson
  • Status changed from new to accepted

This ticket was mentioned in PR #4652 on WordPress/wordpress-develop by @joedolson.

8 months ago

Make entire checkbox cell clickable in list tables.

Trac ticket:

#19 @joedolson
8 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

@joedolson commented on PR #4652:

8 months ago

Closed in r55954

#21 @sabernhardt
8 months ago

  • Keywords commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

This ticket was mentioned in Slack in #core by mukeshpanchal27. View the logs.

8 months ago

#23 @mukesh27
8 months ago

  • Keywords needs-patch added; has-patch removed

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?

8 months ago

selector correction

#24 @audrasjb
8 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.