Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Accessibility: browser font-size settings do not resize text #3449

Open
helenb opened this issue Dec 9, 2024 · 3 comments
Open

[Bug]: Accessibility: browser font-size settings do not resize text #3449

helenb opened this issue Dec 9, 2024 · 3 comments
Labels
Bug Something isn't working Community backlog An issue raised on the community backlog High priority

Comments

@helenb
Copy link

helenb commented Dec 9, 2024

Describe the bug

If I change the font size settings in chrome, the font size of a page using the ONS design system fonts does not change.

Screenshot 2024-12-09 at 12 07 56

I believe this is because there is a font-size: 16px rule applied to html. If this was changed to be 100%, then all fonts would resize successfully.

Expected behaviour / outcome

I would expect the font size to increase when the browser settings change.

List the steps necessary to reproduce the bug

Open any page using font-sizes set in the design system, for example https://nwp-prototype.ons.gov.uk/. Try changing the font-size in the browser settings, and see that the font-sizes in the page do not change.

Additional context

No response

What version of the ONS Design System are you using?

72.0.0

What device(s) are you using?

Desktop

What operating system(s) are you using?

macOS

What browser(s) are you using?

Chrome
@helenb helenb added Bug Something isn't working Community backlog An issue raised on the community backlog High priority labels Dec 9, 2024
@MagdalenaLarge
Copy link

@helenb Hi, did you try to do the same but not using https://nwp-prototype.ons.gov.uk/ website?

@helenb
Copy link
Author

helenb commented Dec 10, 2024

Hi @MagdalenaLarge yes I've just tried it out with a very simple page. The code is below, and I'll attach a screencast of the issue too.

<html>
<head>
    <link
      rel="stylesheet"
      href="https://cdn.ons.gov.uk/sdc/design-system/72.1.0/css/main.css"
    />
    <link
      rel="stylesheet"
      media="print"
      href="https://cdn.ons.gov.uk/sdc/design-system/72.1.0/css/print.css"
    />
</head>
<body>
<h1>Simple demonstration of font-resizing issue</h1>
<p>The font size doesn't change when the browser settings change</p>
</body>
</html>

Here is a screencast of the issue using the code above:

Screen.Recording.2024-12-10.at.14.53.37.mov

@MagdalenaLarge
Copy link

@helenb Helen, thank you for the recording. I will raise it with the team and let you know about the progress of this ticket.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Something isn't working Community backlog An issue raised on the community backlog High priority
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@helenb @MagdalenaLarge