Opened 3 months ago

Closed 3 weeks ago

#35791 closed Cleanup/optimization (fixed)

Icon buttons must be at least 24x24 pixels

Reported by: Eva Nanyonga Owned by: tainarapalmeira
Component: contrib.admin Version: dev
Severity: Normal Keywords: Accessibility, WCAG, Djangonauts
Cc: Eva Nanyonga, Mariusz Felisiak Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: yes UI/UX: yes

Description

The inline remove button in django admin is too small 16x16 pixels but the recommended size is 24x24 pixels: 2.5.8 Target Size (Minimum)

​https://www.w3.org/WAI/WCAG22/quickref/#target-size-minimum

Using the button at the recommended minimum size would be helpful in providing a better user experience and provide useful information for all users.

Attachments (1)

Inlines delete button sizes screenshot with CSS resized.png​ (34.3 KB ) - added by Thibaud Colas 3 months ago.

Download all attachments as: .zip

Change History (17)

by Thibaud Colas, 3 months ago

Attachment: Inlines delete button sizes screenshot with CSS resized.png​ added

comment:1 by Thibaud Colas, 3 months ago

Owner: set to Eva Nanyonga
Status: new → assigned

Confirmed this is an issue. See ​demo page with inlines for releases. The current 16x16 size is incompatible with ​2.5.8 Target Size (Minimum).

Screenshot:

https://code.djangoproject.com/raw-attachment/ticket/35791/Inlines%20delete%20button%20sizes%20screenshot%20with%20CSS%20resized.png

---

We can make this button the target minimum of 24x24 – likely updating the CSS, and possibly the SVG image.

comment:2 by Thibaud Colas, 3 months ago

Has patch: set

pull request from Eva: ​#18624

comment:3 by Claude Paroz, 3 months ago

Triage Stage: Unreviewed → Accepted
Type: Bug → Cleanup/optimization
Version: 5.0 → dev

Thibaud, feel free to accept tickets when you agree with the report.

comment:4 by Sarah Boyce, 3 months ago

Patch needs improvement: set
Summary: Inline remove buttons are too small → Icon buttons must be at least 24x24 pixels

The multiple select box widget also has button icons which are smaller than 16x16

comment:5 by Alexander Lazarević, 7 weeks ago

Eva, have you planned to continue working on it?

comment:6 by Alexander Lazarević, 7 weeks ago

Cc: Alexander Lazarević added

comment:7 by Alexander Lazarević, 7 weeks ago

Cc: Alexander Lazarević removed
Keywords: Djangonauts added

comment:8 by Mariusz Felisiak, 7 weeks ago

Owner: changed from Eva Nanyonga to Mariusz Felisiak

comment:9 by tainarapalmeira, 7 weeks ago

Owner: changed from Mariusz Felisiak to tainarapalmeira

comment:10 by rohan yadav, 6 weeks ago

Owner: changed from tainarapalmeira to rohan yadav

I have submitted the PR .. can anybody review that please
​https://github.com/django/django/pull/18696

Last edited 6 weeks ago by rohan yadav (previous) (diff)

comment:11 by Sarah Boyce, 6 weeks ago

Owner: changed from rohan yadav to tainarapalmeira

Hi Rohan, this was assigned to tainarapalmeira recently (note that I understand Mariusz had reserved this for her).
You should ask folks if they are still working on it before taking over a ticket if they have been active recently (recently means within the past couple of months).

Also, please make sure you review comments from previous pull requests and address them, you have not addressed this comment: ​https://github.com/django/django/pull/18624#issuecomment-2380660463

Tainara if you're working on this, please feel free to raise a PR 👍

comment:12 by rohan yadav, 6 weeks ago

Hi Sarah,
sorry i didn't know much about ownership of the ticket , as i am new to the community .
If Tainara isn't looking on the issue , I would love to do it . For the next PR, I will make sure reviewing any comments.
Thanks

comment:13 by Mariusz Felisiak, 5 weeks ago

Cc: Mariusz Felisiak added

comment:14 by tainarapalmeira, 5 weeks ago

Patch needs improvement: unset

Hi there,

I've submitted a new patch for this ticket, and you can find it at the following link: ​https://github.com/django/django/pull/18816.

comment:15 by Sarah Boyce, 3 weeks ago

Triage Stage: Accepted → Ready for checkin

comment:16 by Sarah Boyce <42296566+sarahboyce@…>, 3 weeks ago

Resolution: → fixed
Status: assigned → closed

In 86661f2:

Fixed #35791 -- Updated icon button dimensions to 24x24 pixels.

This is to meet the WCAG 2.5.8 minimum size requirement.

Co-authored-by: Eva Nanyonga <evewish@…>

Note: See TracTickets for help on using tickets.
Back to Top