Reduce Internet Explorer (IE) support in GOV.UK Frontend

[vanitabarrett]

What

In our next major version (v5) we're reducing our support for Internet Explorer:

• dropping support completely for IE8 to 10
• dropping support for JavaScript in IE11 (while keeping support for styling)

CSS

We'll completely remove our support for IE8 to 10. Our components will keep rendering properly and remain functional in IE11 though.

JavaScript

We will no longer support our component's JavaScript enhancement running in any version of Internet Explorer. People using IE11 will get the non-JavaScript version of the components, which will still let them complete their task.

We’ll continue to provide minimal support for v4 for the next 12 months by publishing urgent security updates and major bug fixes (but no new components or features).

Why

We have decided to reduce support for IE11 in GOV.UK Frontend and drop support completely for IE8-10. We shared these proposed changes with the frontend community in GDS and across government, and have only received positive feedback.

We will make these changes in a future breaking release of GOV.UK Frontend (likely v5.0.0).
See our browser proposal for more details.

Impact

Teams still required to support IE11 will remain able to use our components. Those will be lacking their JavaScript enhancement but still allow users to complete their tasks as they are implemented with progressive enhancement in mind.

During the 12 months after the release of v5, they'll also be able to keep using v4, for which JavaScript will keep running in Internet Explorer.

Epic lead

TBD

Who needs to work on this

Developers, Designers, Tech writers

Done when

In v4.x

Beta Give feedback

1. Draft answers to potential support questions about IE/browser support #2625
   javascript support +2
   
2. Decide and document how we release fixes for earlier major versions #2004
   documentation process tooling +3
   
3. Deprecate Sass settings and mixins for building IE8 specific stylesheets #3163
   sass / css 🕔 hours +2
   

Remove legacy code

Beta Give feedback

1. Remove any IE8-10 specific styles and stylesheet(s) #2622
   sass / css +1
   
2. Remove settings and mixins for building IE8 specific stylesheets #3461
   sass / css +1
   
3. Remove polyfills for IE #2506
   documentation javascript performance +3
4. Remove the JavaScript for the Details component #3464
   3 of 3
   design details sass / css +3
5. Update Internet Explorer documentation govuk-frontend-docs#188
   documentation +1
   
6. Remove the fallback PNG from the header component #3624
   breaking change header +2
   

Post v5.0

Beta Give feedback

1. Investigate customised colours on details component in IE11 #937
   accessibility firebreak0722 🔍 investigation +3
2. Unnecessary CSS is included in IE8 stylesheet #3231
   awaiting triage tech debt +2
3. Remove our fallback implementation of Intl.PluralRules #3465
   character count javascript +2
4. Remove the nodeListForEach helper function #3466
   javascript +1

[vanitabarrett]

Written up a card for us to revisit our support of v4, 12 months after releasing this piece of work. #2626

[colinrotherham]

Just moving some related comments from #3559 (comment) so we don't miss anything:

1. There's the SVG fallback govuk-logotype-crown.png image to delete:

   govuk-frontend/src/govuk/components/header/template.njk

   Line 38 in 8ccbb60

   <img src="{{ params.assetsPath | default('/assets/images') }}/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32" alt="">

   govuk-frontend/src/govuk/components/header/_index.scss

   Line 308 in 8ccbb60

   // Hide the inverted crown when printing in browsers that don't support SVG.

2. Documentation to test in Internet Explorer 8, 9 and 10

   govuk-frontend/docs/contributing/testing.md

   Line 61 in 8ccbb60

   - in [Internet Explorer 8](https://frontend.design-system.service.gov.uk/supporting-ie8/), 9 and 10 - components do not need to look perfect

   govuk-frontend/CONTRIBUTING.md

   Line 66 in 8ccbb60

   Your contribution needs to work with certain browsers as set out in [README](README.md#browser-and-assistive-technology-support). See also [supporting Internet Explorer 8](https://frontend.design-system.service.gov.uk/supporting-ie8/).

   govuk-frontend/README.md

   Line 42 in 8ccbb60

   - Internet Explorer 8, 9 and 10, although components may not look perfect

   govuk-frontend/README.md

   Line 54 in 8ccbb60

   - [a separate stylesheet](https://frontend.design-system.service.gov.uk/supporting-ie8/) if you support Internet Explorer 8

   govuk-frontend/docs/contributing/coding-standards/css.md

   Line 200 in 8ccbb60

   This is to ensure compatibility with Internet Explorer 8, which doesn't support the double colon syntax.

   govuk-frontend/docs/contributing/resize-text-in-browsers.md

   Line 46 in 8ccbb60

   ## Resize text in Internet Explorer versions 8 to 11

[domoscargin]

Capturing some stuff we've been chatting about regarding non-vendor polyfills.

Intl.PluralRules - #3465

Intl.NumberFormat

onpageshow (in character-count, checkboxes, radios)

HTMLDetailsElement (in Details)

matchMedia (in header and tabs)

Some of these we soon won't need. For example, some can be removed once #3508 is complete.

Partially addressed in #3723

[domoscargin]

Some non-obvious IE-related things to remove:

• govuk-frontend/packages/govuk-frontend/src/govuk/template.njk

  Lines 11 to 12 in 2c96f0e

  	{# Ensure that older IE versions always render with the correct rendering engine #}
  	<meta http-equiv="X-UA-Compatible" content="IE=edge">

• govuk-frontend/packages/govuk-frontend/src/govuk/components/components.template.test.js

  Lines 61 to 63 in 2c96f0e

  	// Allow for explicit roles on regions that have implict roles
  	// We do this to better support AT with older versions of IE that
  	// have partial support for HTML5 semantic elements

• focusable="false" on SVGs

  govuk-frontend/packages/govuk-frontend/src/govuk/components/button/template.njk

  Lines 21 to 23 in 2c96f0e

  	{#- The SVG needs `focusable="false"` so that Internet Explorer does not
  	treat it as an interactive element - without this it will be
  	'focusable' when using the keyboard to navigate. #}

[domoscargin]

Some non-obvious IE-related things to remove:

• govuk-frontend/packages/govuk-frontend/src/govuk/template.njk

  Lines 11 to 12 in 2c96f0e

  	{# Ensure that older IE versions always render with the correct rendering engine #}
  	<meta http-equiv="X-UA-Compatible" content="IE=edge">

• govuk-frontend/packages/govuk-frontend/src/govuk/components/components.template.test.js

  Lines 61 to 63 in 2c96f0e

  	// Allow for explicit roles on regions that have implict roles
  	// We do this to better support AT with older versions of IE that
  	// have partial support for HTML5 semantic elements

• focusable="false" on SVGs

  govuk-frontend/packages/govuk-frontend/src/govuk/components/button/template.njk

  Lines 21 to 23 in 2c96f0e

  	{#- The SVG needs `focusable="false"` so that Internet Explorer does not
  	treat it as an interactive element - without this it will be
  	'focusable' when using the keyboard to navigate. #}

@querkmachine I have no memory of writing this post, but are these worth cleaning up? Looks like the first two only apply to older IE which we shouldn't need any more. The last one might still be in IE11 and thus in that iffy zone.

[querkmachine]

@domoscargin They're dealt with!

• Remove X-UA-Compatible meta tag #4434
• Remove redundant role attributes #4854

And yeah, focusable="false" is still necessary for IE11 for the time being.

[domoscargin]

Whoops, I was looking at that commit rather than main. Call it a case of the Mondays.

Nice!