From 2c58235e29c6c58fd8b7e1c10d2285157c06a62a Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 19 Sep 2019 10:55:22 +0100 Subject: [PATCH 1/2] Fix text resize issue with warning text icon The font size of the exclamation mark within the warning text component is currently specified as 1.6 em, within a 19px context which means that the calculated font-size is 30.4px. Because the height and width of the circle the exclamation mark sits within are specified in px, the exclamation mark increases in size when the page is zoomed text-only, whilst the circle does not. This results in the mark overflowing outside of the circle. Specifying the font-size in px solves this problem. Whilst the icon is used to add emphasis, the text is also inset and bold, so we can treat it as presentational. In Safari, the exclamation mark actually ends up slightly larger, but is still contained entirely within the circle. --- src/govuk/components/warning-text/_warning-text.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/govuk/components/warning-text/_warning-text.scss b/src/govuk/components/warning-text/_warning-text.scss index 0485ef9db0..3c39032905 100644 --- a/src/govuk/components/warning-text/_warning-text.scss +++ b/src/govuk/components/warning-text/_warning-text.scss @@ -39,7 +39,7 @@ color: govuk-colour("white"); background: govuk-colour("black"); - font-size: 1.6em; + font-size: 30px; line-height: 29px; text-align: center; From 667c6258d012a681ac17657677641207a6bea704 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 20 Sep 2019 16:15:13 +0100 Subject: [PATCH 2/2] Document in changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e2669af028..b743f06436 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ This will help with scenarios where some of the elements, such as navigation and ### Fixes - [Pull request #1574: Make form elements scale correctly when text resized by user](https://github.com/alphagov/govuk-frontend/pull/1574). +- [Pull request #1584: Fix text resize issue with warning text icon](https://github.com/alphagov/govuk-frontend/pull/1584) - [Pull request ##1570: Prevent inputs ending up off screen or obscured by keyboards when linking from the error summary to inputs within a large fieldset](https://github.com/alphagov/govuk-frontend/pull/1570) ## 3.2.0 (Feature release)