[Django] #33434: Browser font resizing doesn’t work in Django admin due to pixel values
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud | Owner: nobody
Colas |
Type: Bug | Status: new
Component: | Version: 4.0
contrib.admin | Keywords: accessibility, ux,
Severity: Normal | wcag, admin, css
Triage Stage: | Has patch: 0
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
-------------------------------------+-------------------------------------
In the Django admin, there are a lot of
[https://github.com/django/django/search?l=CSS&q=font-size font size
definitions in pixels]. This is problematic for users relying on browser
text resizing, as [https://developer.mozilla.org/en-
US/docs/Web/CSS/length#absolute_length_units px and other absolute units
don’t support this]. We should use relative units throughout the project
instead. For WCAG conformance, not supporting this is a failure of
[https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html SC 1.4.4
Resize Text].
Here is an example, using Chrome’s settings on macOS to do a text-only
zoom:
[[Image(https://code.djangoproject.com/raw-attachment/ticket/32338/radio-
select-first-input-label.png)]]
----
== Proposed fix
We should change all font sizes using absolute units to relative ones. For
Django, the only absolute unit in use is `px`. I’d recommend switching
those definitions to `rem`, which is the relative unit that’s the simplest
to reason about. 1 rem is equal to the font size set on the `html`
element, which is 16px by default.
So I believe fixing this should just be a matter of dividing all `px`
definitions by 16 and setting in rem. All font-size definitions in the
admin are in the `.css` files, so it’s straightforward to look for `font-
size` in those files.
== Proposed additional changes
In addition to the above, I would recommend:
1. Creating an official CSS code style documentation for Django, under
[https://docs.djangoproject.com/en/4.0/internals/contributing/writing-
code/ Writing code]. This would cover considerations like appropriate
units to use.
2. Refactoring all font-size definitions to `rem`, even the ones already
relative using keywords (`small`), `em`, and % units. This is just because
`rem` definitions are much simpler to reason about, since the sizes are
only relative to the `html` root. There are a few cases where `em` still
have a place but they should be the (very rare) exception.
3. Enforcing `px` are never used for `font-size` with
[https://stylelint.io/ stylelint] running in continuous integration, and
its [https://stylelint.io/user-guide/rules/list/declaration-property-unit-
disallowed-list/ declaration-property-unit-disallowed-list rule].
All of the above would warrant their own separate ticket, so I’m just
proposing this here for others’ consideration. If there is some consensus,
please go ahead with opening the corresponding ticket, or I’m happy to.
--
Ticket URL: <https://code.djangoproject.com/ticket/33434>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
-------------------------------------+-------------------------------------
Type: Bug | Status: new
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, ux, | Triage Stage:
wcag, admin, css | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* Attachment "font-size-resizing-django.gif" added.
Resizing the font size of the Django admin via Chrome browser settings.
There are no visible changes, apart from the LOGOUT link which has been
customized to use rem units.
Django
-------------------------------------+-------------------------------------
Type: Bug | Status: new
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, ux, | Triage Stage:
wcag, admin, css | Unreviewed
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Old description:
New description:
In the Django admin, there are a lot of
[https://github.com/django/django/search?l=CSS&q=font-size font size
definitions in pixels]. This is problematic for users relying on browser
text resizing, as [https://developer.mozilla.org/en-
US/docs/Web/CSS/length#absolute_length_units px and other absolute units
don’t support this]. We should use relative units throughout the project
instead. For WCAG conformance, not supporting this is a failure of
[https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html SC 1.4.4
Resize Text].
Here is an example, using Chrome’s settings on macOS to do a text-only
zoom:
[[Image(https://code.djangoproject.com/raw-attachment/ticket/33434/font-
size-resizing-django.gif, alt="Resizing the font size of the Django admin
via Chrome browser settings. There are no visible changes, apart from the
LOGOUT link which has been customized to use rem units.")]]
At the very end, I show what we’d expect to see when using `rem` units by
adding inline styles to the LOGOUT link.
----
== Proposed fix
== Proposed additional changes
--
--
Ticket URL: <https://code.djangoproject.com/ticket/33434#comment:1>
Django
-------------------------------------+-------------------------------------
Type: Bug | Status: new
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, ux, | Triage Stage:
wcag, admin, css | Unreviewed
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Old description:
> In the Django admin, there are a lot of
> [https://github.com/django/django/search?l=CSS&q=font-size font size
> definitions in pixels]. This is problematic for users relying on browser
> text resizing, as [https://developer.mozilla.org/en-
> US/docs/Web/CSS/length#absolute_length_units px and other absolute units
> don’t support this]. We should use relative units throughout the project
> instead. For WCAG conformance, not supporting this is a failure of
> [https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html SC 1.4.4
> Resize Text].
>
> Here is an example, using Chrome’s settings on macOS to do a text-only
> zoom:
>
> [[Image(https://code.djangoproject.com/raw-attachment/ticket/33434/font-
> size-resizing-django.gif, alt="Resizing the font size of the Django admin
> via Chrome browser settings. There are no visible changes, apart from the
> LOGOUT link which has been customized to use rem units.")]]
>
> At the very end, I show what we’d expect to see when using `rem` units by
> adding inline styles to the LOGOUT link.
>
New description:
In the Django admin, there are a lot of
[https://github.com/django/django/search?l=CSS&q=font-size font size
definitions in pixels]. This is problematic for users relying on browser
text resizing, as [https://developer.mozilla.org/en-
US/docs/Web/CSS/length#absolute_length_units px and other absolute units
don’t support this]. We should use relative units throughout the project
instead. For WCAG conformance, not supporting this is a failure of
[https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html SC 1.4.4
Resize Text].
Here is an example, using Chrome’s settings on macOS to do a text-only
zoom:
[[Image(https://code.djangoproject.com/raw-attachment/ticket/33434/font-
size-resizing-django.gif, alt="Resizing the font size of the Django admin
via Chrome browser settings. There are no visible changes, apart from the
LOGOUT link which has been customized to use rem units.")]]
At the very end, I show what we’d expect to see when using `rem` units by
adding inline styles to the LOGOUT link.
----
== Proposed fix
== Proposed additional changes
disallowed-list/ declaration-property-unit-disallowed-list] rule.
All of the above would warrant their own separate ticket, so I’m just
proposing this here for others’ consideration. If there is some consensus,
please go ahead with opening the corresponding ticket, or I’m happy to.
--
--
Ticket URL: <https://code.djangoproject.com/ticket/33434#comment:2>
Django
-------------------------------------+-------------------------------------
Type: Bug | Status: new
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
wcag, admin, css |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* stage: Unreviewed => Accepted
--
Ticket URL: <https://code.djangoproject.com/ticket/33434#comment:3>
Django
-------------------------------------+-------------------------------------
| kunwar
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, ux, | Triage Stage: Accepted
wcag, admin, css |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: nobody => ravi kunwar
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/33434#comment:4>
Django
-------------------------------------+-------------------------------------
| kunwar
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, ux, | Triage Stage: Accepted
wcag, admin, css |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Old description:
> In the Django admin, there are a lot of
> [https://github.com/django/django/search?l=CSS&q=font-size font size
> definitions in pixels]. This is problematic for users relying on browser
> text resizing, as [https://developer.mozilla.org/en-
> US/docs/Web/CSS/length#absolute_length_units px and other absolute units
> don’t support this]. We should use relative units throughout the project
> instead. For WCAG conformance, not supporting this is a failure of
> [https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html SC 1.4.4
> Resize Text].
>
> Here is an example, using Chrome’s settings on macOS to do a text-only
> zoom:
>
> [[Image(https://code.djangoproject.com/raw-attachment/ticket/33434/font-
> size-resizing-django.gif, alt="Resizing the font size of the Django admin
> via Chrome browser settings. There are no visible changes, apart from the
> LOGOUT link which has been customized to use rem units.")]]
>
> At the very end, I show what we’d expect to see when using `rem` units by
> adding inline styles to the LOGOUT link.
>
> unit-disallowed-list/ declaration-property-unit-disallowed-list] rule.
>
> All of the above would warrant their own separate ticket, so I’m just
> proposing this here for others’ consideration. If there is some
> consensus, please go ahead with opening the corresponding ticket, or I’m
> happy to.
New description:
In the Django admin, there are a lot of
[https://github.com/django/django/search?l=CSS&q=font-size font size
definitions in pixels]. This is problematic for users relying on browser
text resizing, as [https://developer.mozilla.org/en-
US/docs/Web/CSS/length#absolute_length_units px and other absolute units
don’t support this]. We should use relative units throughout the project
instead. For WCAG conformance, not supporting this is a failure of
[https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html SC 1.4.4
Resize Text].
Here is an example, using Chrome’s settings on macOS to do a text-only
zoom:
[[Image(https://code.djangoproject.com/raw-attachment/ticket/33434/font-
size-resizing-django.gif, alt="Resizing the font size of the Django admin
via Chrome browser settings. There are no visible changes, apart from the
LOGOUT link which has been customized to use rem units.")]]
At the very end, I show what we’d expect to see when using `rem` units by
adding inline styles to the LOGOUT link.
----
== Proposed fix
== Proposed additional changes
disallowed-list/ declaration-property-unit-disallowed-list] rule.
4. Increasing the font size across the board. Personally I’d recommend
14px as the minimum, and either 16 or 18px for "body copy".
All of the above would warrant their own separate ticket, so I’m just
proposing this here for others’ consideration. If there is some consensus,
please go ahead with opening the corresponding ticket, or I’m happy to.
--
--
Ticket URL: <https://code.djangoproject.com/ticket/33434#comment:5>
Django
-------------------------------------+-------------------------------------
| kunwar
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, ux, | Triage Stage: Accepted
wcag, admin, css |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by ravi kunwar):
hey @Thibaud Colas , I have fixed bug related to point 2 and 3 but not
sure how to proceed with point 1 and 4. Could you explain them further,
(for point 1 It is not clear to me where to update document & for point 4
we already have html base size as 16 px . . so what changes do we need
here)
--
Ticket URL: <https://code.djangoproject.com/ticket/33434#comment:6>
Django
-------------------------------------+-------------------------------------
| kunwar
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, ux, | Triage Stage: Accepted
wcag, admin, css |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by David Smith):
Hi Ravi, thanks for your work on this so far. I think we'd want to merge
these as separate changes (maybe separate commits on the same PR). Maybe I
can suggest to open a PR with the changes you've got already so they can
start to be reviewed while the work on the other elements continue?
--
Ticket URL: <https://code.djangoproject.com/ticket/33434#comment:7>
Django
-------------------------------------+-------------------------------------
| kunwar
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, ux, | Triage Stage: Accepted
wcag, admin, css |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Thibaud Colas):
Hi Ravi, yes, to echo what David said above, for now I would have
recommended to make a PR with only what I described under "Proposed fix",
not the four points under "Proposed additional changes".
In my opinion those other recommendations should be covered in separate
PRs, and even before that someone would ideally first make a proposal in a
separate ticket. All of those changes are worthwhile in my opinion, and
could technically all be done at the same time, but keeping them separate
will make them simpler to review and get in sooner rather than later.
----
For point 1. about CSS code style, I would have expected a new page,
following what Django has for
[https://docs.djangoproject.com/en/4.0/internals/contributing/writing-
code/javascript/ JavaScript].
For point 4., I really think someone has to make a ticket with a solid
proposal, backed with research and screenshots, before we jump to a PR.
From what I could see, Django’s base font size for the admin interface is
[https://github.com/django/django/blob/aecfc40c88ce19aa0b830ee2d3d2077b304757bc/django/contrib/admin/static/admin/css/base.css#L67
14px], and there are lots of places where it gets below that. I guess a
reasonable first stab could be to increase the base to 16px (1rem), and
use 14px (0.875rem) for all of the areas currently under 14px.
--
Ticket URL: <https://code.djangoproject.com/ticket/33434#comment:8>
Django
-------------------------------------+-------------------------------------
| kunwar
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, ux, | Triage Stage: Accepted
wcag, admin, css |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by ravi kunwar):
hey @Thibaud Colas and @David Smith, thanks for your response, as you said
I have created a pull request https://github.com/django/django/pull/15321.
As this is my first open source contribution and I don't know what to do
next or what else I have to do other than creating PR while contributing.
If you guys guide me, I'll be a great help to me.
--
Ticket URL: <https://code.djangoproject.com/ticket/33434#comment:9>
Django
-------------------------------------+-------------------------------------
| kunwar
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, ux, | Triage Stage: Accepted
wcag, admin, css |
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* needs_better_patch: 0 => 1
* has_patch: 0 => 1
Comment:
[https://github.com/django/django/pull/15321 PR]
--
Ticket URL: <https://code.djangoproject.com/ticket/33434#comment:10>
Django
-------------------------------------+-------------------------------------
| kunwar
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
wcag, admin, css | checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* needs_better_patch: 1 => 0
* stage: Accepted => Ready for checkin
--
Ticket URL: <https://code.djangoproject.com/ticket/33434#comment:11>
Django
-------------------------------------+-------------------------------------
| kunwar
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution: fixed
Keywords: accessibility, ux, | Triage Stage: Ready for
wcag, admin, css | checkin
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: assigned => closed
* resolution: => fixed
Comment:
In [changeset:"1f42a352e04d2e63117f067a1432594ffbb6a8b4" 1f42a352]:
{{{
#!CommitTicketReference repository=""
revision="1f42a352e04d2e63117f067a1432594ffbb6a8b4"
Fixed #33434 -- Changed font-size in admin CSS to use rem units.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/33434#comment:12>