PLATUI-2618: Add styling for link scaling on account-menu including v…

…isual regression test (#335)
hmrc · Dec 13, 2023 · 1eaf1a6 · 1eaf1a6
1 parent af9397c
commit 1eaf1a6
Show file tree

Hide file tree

Showing 29 changed files with 20 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [5.61.0] - 2023-12-04
+
+### Changed
+
+- Ensure `account-menu` links in `account-header` scale correctly with browser settings
+
 ## [5.60.0] - 2023-11-29
 
 ### Changed

diff --git a/...top_default_account-header_all-available-options_example_0_document_0_phone.png b/...top_default_account-header_all-available-options_example_0_document_0_phone.png
diff --git a/...eference/backstop_default_account-header_default_example_0_document_0_phone.png b/...eference/backstop_default_account-header_default_example_0_document_0_phone.png
diff --git a/...kstop_default_account-header_global-service-name_example_0_document_0_phone.png b/...kstop_default_account-header_global-service-name_example_0_document_0_phone.png
diff --git a/..._link-states-on-mobile-with-dropdown-link-active_example_0_document_0_phone.png b/..._link-states-on-mobile-with-dropdown-link-active_example_0_document_0_phone.png
diff --git a/...e_example_account-menu-dropdown-open-active-link-focused_0_document_0_phone.png b/...e_example_account-menu-dropdown-open-active-link-focused_0_document_0_phone.png
diff --git a/...e_example_account-menu-dropdown-open-active-link-hovered_0_document_0_phone.png b/...e_example_account-menu-dropdown-open-active-link-hovered_0_document_0_phone.png
diff --git a/...-dropdown-link-active_example_account-menu-dropdown-open_0_document_0_phone.png b/...-dropdown-link-active_example_account-menu-dropdown-open_0_document_0_phone.png
diff --git a/...ink-active_example_account-menu-with-larger-browser-font_0_document_0_phone.png b/...ink-active_example_account-menu-with-larger-browser-font_0_document_0_phone.png
diff --git a/...top_default_account-header_link-states-on-mobile_example_0_document_0_phone.png b/...top_default_account-header_link-states-on-mobile_example_0_document_0_phone.png
diff --git a/...ates-on-mobile_example_account-menu-account-home-focused_0_document_0_phone.png b/...ates-on-mobile_example_account-menu-account-home-focused_0_document_0_phone.png
diff --git a/...ates-on-mobile_example_account-menu-account-home-hovered_0_document_0_phone.png b/...ates-on-mobile_example_account-menu-account-home-hovered_0_document_0_phone.png
diff --git a/...k-states-on-mobile_example_account-menu-dropdown-focused_0_document_0_phone.png b/...k-states-on-mobile_example_account-menu-dropdown-focused_0_document_0_phone.png
diff --git a/...k-states-on-mobile_example_account-menu-dropdown-hovered_0_document_0_phone.png b/...k-states-on-mobile_example_account-menu-dropdown-hovered_0_document_0_phone.png
diff --git a/...bile_example_account-menu-dropdown-open-messages-focused_0_document_0_phone.png b/...bile_example_account-menu-dropdown-open-messages-focused_0_document_0_phone.png
diff --git a/...bile_example_account-menu-dropdown-open-messages-hovered_0_document_0_phone.png b/...bile_example_account-menu-dropdown-open-messages-hovered_0_document_0_phone.png
diff --git a/...link-states-on-mobile_example_account-menu-dropdown-open_0_document_0_phone.png b/...link-states-on-mobile_example_account-menu-dropdown-open_0_document_0_phone.png
diff --git a/...lt_account-header_overridden-global-service-name_example_0_document_0_phone.png b/...lt_account-header_overridden-global-service-name_example_0_document_0_phone.png
diff --git a/...p_default_account-header_welsh-with-service-name_example_0_document_0_phone.png b/...p_default_account-header_welsh-with-service-name_example_0_document_0_phone.png
diff --git a/...ackstop_default_account-header_with-service-name_example_0_document_0_phone.png b/...ackstop_default_account-header_with-service-name_example_0_document_0_phone.png
diff --git a/..._reference/backstop_default_account-menu_default_example_0_document_0_phone.png b/..._reference/backstop_default_account-menu_default_example_0_document_0_phone.png
diff --git a/...ault_account-menu_with-business-tax-account-link_example_0_document_0_phone.png b/...ault_account-menu_with-business-tax-account-link_example_0_document_0_phone.png
diff --git a/...ckstop_default_account-menu_with-navigation-urls_example_0_document_0_phone.png b/...ckstop_default_account-menu_with-navigation-urls_example_0_document_0_phone.png
diff --git a/...ckstop_default_account-menu_with-unread-messages_example_0_document_0_phone.png b/...ckstop_default_account-menu_with-unread-messages_example_0_document_0_phone.png
diff --git a/backstop_data/engine_scripts/puppet/beforeTakingScreenshotHelper.js b/backstop_data/engine_scripts/puppet/beforeTakingScreenshotHelper.js
@@ -29,6 +29,12 @@ module.exports = async (page, { beforeTakingScreenshot }) => {
     }
   }
 
+  allowedPageActions.increaseFontSizes = async fontSize => {
+    await page.evaluate((fontSize) => {
+      document.documentElement.style.fontSize = fontSize
+    }, fontSize);
+  }
+
   if (beforeTakingScreenshot) {
     for (const step of beforeTakingScreenshot) {
       const [action, params] = Object.entries(step)[0];

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hmrc-frontend",
-  "version": "5.60.0",
+  "version": "5.61.0",
   "description": "Design patterns for HMRC frontends",
   "scripts": {
     "start": "gulp dev",

diff --git a/src/components/account-header/account-header.yaml b/src/components/account-header/account-header.yaml
@@ -202,6 +202,9 @@ examples:
           width: 320
           height: 480
     alternateStates:
+      account-menu-with-larger-browser-font:
+        beforeTakingScreenshot:
+          - increaseFontSizes: 32px
       account-menu-dropdown-open:
         beforeTakingScreenshot:
           - click: ".hmrc-account-menu__link[aria-expanded='false']"
@@ -212,4 +215,4 @@ examples:
       account-menu-dropdown-open-active-link-focused:
         beforeTakingScreenshot:
           - click: ".hmrc-account-menu__link[aria-expanded='false']"
-          - focus: ".hmrc-account-menu__link[href='/messages/href']"
+          - focus: ".hmrc-account-menu__link[href='/messages/href']"
diff --git a/src/components/account-menu/_account-menu.scss b/src/components/account-menu/_account-menu.scss
@@ -68,12 +68,13 @@ $hmrc-transition-type: "all";
 }
 
 .hmrc-account-menu__link {
+  @include govuk-typography-responsive($size: 16);
+
   box-sizing: border-box;
   display: inline-block;
   padding: 12px 16px 8px;
   border-bottom: 4px solid transparent;
   color: $hmrc-account-menu-grey-1;
-  font-size: 16px;
   font-weight: 300;
   line-height: 1.25;
   text-decoration: none;