nhsuk-frontend icon indicating copy to clipboard operation
nhsuk-frontend copied to clipboard

Published 20 hours ago • verified publisher icon nhsuk

Details font size too small

Open sarawilcox opened this issue 5 years ago • 6 comments

Bug Report

What is the issue?

Font size of details appears small in relation to text above and below it. See 2 examples from my mobile phone.

First example taken from NHS.UK flucloxacillin page - details as used in Common questions at bottom of page. Second example: https://nhsuk.github.io/nhsuk-frontend/components/details/index.html

Note: fonts are set to larger than usual on my phone.

What was the environment where this issue occurred?

  • Device: Samsung S7 phone
  • Operating System: Android 8.0.0
  • Browser: Google Chrome
  • Browser version: 75.0.3770.101

Screenshot_20200114-163110_Gallery Screenshot_20200114-165910_Chrome

sarawilcox avatar Jan 14 '20 17:01 sarawilcox

Is this still an issue for you @sarawilcox? Can't seem to replicate this when changing my font size on Chrome (MacOS) or when increasing my font size on Safari (iOS). If its still an issue will do some further investigation 👍

chrimesdev avatar Mar 19 '20 14:03 chrimesdev

It seems to be an issue in Chrome on my Android. The font in the details heading doesn't seem to scale in the way that the text around it and inside the details does. Screenshots of the same examples: image

sarawilcox avatar Mar 19 '20 14:03 sarawilcox

image

sarawilcox avatar Mar 19 '20 14:03 sarawilcox

Will take it to the accessibility lab for more devices, cheers!

chrimesdev avatar Mar 19 '20 15:03 chrimesdev

Related issue? @AdamChrimes Hint text on my phone - from NDOP: https://your-data-matters.service.nhs.uk/yourdetails#/details-auth-option Screenshot_20200309-113921_Ecosia Compared to desktop: Screenshot 2021-01-15 at 12 00 12

sarawilcox avatar Jan 15 '21 12:01 sarawilcox

I've done a bit of testing with a few android phones (versions 8/10/11) and different browsers (Chrome, Firefox, Opera, Brave). I increased the font size in the settings of each phone and found that with Chrome, Opera and Brave, the details summary text did not increase in size in relation to the content is was showing. I also saw some other HTML elements which displayed similar behaviour, such as buttons and form labels. I tested the gov design system components and it was the same. With Firefox, these HTML elements did increase in size as you would expect, ie it worked correctly. The only difference I can see is that Chrome, Opera and Brave are Chromium based whereas Firefox uses a different browser engine.

mcheung-nhs avatar Feb 01 '21 15:02 mcheung-nhs