[Django] #36192: Use semantic HTML for buttons in Django Admin

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------
Reporter: Eliana | Owner: Eliana Rosselli
Rosselli |
Type: | Status: assigned
Uncategorized |
Component: | Version: 5.1
contrib.admin |
Severity: Normal | Keywords: accessibility
Triage Stage: | Has patch: 0
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 0 |
-------------------------------------+-------------------------------------
Right now the Django Admin has some buttons that are actually link tags
with role="button" set, i.e
{{{
<a role="button">
}}}

We should change these to be proper HTML buttons , and update their CSS so
they maintain their existing styling.

[[Image(examplebutton.png)]]
--
Ticket URL: <https://code.djangoproject.com/ticket/36192>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------

Reporter: Eliana Rosselli | Owner: Eliana
| Rosselli
Type: Uncategorized | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Eliana Rosselli):

* Attachment "examplebutton.png" added.

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
| Rosselli
Type: Uncategorized | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Eliana Rosselli):

* Attachment "examplebutton.png" removed.

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
| Rosselli
Type: Uncategorized | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Eliana Rosselli):

* Attachment "examplebutton.png" added.

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

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
| Rosselli
Type: Uncategorized | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Description changed by Eliana Rosselli:

Old description:

> Right now the Django Admin has some buttons that are actually link tags
> with role="button" set, i.e
> {{{
> <a role="button">
> }}}
>
> We should change these to be proper HTML buttons , and update their CSS
> so they maintain their existing styling.
>
> [[Image(examplebutton.png)]]

New description:

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

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

[[Image(examplebutton.png)]]

--
--
Ticket URL: <https://code.djangoproject.com/ticket/36192#comment:1>

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana

Type: | Rosselli
Cleanup/optimization | Status: assigned

Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:

Keywords: accessibility | Triage Stage: Accepted

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* stage: Unreviewed => Accepted
* type: Uncategorized => Cleanup/optimization

Comment:

This is a follow on from #35795
--
Ticket URL: <https://code.djangoproject.com/ticket/36192#comment:2>

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Eliana
Type: | Rosselli
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Description changed by Eliana Rosselli:

Old description:

> Right now the Django Admin has some buttons that are actually link tags
> with role="button" set, i.e
> {{{
> <a role="button">
> }}}
>
> 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
>
> [[Image(examplebutton.png)]]

New description:

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

[[Image(examplebutton.png)]]

--

--
Ticket URL: <https://code.djangoproject.com/ticket/36192#comment:3>

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------

Reporter: Eliana Rosselli | Owner: Philip
Type: | Narteh

Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Philip Narteh):

* owner: Eliana Rosselli => Philip Narteh

--
Ticket URL: <https://code.djangoproject.com/ticket/36192#comment:4>

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Philip
Type: | Narteh
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted

Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Philip Narteh):

* has_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36192#comment:5>

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Philip
Type: | Narteh
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 1

Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36192#comment:6>

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Philip
Type: | Narteh
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0

Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Antoliny):

* needs_better_patch: 1 => 0

--
Ticket URL: <https://code.djangoproject.com/ticket/36192#comment:7>

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Philip
Type: | Narteh
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 1

Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36192#comment:8>

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Philip
Type: | Narteh
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0

Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Philip Narteh):

* needs_better_patch: 1 => 0

--
Ticket URL: <https://code.djangoproject.com/ticket/36192#comment:9>

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Philip
Type: | Narteh
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 1

Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Andrew Northall):

* needs_better_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36192#comment:10>

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Philip
Type: | Narteh
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Antoliny):

* cc: Antoliny (added)

--
Ticket URL: <https://code.djangoproject.com/ticket/36192#comment:11>

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Philip
Type: | Narteh
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by Thibaud Colas):

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.
--
Ticket URL: <https://code.djangoproject.com/ticket/36192#comment:12>

[Django]

#36192: Use semantic HTML for buttons in Django Admin
-------------------------------------+-------------------------------------
Reporter: Eliana Rosselli | Owner: Philip
Type: | Narteh
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Comment (by Thibaud Colas):

I’ve assigned the second point to @kushaldas as this seems different
enough from the improvements in
[https://github.com/django/django/pull/19283 PR #19283] (that PR is
improvements over existing, while point 2 would be considered a bug I
think)
--
Ticket URL: <https://code.djangoproject.com/ticket/36192#comment:13>