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 )
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
Attachments (1)
Change History (14)
by , 7 months ago
Attachment: | examplebutton.png added |
---|
comment:1 by , 7 months ago
Description: | modified (diff) |
---|
comment:2 by , 7 months ago
Triage Stage: | Unreviewed → Accepted |
---|---|
Type: | Uncategorized → Cleanup/optimization |
This is a follow on from #35795
comment:3 by , 7 months ago
Description: | modified (diff) |
---|
comment:4 by , 6 months ago
Owner: | changed from | to
---|
comment:5 by , 6 months ago
Has patch: | set |
---|
comment:6 by , 6 months ago
Patch needs improvement: | set |
---|
comment:7 by , 5 months ago
Patch needs improvement: | unset |
---|
comment:8 by , 5 months ago
Patch needs improvement: | set |
---|
comment:9 by , 5 months ago
Patch needs improvement: | unset |
---|
comment:10 by , 4 months ago
Patch needs improvement: | set |
---|
comment:11 by , 4 months ago
Cc: | added |
---|
comment:12 by , 7 weeks ago
I see at least two separate issues here:
- There are
a
elements with JS behavior added where therole="button"
is an improvement but we can go further, and we would be better off with<button>
. - There are
a
elements that don’t have any JS behavior added, and therole="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 , 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)
Example of a button that uses an anchor tag: "Add another Release"