Standardise accordion section headings font size (reduce height of section headings on mobile) #1796
Conversation
ec800cd to
e397a94
Compare
<h2> height|
@andysellick Could you please take a look at this PR in relation to alphagov/govuk_publishing_components#1386? It standardises the heading height to be consistent with GOV.UK Frontend |
|
@hannalaakso if this standardises things and it's still above the recommended size then that's fine. We did have someone on our team who struggled to use the accordion at something like this size (which was also above the recommended 44x44) so maybe it's worth checking when you next have a round of user testing? |
|
Thanks @andysellick. Talking IRL it sounds like this might have been more of an opinion, the user was able to complete the task. But it could be something to look out for if there's any research done. Would you be okay to leave a comment on the accordion in the backlog about this? I can also do it on your behalf. |
We currently rely on browser defaults for font size on the accordion heading sections (although the text font size is actually set in the enclosed button and the font size in the section headings impacts only the height of the sections). This PR sets the font size on the section headings to match our standard font sizing for `<h2>` elements so that we don't rely on browser defaults. However this means that we the height of the accordion sections is reduced by ~9px on mobile devices. | OS / browser | Before | After | |---------------------|--------|-------| | iOS 13 / Safari | 60px | 50px | | iOS 12 / Safari | 60px | 49px | | Android 10 / Chrome | 58px | 50px | | Android 9 / Chrome | 58px | 50px | WCAG 2.1 states that a [minimum target size must be 44 by 44 CSS pixels](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html) which this will meet.
e397a94 to
711359b
Compare
As reported in alphagov/govuk_publishing_components#1386, the height of accordion sections on mobile doesn't match GOV.UK Design System if Elements stylesheet is included. This is because of the inclusion of GOV.UK Elements which resets
<h2>to inherit font-size and line-height from<body>.We currently rely on browser defaults for font size on the accordion heading sections (although the text font size is actually set in the enclosed button and the font size in the section headings impacts only the height of the sections).
This PR sets the font size on the section headings to match our standard font sizing for
<h2>elements so that we don't rely on browser defaults. However this means that the height of the accordion sections is reduced by ~9px on mobile devices.Exact changes on different OS
WCAG 2.1 states that a minimum target size must be 44 by 44 CSS pixels which this will meet.
Fixes #1789