Re: [Django] #33434: Browser font resizing doesn’t work in Django admin due to pixel values
#33434: Browser font resizing doesn’t work in Django admin due to pixel values
-+-
Reporter: Thibaud Colas|Owner: ravi
| kunwar
Type: Bug | Status: closed
Component: contrib.admin| Version: 4.0
Severity: Normal | Resolution: fixed
Keywords: accessibility, ux, | Triage Stage: Ready for
wcag, admin, css | checkin
Has patch: 1| Needs documentation: 0
Needs tests: 0| Patch needs improvement: 0
Easy pickings: 0|UI/UX: 1
-+-
Changes (by Mariusz Felisiak ):
* 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>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/070.0ff107359179ab25e0665147f04f54cf%40djangoproject.com.
Re: [Django] #33434: Browser font resizing doesn’t work in Django admin due to pixel values
#33434: Browser font resizing doesn’t work in Django admin due to pixel values -+- Reporter: Thibaud Colas|Owner: ravi | kunwar Type: Bug | Status: assigned Component: contrib.admin| Version: 4.0 Severity: Normal | Resolution: Keywords: accessibility, ux, | Triage Stage: Ready for wcag, admin, css | checkin Has patch: 1| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Changes (by Mariusz Felisiak): * needs_better_patch: 1 => 0 * stage: Accepted => Ready for checkin -- Ticket URL: <https://code.djangoproject.com/ticket/33434#comment:11> Django <https://code.djangoproject.com/> The Web framework for perfectionists with deadlines. -- You received this message because you are subscribed to the Google Groups "Django updates" group. To unsubscribe from this group and stop receiving emails from it, send an email to django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.f2fd5443a98e73e7908556ac1e888b63%40djangoproject.com.
Re: [Django] #33434: Browser font resizing doesn’t work in Django admin due to pixel values
#33434: Browser font resizing doesn’t work in Django admin due to pixel values -+- Reporter: Thibaud Colas|Owner: ravi | kunwar Type: Bug | Status: assigned Component: contrib.admin| Version: 4.0 Severity: Normal | Resolution: Keywords: accessibility, ux, | Triage Stage: Accepted wcag, admin, css | Has patch: 1| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 1 Easy pickings: 0|UI/UX: 1 -+- Changes (by Mariusz Felisiak): * 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 <https://code.djangoproject.com/> The Web framework for perfectionists with deadlines. -- You received this message because you are subscribed to the Google Groups "Django updates" group. To unsubscribe from this group and stop receiving emails from it, send an email to django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.1b65c187a5b36203374d73ea02553001%40djangoproject.com.
Re: [Django] #33434: Browser font resizing doesn’t work in Django admin due to pixel values
#33434: Browser font resizing doesn’t work in Django admin due to pixel values -+- Reporter: Thibaud Colas|Owner: ravi | kunwar Type: Bug | Status: assigned Component: contrib.admin| Version: 4.0 Severity: Normal | Resolution: Keywords: accessibility, ux, | Triage Stage: Accepted wcag, admin, css | Has patch: 0| Needs documentation: 0 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 <https://code.djangoproject.com/> The Web framework for perfectionists with deadlines. -- You received this message because you are subscribed to the Google Groups "Django updates" group. To unsubscribe from this group and stop receiving emails from it, send an email to django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.04d94c96ccb8eaa25ad0b49b6c04458b%40djangoproject.com.
Re: [Django] #33434: Browser font resizing doesn’t work in Django admin due to pixel values
#33434: Browser font resizing doesn’t work in Django admin due to pixel values -+- Reporter: Thibaud Colas|Owner: ravi | kunwar Type: Bug | Status: assigned Component: contrib.admin| Version: 4.0 Severity: Normal | Resolution: Keywords: accessibility, ux, | Triage Stage: Accepted wcag, admin, css | Has patch: 0| Needs documentation: 0 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 <https://code.djangoproject.com/> The Web framework for perfectionists with deadlines. -- You received this message because you are subscribed to the Google Groups "Django updates" group. To unsubscribe from this group and stop receiving emails from it, send an email to django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.ee331fc400d4ce9fc51d316cd5695129%40djangoproject.com.
Re: [Django] #33434: Browser font resizing doesn’t work in Django admin due to pixel values
#33434: Browser font resizing doesn’t work in Django admin due to pixel values -+- Reporter: Thibaud Colas|Owner: ravi | kunwar Type: Bug | Status: assigned Component: contrib.admin| Version: 4.0 Severity: Normal | Resolution: Keywords: accessibility, ux, | Triage Stage: Accepted wcag, admin, css | Has patch: 0| Needs documentation: 0 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 <https://code.djangoproject.com/> The Web framework for perfectionists with deadlines. -- You received this message because you are subscribed to the Google Groups "Django updates" group. To unsubscribe from this group and stop receiving emails from it, send an email to django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.3e015612da5f481cab2040cb0986b59e%40djangoproject.com.
Re: [Django] #33434: Browser font resizing doesn’t work in Django admin due to pixel values
#33434: Browser font resizing doesn’t work in Django admin due to pixel values -+- Reporter: Thibaud Colas|Owner: ravi | kunwar Type: Bug | Status: assigned Component: contrib.admin| Version: 4.0 Severity: Normal | Resolution: Keywords: accessibility, ux, | Triage Stage: Accepted wcag, admin, css | Has patch: 0| Needs documentation: 0 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 <https://code.djangoproject.com/> The Web framework for perfectionists with deadlines. -- You received this message because you are subscribed to the Google Groups "Django updates" group. To unsubscribe from this group and stop receiving emails from it, send an email to django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.864aa4ae3ae8a2a0c5bbde3f1c201dd0%40djangoproject.com.
Re: [Django] #33434: Browser font resizing doesn’t work in Django admin due to pixel values
#33434: Browser font resizing doesn’t work in Django admin due to pixel values -+- Reporter: Thibaud Colas|Owner: ravi | kunwar Type: Bug | Status: assigned Component: contrib.admin| Version: 4.0 Severity: Normal | Resolution: Keywords: accessibility, ux, | Triage Stage: Accepted wcag, admin, css | Has patch: 0| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Description changed by Thibaud Colas: Old description: > In the Django admin, there are a lot of > [https://github.com/django/django/search?l=CSS=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 > > 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. New description: In the Django admin, there are a lot of [https://github.com/django/django/search?l=CSS=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
Re: [Django] #33434: Browser font resizing doesn’t work in Django admin due to pixel values
#33434: Browser font resizing doesn’t work in Django admin due to pixel values -+- Reporter: Thibaud Colas|Owner: ravi | kunwar Type: Bug | Status: assigned Component: contrib.admin| Version: 4.0 Severity: Normal | Resolution: Keywords: accessibility, ux, | Triage Stage: Accepted wcag, admin, css | Has patch: 0| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Changes (by ravi kunwar): * owner: nobody => ravi kunwar * status: new => assigned -- Ticket URL: <https://code.djangoproject.com/ticket/33434#comment:4> Django <https://code.djangoproject.com/> The Web framework for perfectionists with deadlines. -- You received this message because you are subscribed to the Google Groups "Django updates" group. To unsubscribe from this group and stop receiving emails from it, send an email to django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.2b5d7b25d5cafec603414f7286ea4aa8%40djangoproject.com.
Re: [Django] #33434: Browser font resizing doesn’t work in Django admin due to pixel values
#33434: Browser font resizing doesn’t work in Django admin due to pixel values -+- Reporter: Thibaud Colas|Owner: nobody Type: Bug | Status: new Component: contrib.admin| Version: 4.0 Severity: Normal | Resolution: Keywords: accessibility, ux, | Triage Stage: Accepted wcag, admin, css | Has patch: 0| Needs documentation: 0 Needs tests: 0| Patch needs improvement: 0 Easy pickings: 0|UI/UX: 1 -+- Changes (by Mariusz Felisiak): * stage: Unreviewed => Accepted -- Ticket URL: <https://code.djangoproject.com/ticket/33434#comment:3> Django <https://code.djangoproject.com/> The Web framework for perfectionists with deadlines. -- You received this message because you are subscribed to the Google Groups "Django updates" group. To unsubscribe from this group and stop receiving emails from it, send an email to django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.2b3efee4e14b59bef899b73c18cbeff3%40djangoproject.com.
Re: [Django] #33434: Browser font resizing doesn’t work in Django admin due to pixel values
#33434: Browser font resizing doesn’t work in Django admin due to pixel values -+- Reporter: Thibaud Colas|Owner: nobody 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 -+- Description changed by Thibaud Colas: Old description: > In the Django admin, there are a lot of > [https://github.com/django/django/search?l=CSS=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 > > 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. New description: In the Django admin, there are a lot of [https://github.com/django/django/search?l=CSS=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 We shoul
Re: [Django] #33434: Browser font resizing doesn’t work in Django admin due to pixel values
#33434: Browser font resizing doesn’t work in Django admin due to pixel values -+- Reporter: Thibaud Colas|Owner: nobody 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 -+- Description changed by Thibaud Colas: Old description: > In the Django admin, there are a lot of > [https://github.com/django/django/search?l=CSS=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. New description: In the Django admin, there are a lot of [https://github.com/django/django/search?l=CSS=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 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
Re: [Django] #33434: Browser font resizing doesn’t work in Django admin due to pixel values
#33434: Browser font resizing doesn’t work in Django admin due to pixel values -+- Reporter: Thibaud Colas|Owner: nobody 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 -+- Changes (by Thibaud Colas): * 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. -- Ticket URL: <https://code.djangoproject.com/ticket/33434> Django <https://code.djangoproject.com/> The Web framework for perfectionists with deadlines. -- You received this message because you are subscribed to the Google Groups "Django updates" group. To unsubscribe from this group and stop receiving emails from it, send an email to django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.82387c76fe27fb253bd71380cb88f3c6%40djangoproject.com.
[Django] #33434: Browser font resizing doesn’t work in Django admin due to pixel values
#33434: Browser font resizing doesn’t work in Django admin due to pixel values -+- 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=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. -- You received this message because you are subscribed to the Google Groups "Django updates" group. To unsubscribe from this group and stop receiving emails from it, send an email to django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/055.d59bbd3472d6081c5d85a0d84de576b3%40djangoproject.com.
