id	summary	reporter	owner	description	type	status	component	version	severity	resolution	keywords	cc	stage	has_patch	needs_docs	needs_tests	needs_better_patch	easy	ui_ux
33434	Browser font resizing doesn’t work in Django admin due to pixel values	Thibaud Colas	nobody	"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.

"	Bug	new	contrib.admin	4.0	Normal		accessibility, ux, wcag, admin, css		Unreviewed	0	0	0	0	0	1