From b867f8302853f722fd486e06483899c80543ccc2 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Mon, 27 Feb 2023 15:17:45 +0000 Subject: [PATCH 1/7] Align `.browserslistrc` with GOV.UK Frontend --- .browserslistrc | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/.browserslistrc b/.browserslistrc index f0c4f9e45b..2f52fa766a 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -1,7 +1,17 @@ -last 2 versions +# This list builds on the GOV.UK service manual's browser testing recommendations +# https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices + +> 0.1% +last 2 Chrome versions +last 2 Firefox versions +last 2 Edge versions +last 2 Samsung versions +Safari >= 9 +ie 9-11 +iOS >= 9 + +[oldie] ie 8 -ie 9 -iOS 9 [node] node 18 From cf8b7265ea5c8119089a6e1c54332aa8eec94b39 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Mon, 27 Feb 2023 15:59:47 +0000 Subject: [PATCH 2/7] Remove IE8 scripts, styles, comments, polyfills etc --- .browserslistrc | 3 - .htmlvalidate.js | 9 - lib/metalsmith.js | 8 +- lib/rollup/index.js | 4 - package-lock.json | 7 - package.json | 1 - src/cookies.njk | 4 - src/javascripts/application-ie8.mjs | 20 - src/javascripts/components/back-to-top.mjs | 2 - src/javascripts/components/cookie-banner.mjs | 2 - src/javascripts/components/copy.mjs | 1 - src/javascripts/components/helpers.mjs | 2 +- src/javascripts/components/navigation.mjs | 30 +- src/javascripts/components/options-table.mjs | 2 - src/javascripts/components/search.mjs | 13 - src/javascripts/components/tabs.mjs | 3 - src/javascripts/example.mjs | 2 - src/javascripts/head-ie8.mjs | 5 - .../page-template/block-areas/index.njk | 16 +- src/styles/page-template/custom/code.njk | 17 +- src/styles/page-template/custom/index.njk | 12 +- src/styles/page-template/default/code.njk | 15 +- src/styles/page-template/default/index.njk | 12 +- src/stylesheets/components/_masthead.scss | 11 +- src/stylesheets/components/_site-search.scss | 358 ++++++++---------- src/stylesheets/main-ie8.scss | 3 - src/stylesheets/main.scss | 13 - views/layouts/_generic.njk | 18 +- .../layout-example-full-page-govuk.njk | 9 +- views/layouts/layout-example-full-page.njk | 9 +- views/layouts/layout-example.njk | 8 - views/partials/_example.njk | 2 +- views/partials/_header.njk | 5 - 33 files changed, 196 insertions(+), 430 deletions(-) delete mode 100644 src/javascripts/application-ie8.mjs delete mode 100644 src/javascripts/head-ie8.mjs delete mode 100644 src/stylesheets/main-ie8.scss diff --git a/.browserslistrc b/.browserslistrc index 2f52fa766a..69e9f581bd 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -10,8 +10,5 @@ Safari >= 9 ie 9-11 iOS >= 9 -[oldie] -ie 8 - [node] node 18 diff --git a/.htmlvalidate.js b/.htmlvalidate.js index 673b158880..f49a081762 100644 --- a/.htmlvalidate.js +++ b/.htmlvalidate.js @@ -96,15 +96,6 @@ module.exports = { h1: { permittedContent: ['div', 'label', 'span'] }, - // "frameborder" is required for IE8 support - // https://github.com/alphagov/govuk-design-system/pull/116 - iframe: { - attributes: { - frameborder: { - deprecated: false - } - } - }, // We added a summary to fix an accessibility issue, though we could // probably revisit. // https://github.com/alphagov/govuk-design-system/pull/301 diff --git a/lib/metalsmith.js b/lib/metalsmith.js index 60da800e8f..f74799cda1 100644 --- a/lib/metalsmith.js +++ b/lib/metalsmith.js @@ -139,7 +139,7 @@ module.exports = metalsmith(path.resolve(__dirname, '../')) dest: 'assets' }), - copyAssets('**/{ie8.polyfils,iframeResizer.contentWindow}.@(map|min.js)', { + copyAssets('**/iframeResizer.contentWindow.@(map|min.js)', { cwd: path.join(paths.nodemodules, 'iframe-resizer/js'), dest: 'javascripts/vendor' }) @@ -155,15 +155,9 @@ module.exports = metalsmith(path.resolve(__dirname, '../')) filename: 'modernizr.js' })) - // build the entrypoint for the IE8 JavaScript that goes in the - .use(rollup('javascripts/head-ie8.mjs')) - // build the entrypoint for application specific JavaScript .use(rollup('javascripts/application.mjs')) - // build the entrypoint for application IE8 specific JavaScript - .use(rollup('javascripts/application-ie8.mjs')) - // build GOV.UK Frontend JavaScript .use(rollup('javascripts/govuk-frontend.mjs')) diff --git a/lib/rollup/index.js b/lib/rollup/index.js index b1e333df2c..224ac33b0c 100644 --- a/lib/rollup/index.js +++ b/lib/rollup/index.js @@ -38,9 +38,6 @@ const plugin = (modulePath, moduleName) => async (files, metalsmith, done) => { // Self-executing function, suitable for + + {#- Include any additional stylesheets specified in the example frontmatter #} {% for stylesheet in stylesheets %} {%- endfor %} + {%- endblock %} {% block bodyStart -%} @@ -89,10 +83,6 @@ stylesheets: {{ super() }} {# Since we’re not extending the Design System layout we need to add this manually #} - - {%- endblock %} diff --git a/src/styles/page-template/custom/code.njk b/src/styles/page-template/custom/code.njk index 5610cdbc9e..b852059d28 100644 --- a/src/styles/page-template/custom/code.njk +++ b/src/styles/page-template/custom/code.njk @@ -29,24 +29,11 @@ ignore_in_sitemap: true {% block pageTitle %}GOV.UK - Customised page template{% endblock %} {% block headIcons %} - {{ super() }} + {{ super() }} {% endblock %} {% block head %} - - - - - {# For Internet Explorer 8, you need to compile specific stylesheet #} - {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #} - - - {# For older browsers to allow them to recognise HTML5 elements such as `
` #} - + {% endblock %} {% block bodyStart %} diff --git a/src/styles/page-template/custom/index.njk b/src/styles/page-template/custom/index.njk index cc61e0cc66..858daa2d87 100644 --- a/src/styles/page-template/custom/index.njk +++ b/src/styles/page-template/custom/index.njk @@ -34,13 +34,7 @@ ignore_in_sitemap: true {% block head %} - - - - + {% endblock %} @@ -157,9 +151,5 @@ ignore_in_sitemap: true {% block bodyEnd %} - - {% endblock %} diff --git a/src/styles/page-template/default/code.njk b/src/styles/page-template/default/code.njk index 162b3fe03f..1641ad59f9 100644 --- a/src/styles/page-template/default/code.njk +++ b/src/styles/page-template/default/code.njk @@ -6,20 +6,7 @@ ignore_in_sitemap: true {% extends "govuk/template.njk" %} {% block head %} - - - - - {# For Internet Explorer 8, you need to compile specific stylesheet #} - {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #} - - - {# For older browsers to allow them to recognise HTML5 elements such as `
` #} - + {% endblock %} {% block content %} diff --git a/src/styles/page-template/default/index.njk b/src/styles/page-template/default/index.njk index 168ec90c2c..2f490d6eba 100644 --- a/src/styles/page-template/default/index.njk +++ b/src/styles/page-template/default/index.njk @@ -6,13 +6,7 @@ layout: false {% block head %} - - - - + {% endblock %} @@ -22,9 +16,5 @@ layout: false {% block bodyEnd %} - - {% endblock %} diff --git a/src/stylesheets/components/_masthead.scss b/src/stylesheets/components/_masthead.scss index e9badec83e..323a9a5038 100644 --- a/src/stylesheets/components/_masthead.scss +++ b/src/stylesheets/components/_masthead.scss @@ -18,12 +18,9 @@ .app-masthead__image { display: none; - - @include govuk-not-ie8 { - @include govuk-media-query($from: desktop) { - display: block; - width: 100%; - margin-top: govuk-spacing(3); - } + @include govuk-media-query($from: desktop) { + display: block; + width: 100%; + margin-top: govuk-spacing(3); } } diff --git a/src/stylesheets/components/_site-search.scss b/src/stylesheets/components/_site-search.scss index 069b4b401b..d06b8c5b10 100644 --- a/src/stylesheets/components/_site-search.scss +++ b/src/stylesheets/components/_site-search.scss @@ -12,239 +12,215 @@ $icon-size: 40px; -@include govuk-not-ie8 { - .app-site-search { - position: relative; - width: 100%; - max-width: calc(100% - 75px); - margin-top: govuk-spacing(2); - margin-bottom: govuk-spacing(2); - float: left; +.app-site-search { + position: relative; + width: 100%; + max-width: calc(100% - 75px); + margin-top: govuk-spacing(2); + margin-bottom: govuk-spacing(2); + float: left; + + @include govuk-media-query($from: tablet) { + width: 300px; + max-width: 100%; + float: none; + } + + @include govuk-media-query($from: desktop) { + margin: 0; + margin-top: -5px; // negative margin to vertically align search in header + float: right; + } + + .no-js & { + display: none; @include govuk-media-query($from: tablet) { - width: 300px; - max-width: 100%; - float: none; + display: block; } @include govuk-media-query($from: desktop) { - margin: 0; - margin-top: -5px; // negative margin to vertically align search in header - float: right; - } - - .no-js & { - display: none; - - @include govuk-media-query($from: tablet) { - display: block; - } - - @include govuk-media-query($from: desktop) { - text-align: right; - } + text-align: right; } } +} - .app-site-search__wrapper { - display: block; - position: relative; - } +.app-site-search__wrapper { + display: block; + position: relative; +} - .app-site-search__hint, - .app-site-search__input { - box-sizing: border-box; - width: 100%; - height: govuk-px-to-rem($icon-size); - margin-bottom: 0; // BUG: Safari 10 on macOS seems to add an implicit margin. - padding: govuk-spacing(1); - padding-left: $icon-size - govuk-spacing(1); - border: $govuk-border-width-form-element solid govuk-colour("white"); - border-radius: 0; // Safari 10 on iOS adds implicit border rounding. - -webkit-appearance: none; - } +.app-site-search__hint, +.app-site-search__input { + box-sizing: border-box; + width: 100%; + height: govuk-px-to-rem($icon-size); + margin-bottom: 0; // BUG: Safari 10 on macOS seems to add an implicit margin. + padding: govuk-spacing(1); + padding-left: $icon-size - govuk-spacing(1); + border: $govuk-border-width-form-element solid govuk-colour("white"); + border-radius: 0; // Safari 10 on iOS adds implicit border rounding. + -webkit-appearance: none; +} - .app-site-search__hint { - position: absolute; - color: govuk-colour("mid-grey"); - } +.app-site-search__hint { + position: absolute; + color: govuk-colour("mid-grey"); +} - .app-site-search__input { - position: relative; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='#{encode-hex(govuk-colour("dark-grey"))}'%3E%3C/path%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: center left -2px; - background-size: $icon-size $icon-size; +.app-site-search__input { + position: relative; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='#{encode-hex(govuk-colour("dark-grey"))}'%3E%3C/path%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center left -2px; + background-size: $icon-size $icon-size; - &::placeholder { - color: govuk-colour("dark-grey"); - } + &::placeholder { + color: govuk-colour("dark-grey"); } +} - .app-site-search__input--focused { - border-color: $govuk-focus-text-colour; - outline: $govuk-focus-width solid $govuk-focus-colour; - outline-offset: 0; - box-shadow: inset 0 0 0 $govuk-border-width-form-element; - } +.app-site-search__input--focused { + border-color: $govuk-focus-text-colour; + outline: $govuk-focus-width solid $govuk-focus-colour; + outline-offset: 0; + box-shadow: inset 0 0 0 $govuk-border-width-form-element; +} - .app-site-search__input--show-all-values { - padding: govuk-spacing(1) 34px govuk-spacing(1) govuk-spacing(1); - cursor: pointer; - } +.app-site-search__input--show-all-values { + padding: govuk-spacing(1) 34px govuk-spacing(1) govuk-spacing(1); + cursor: pointer; +} - .app-site-search__dropdown-arrow-down { - display: inline-block; - position: absolute; - z-index: -1; - top: govuk-spacing(2); - right: 8px; - width: 24px; - height: 24px; - } +.app-site-search__dropdown-arrow-down { + display: inline-block; + position: absolute; + z-index: -1; + top: govuk-spacing(2); + right: 8px; + width: 24px; + height: 24px; +} - .app-site-search__menu { - width: 100%; - max-height: 342px; - margin: 0; - padding: 0; - overflow-x: hidden; - border-top: 0; - color: govuk-colour("black"); - background-color: govuk-colour("white"); - } +.app-site-search__menu { + width: 100%; + max-height: 342px; + margin: 0; + padding: 0; + overflow-x: hidden; + border-top: 0; + color: govuk-colour("black"); + background-color: govuk-colour("white"); +} - .app-site-search__menu--visible { - display: block; - } +.app-site-search__menu--visible { + display: block; +} - .app-site-search__menu--hidden { - display: none; - } +.app-site-search__menu--hidden { + display: none; +} - .app-site-search__menu--overlay { - position: absolute; - z-index: 100; - top: 100%; - left: 0; - box-shadow: rgba(govuk-colour("black"), .256863) 0 2px 6px; // stylelint-disable-line number-max-precision - } +.app-site-search__menu--overlay { + position: absolute; + z-index: 100; + top: 100%; + left: 0; + box-shadow: rgba(govuk-colour("black"), .256863) 0 2px 6px; // stylelint-disable-line number-max-precision +} - .app-site-search__menu--inline { - position: relative; - } +.app-site-search__menu--inline { + position: relative; +} - .app-site-search__option { - display: block; - position: relative; - padding: govuk-spacing(2); - border-bottom: solid govuk-colour("mid-grey"); - border-width: 1px 0; - cursor: pointer; - } +.app-site-search__option { + display: block; + position: relative; + padding: govuk-spacing(2); + border-bottom: solid govuk-colour("mid-grey"); + border-width: 1px 0; + cursor: pointer; +} - .app-site-search__option > * { - pointer-events: none; - } +.app-site-search__option > * { + pointer-events: none; +} - .app-site-search__option:first-of-type { - border-top-width: 0; - } +.app-site-search__option:first-of-type { + border-top-width: 0; +} - .app-site-search__option:last-of-type { - border-bottom-width: 0; - } +.app-site-search__option:last-of-type { + border-bottom-width: 0; +} - .app-site-search__option--odd { - $_app-site-search-option-background-color: #fafafa; - background-color: $_app-site-search-option-background-color; - } +.app-site-search__option--odd { + $_app-site-search-option-background-color: #fafafa; + background-color: $_app-site-search-option-background-color; +} - .app-site-search__option--focused, - .app-site-search__option:hover { - border-color: govuk-colour("blue"); - // Add a transparent outline for when users change their colours. - outline: 3px solid transparent; - outline-offset: -3px; - color: govuk-colour("white"); - background-color: govuk-colour("blue"); - - .app-site-search--section { - color: inherit; - } - } +.app-site-search__option--focused, +.app-site-search__option:hover { + border-color: govuk-colour("blue"); + // Add a transparent outline for when users change their colours. + outline: 3px solid transparent; + outline-offset: -3px; + color: govuk-colour("white"); + background-color: govuk-colour("blue"); - .app-site-search__option--no-results { - color: govuk-colour("dark-grey"); - background-color: govuk-colour("white"); - cursor: not-allowed; + .app-site-search--section { + color: inherit; } +} - .app-site-search__hint, - .app-site-search__input, - .app-site-search__option { - @include govuk-font($size: 19); - } +.app-site-search__option--no-results { + color: govuk-colour("dark-grey"); + background-color: govuk-colour("white"); + cursor: not-allowed; +} - .app-site-search__link { - display: none; +.app-site-search__hint, +.app-site-search__input, +.app-site-search__option { + @include govuk-font($size: 19); +} - .no-js & { - @include govuk-media-query($from: tablet) { - display: inline-block; - margin-top: 10px; - color: govuk-colour("white"); +.app-site-search__link { + display: none; - &:focus { - color: govuk-colour("black"); - } + .no-js & { + @include govuk-media-query($from: tablet) { + display: inline-block; + margin-top: 10px; + color: govuk-colour("white"); + + &:focus { + color: govuk-colour("black"); } } } +} - .app-site-search--section { - display: block; - @include govuk-font($size: 16); - color: $govuk-secondary-text-colour; - } - - .app-site-search__aliases { - margin-left: govuk-spacing(1); +.app-site-search--section { + display: block; + @include govuk-font($size: 16); + color: $govuk-secondary-text-colour; +} - &:before { - content: "("; - } +.app-site-search__aliases { + margin-left: govuk-spacing(1); - &:after { - content: ")"; - } + &:before { + content: "("; } - .app-site-search__separator { - display: inline-block; - margin-right: govuk-spacing(1); - margin-left: govuk-spacing(1); + &:after { + content: ")"; } } -// on IE8 we show the sitemap link as Accessible autocomplete -// does not support it -@include govuk-if-ie8 { - .app-site-search { - width: 300px; - margin: 0; - margin-top: -6px; - float: right; - text-align: right; - } - - .app-site-search__link:link { - display: inline-block; - margin-top: 10px; - color: govuk-colour("white"); - - &:focus { - color: govuk-colour("black"); - } - } +.app-site-search__separator { + display: inline-block; + margin-right: govuk-spacing(1); + margin-left: govuk-spacing(1); } diff --git a/src/stylesheets/main-ie8.scss b/src/stylesheets/main-ie8.scss deleted file mode 100644 index 8a58fcebb5..0000000000 --- a/src/stylesheets/main-ie8.scss +++ /dev/null @@ -1,3 +0,0 @@ -$govuk-is-ie8: true; - -@import "main"; diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss index 53666d21d9..86d66d9458 100644 --- a/src/stylesheets/main.scss +++ b/src/stylesheets/main.scss @@ -103,13 +103,6 @@ $app-code-color: #d13118; @include govuk-responsive-margin(6, "bottom"); } - // IE8 does not support the video element, so we hide the element entirely. - @if $govuk-is-ie8 == true { - .app-video { - display: none; - } - } - // Fix monospace font size when used with relative typography // // Browsers automatically reduce monospace font size @@ -180,12 +173,6 @@ $app-code-color: #d13118; $colour-list-breakpoint: 980px; -// for IE8 we need to set that to 'desktop' so media queries get rasterised -// $govuk-ie8-breakpoint is set in Frontend -@if $govuk-is-ie8 == true { - $colour-list-breakpoint: $govuk-ie8-breakpoint; -} - .app-colour-list { width: 100%; border-collapse: collapse; diff --git a/views/layouts/_generic.njk b/views/layouts/_generic.njk index 7cd253144d..8e1f314ea7 100644 --- a/views/layouts/_generic.njk +++ b/views/layouts/_generic.njk @@ -13,21 +13,13 @@ - - - - + {% endblock %} {% block bodyStart %} - {% include "_cookie-banner.njk" %} - {% endblock %} {# We provide our own header, so blank the one provided by the template #} @@ -47,11 +39,5 @@ {% block bodyEnd %} - - - - + {% endblock %} diff --git a/views/layouts/layout-example-full-page-govuk.njk b/views/layouts/layout-example-full-page-govuk.njk index 7969d24266..e9e5c90861 100644 --- a/views/layouts/layout-example-full-page-govuk.njk +++ b/views/layouts/layout-example-full-page-govuk.njk @@ -8,11 +8,8 @@ {#- Include any additional stylesheets specified in the example frontmatter #} {% for stylesheet in stylesheets %} - + {%- endfor %} - {% endblock %} @@ -28,9 +25,5 @@ {% block bodyEnd %} - - {% endblock %} diff --git a/views/layouts/layout-example-full-page.njk b/views/layouts/layout-example-full-page.njk index 3f9bf6e2d0..4c1e8ed4dc 100644 --- a/views/layouts/layout-example-full-page.njk +++ b/views/layouts/layout-example-full-page.njk @@ -8,11 +8,8 @@ {#- Include any additional stylesheets specified in the example frontmatter #} {% for stylesheet in stylesheets %} - + {%- endfor %} - {% endblock %} @@ -30,9 +27,5 @@ {% block bodyEnd %} - - {% endblock %} diff --git a/views/layouts/layout-example.njk b/views/layouts/layout-example.njk index daed3c53f3..f88c376a08 100644 --- a/views/layouts/layout-example.njk +++ b/views/layouts/layout-example.njk @@ -17,10 +17,6 @@ {% for stylesheet in stylesheets %} {%- endfor %} - - {% endblock %} @@ -42,10 +38,6 @@ {% block bodyEnd %} - - {% endblock %} diff --git a/views/partials/_example.njk b/views/partials/_example.njk index a0acdf20e2..2cd08e0884 100644 --- a/views/partials/_example.njk +++ b/views/partials/_example.njk @@ -37,7 +37,7 @@ example in a new tab - + {% endif %} diff --git a/views/partials/_header.njk b/views/partials/_header.njk index 6c11d83c11..537610a730 100644 --- a/views/partials/_header.njk +++ b/views/partials/_header.njk @@ -3,7 +3,6 @@