Problem/Motivation

During an accessibility walkthrough, @mgifford pointed out the target size for the category close buttons could benefit from being made larger. Based on this draft specification for AA target size, any clickable target should be a minimum of 24x24px. While it's a draft specification, it's an accessibility improvement, and Project Browser will benefit from the change even if the spec is never formalized. It seems like the size increase could potentially add a few PX to the pills. If bigger pills don't work well, some kind of clever design solution ought to take care of it.

Steps to reproduce

Proposed resolution

Remaining tasks

  • ✅ File an issue about this project
  • ☐ Manual Testing
  • ☐ Code Review
  • ☐ Accessibility Review
  • ☐ Automated tests needed/written?

Issue fork project_browser-3321703

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:

About issue forks

Comments

bnjmnm created an issue. See original summary.

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

Utkarsh_33 opened merge request !309

utkarsh_33’s picture

utkarsh_33 commented
Status: Active » Needs review
bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Needs review » Needs work

I tested this manually, and it looks like it's increasing the size of the pills which in turn increases the size of the container. Could an approach be tried that increases the close button size while keeping the heights the same everywhere else. A little bit of positioning, flex, or possibly just modifying the pill padding should be able to take care of that.

utkarsh_33’s picture

utkarsh_33 commented
Status: Needs work » Needs review
utkarsh_33’s picture

utkarsh_33 commented

The latest MR is in accordance to the discussion in accessibility meeting on 10th Nov.

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

narendrar’s picture

narendrar
He/Him
Primary language English
Location Jaipur, India
commented
Status: Needs review » Reviewed & tested by the community

Changes looks good to me. Marking as RTBC.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Reviewed & tested by the community » Needs work

Comment in MR

utkarsh_33’s picture

utkarsh_33 commented
Status: Needs work » Needs review
bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Needs review » Needs work

The current MR returns it to the state that I requested changes on in #5 - the pill size should not change, but the image should be increased. The closest to the desired solution is the transform:<code> style that was in there a commit or two ago. This was a welcome change, it just needed to be there at all times instead of requiring <code>:hover

utkarsh_33’s picture

utkarsh_33 commented
Status: Needs work » Needs review

  • 9793f51 committed on 1.0.x 
    Issue #3321703 by Utkarsh_33, bnjmnm, narendraR: Increase target area...
bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Needs review » Fixed

Looks good. Merged!

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Issue tags: +core-mvp

Status: Fixed » Closed (fixed)

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