Opened 7 months ago

Last modified 7 weeks ago

#36192 assigned Cleanup/optimization

Use semantic HTML for buttons in Django Admin

Reported by: Eliana Rosselli Owned by: Philip Narteh
Component: contrib.admin Version: 5.1
Severity: Normal Keywords: accessibility
Cc: Antoliny Triage Stage: Accepted
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: yes
Easy pickings: no UI/UX: no

Description (last modified by Eliana Rosselli)

Right now the Django Admin has some buttons that are actually link tags with role="button" set, i.e

<a role="button">

We also have anchor elements with

<a href="#" >

that are also acting as buttons. One example is the "Today" button that can be found next to date and time inputs.

We should change these to be proper HTML buttons , and update their CSS so they maintain their existing styling. Below is an example of this kind of button; in the image, the "Add another Release" button is using an anchor element

Example of a button that uses an anchor tag: "Add another Release"

Attachments (1)

examplebutton.png (97.9 KB ) - added by Eliana Rosselli 7 months ago.
Example of a button that uses an anchor tag: "Add another Release"

Download all attachments as: .zip

Change History (14)

by Eliana Rosselli, 7 months ago

Attachment: examplebutton.png added

Example of a button that uses an anchor tag: "Add another Release"

comment:1 by Eliana Rosselli, 7 months ago

Description: modified (diff)

comment:2 by Sarah Boyce, 7 months ago

Triage Stage: UnreviewedAccepted
Type: UncategorizedCleanup/optimization

This is a follow on from #35795

comment:3 by Eliana Rosselli, 7 months ago

Description: modified (diff)

comment:4 by Philip Narteh, 6 months ago

Owner: changed from Eliana Rosselli to Philip Narteh

comment:5 by Philip Narteh, 6 months ago

Has patch: set

comment:6 by Sarah Boyce, 6 months ago

Patch needs improvement: set

comment:7 by Antoliny, 5 months ago

Patch needs improvement: unset

comment:8 by Sarah Boyce, 5 months ago

Patch needs improvement: set

comment:9 by Philip Narteh, 5 months ago

Patch needs improvement: unset

comment:10 by Andrew Northall, 4 months ago

Patch needs improvement: set

comment:11 by Antoliny, 4 months ago

Cc: Antoliny added

comment:12 by Thibaud Colas, 7 weeks ago

I see at least two separate issues here:

  1. There are a elements with JS behavior added where the role="button" is an improvement but we can go further, and we would be better off with <button>.
  2. There are a elements that don’t have any JS behavior added, and the role="button" isn’t appropriate. They shouldn’t have a role as they are links that take users to a separate page.

The admin’s styles are very similar for both types, but we need separate elements.

I believe PR #19283 only tackles the first point for now.

comment:13 by Thibaud Colas, 7 weeks ago

I’ve assigned the second point to @kushaldas as this seems different enough from the improvements in PR #19283 (that PR is improvements over existing, while point 2 would be considered a bug I think)

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