From 301480a7324336d7fcf1b64dc5951c33dc4725d0 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 11 Nov 2021 13:49:24 +0000 Subject: [PATCH 1/3] Make SVG icon in alert mock up inline Making the icon an inline SVG lets it inherit colours from the page styles. This helps in forced colour modes, like Windows high contrast mode, where it will match the colour of the text next to it, whatever it is set to. Making it inline requires some changes to the CSS to allow its position to match that of the current background image. This also sets `forced-color-adjust` to `auto` on the `` element, which tells the browser it can control its colours in forced colour modes. This is required because the browsers that support forced colour mode set it to `none` for the `` element by default. --- .../stylesheets/components/broadcast-message.scss | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/components/broadcast-message.scss b/app/assets/stylesheets/components/broadcast-message.scss index 672ce5207..71bfd20f7 100644 --- a/app/assets/stylesheets/components/broadcast-message.scss +++ b/app/assets/stylesheets/components/broadcast-message.scss @@ -21,19 +21,23 @@ position: absolute; top: -1px; left: -1px; - padding: govuk-spacing(2) + 1px govuk-spacing(3) (govuk-spacing(2) - 1px) 46px; + padding: govuk-spacing(2) + 1px govuk-spacing(3) (govuk-spacing(2) - 1px) 15px; 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'); + background: $grey-1; color: $white; - background-size: 22px; - background-repeat: no-repeat; - background-position: govuk-spacing(3) 11px; border-top-right-radius: 5px; border-top-left-radius: 5px; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); + + &__icon { + padding-right: 6px; + // user agents set this to 'none' by default for svgs so set as 'auto' to allow + // colours to be overridden in forced-color modes like Windows high contrast mode + forced-color-adjust: auto; + } } } From aca3af4dbe3794d9e98de773efb6c2b6471488a8 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Wed, 8 Dec 2021 10:06:29 +0000 Subject: [PATCH 2/3] Bring in notifications-utils 50.0.0 Makes the mock up of an alert we show use an inline SVG instead of it as a background image. This means it can use the colour of the heading text next to it in a way that adapts when high contrast mode is on. https://github.com/alphagov/notifications-utils/pull/922 --- requirements.in | 2 +- requirements.txt | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/requirements.in b/requirements.in index 7343ca794..81053f579 100644 --- a/requirements.in +++ b/requirements.in @@ -30,7 +30,7 @@ pyproj==3.2.1 # PaaS awscli-cwlogs>=1.4,<1.5 itsdangerous==1.1.0 # pyup: <2 -notifications-utils @ git+https://github.com/alphagov/notifications-utils.git@49.1.0 +notifications-utils @ git+https://github.com/alphagov/notifications-utils.git@50.0.0 govuk-frontend-jinja @ git+https://github.com/alphagov/govuk-frontend-jinja.git@v0.5.8-alpha # cryptography 3.4+ incorporates Rust code, which isn't supported on PaaS diff --git a/requirements.txt b/requirements.txt index feba75754..94cece298 100644 --- a/requirements.txt +++ b/requirements.txt @@ -123,7 +123,7 @@ mistune==0.8.4 # via notifications-utils notifications-python-client==6.3.0 # via -r requirements.in -notifications-utils @ git+https://github.com/alphagov/notifications-utils.git@49.1.0 +notifications-utils @ git+https://github.com/alphagov/notifications-utils.git@50.0.0 # via -r requirements.in openpyxl==3.0.7 # via pyexcel-xlsx From 8ceff631f493e14712edd9ab52999d7a61c98eef Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Wed, 8 Dec 2021 10:12:55 +0000 Subject: [PATCH 3/3] Remove image used as background before --- app/assets/images/exclamation.svg | 26 -------------------------- 1 file changed, 26 deletions(-) delete mode 100644 app/assets/images/exclamation.svg diff --git a/app/assets/images/exclamation.svg b/app/assets/images/exclamation.svg deleted file mode 100644 index e530210e1..000000000 --- a/app/assets/images/exclamation.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - - -