From d915beef892dd533061ce726079723420e8d72cd Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Tue, 19 Oct 2021 15:14:04 +0100 Subject: [PATCH 1/3] Show alert mock up in high contrast mode The mock up component, shown in all current/past/rejected alert pages, doesn't show fully in high contrast modes because it uses its background colour to show its shape and backgrounds are hidden in high contrast modes. This uses a technique from design system which adds a transparent border to these elements to show their shapes. This works because borders of any colour (even transparent) are rendered as the foreground colour. --- app/assets/stylesheets/components/broadcast-message.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/components/broadcast-message.scss b/app/assets/stylesheets/components/broadcast-message.scss index d9e51f85f..672ce5207 100644 --- a/app/assets/stylesheets/components/broadcast-message.scss +++ b/app/assets/stylesheets/components/broadcast-message.scss @@ -6,6 +6,7 @@ max-width: 464px; box-sizing: border-box; padding: govuk-spacing(9) govuk-spacing(3) govuk-spacing(3) govuk-spacing(3); + border: solid 1px transparent; // to show it's area in high contrast mode background: $panel-colour; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05); border-radius: 5px; @@ -18,10 +19,11 @@ &-heading { display: block; position: absolute; - top: 0; - left: 0; + top: -1px; + left: -1px; padding: govuk-spacing(2) + 1px govuk-spacing(3) (govuk-spacing(2) - 1px) 46px; - width: 100%; + border: solid 1px transparent; // to show it's area in high contrast mode + width: calc(100% + 2px); // grow to overlap wrapper's border (when combined with top and left) box-sizing: border-box; font-weight: bold; background: $grey-1 file-url('exclamation.svg'); From 58d80f5097d7b77cb79646eeb1239afa47f927a6 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 28 Oct 2021 12:13:29 +0100 Subject: [PATCH 2/3] Give link-buttons an outline in high contrast The link-buttons we use in our pill component have a blue background which shows the area they occupy by default. In high contrast mode, backgrounds are hidden so the link-button text looks like it is floating because you can't see the edge of their area. These changes use the trick of adding a transparent border. This is hidden by default but displays in high contrast mode to show the edges of the link-button. I've reduced the padding to accommodate the extra space it takes up. --- app/assets/stylesheets/components/pill.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss index e497852de..8ef516b31 100644 --- a/app/assets/stylesheets/components/pill.scss +++ b/app/assets/stylesheets/components/pill.scss @@ -122,7 +122,8 @@ display: block; text-align: left; - padding: 10px govuk-spacing(3); + padding: 9px (govuk-spacing(3) - 1); + border: 1px solid transparent; text-align: center; &:link, From 0971c0a3d891f29039b9a782a665962aab12b782 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Wed, 10 Nov 2021 11:39:06 +0000 Subject: [PATCH 3/3] Fix enhancedTextbox styles in high contrast mode The enhancedTextbox component has an element that sits in front of the textbox and draws the highlights over the text. This element has a 2px border so it's dimensions match those of the textbox. This border has a colour of 'transparent' by default, to hide it from view but this is overridden in high contrast modes to match the text colour. This adds some CSS targeting high contrast modes which sets it to match the colour of the background, making it invisible again. --- app/assets/stylesheets/components/textbox.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss index c20769caa..f9687a7ea 100644 --- a/app/assets/stylesheets/components/textbox.scss +++ b/app/assets/stylesheets/components/textbox.scss @@ -39,6 +39,11 @@ padding-bottom: govuk-spacing(3); z-index: 10; + // transparent borders become visible in high contrast modes so set to match background + @media (-ms-high-contrast: active), (forced-colors: active) { + border-color: Canvas; + } + .placeholder, .placeholder-conditional { color: transparent;