Problem/Motivation

The category label elements in the sidebar are tightly stacked vertically. To select a category with the mouse cursor you have to pay close attention
screenshot of a devtools window and a webbrowser windows with project browser illustrating the extents of the touch target size
to make a selection by tapping on a touch devices is even more challenging because the checkboxes are that close to each other.
screenshot of a devtools window and a webbrowser windows with project browser illustrating the extents of the touch target size on a iphone SE screen
The height of the targets is 20px with more or less no padding or margin between each label element. I am not entirely sure if WCAG SC 2.5.5 with a goal of at least 44x44 pixels applies here since it is a triple AAA criterion. But never the less increasing the target size might easy the selection process for the user?

Remaining tasks

  • ✅ File an issue about this project
  • ☐ Manual Testing
  • ☐ Code Review
  • ☐ Accessibility Review
  • ☐ Automated tests needed/written?
CommentFileSizeAuthor
#5 after.png30.09 KBlibbna
#5 before.png36.58 KBlibbna
#4 categories_iphoneSE.png83.69 KBsrishtiiee
firefox.png229.49 KBrkoller
iphone_se.png233.25 KBrkoller
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rkoller created an issue. See original summary.

srishtiiee made their first commit to this issue’s fork.

srishtiiee’s picture

Status: Active » Needs review
StatusFileSize
new83.69 KB

libbna’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new36.58 KB
new30.09 KB

LGTM. The padding added in checkbox makes the list accessible. Marking this as RTBC.

tim.plunkett made their first commit to this issue’s fork.

tim.plunkett’s picture

Status: Reviewed & tested by the community » Fixed

Rebased and merged. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.