Remove legacy browser support with <script type="module">

.browserslistrc

@@ -1,3 +1,7 @@
+[javascripts]
+supports es6-module
+
+[stylesheets]
 > 0.1% in GB and not dead
 last 6 Chrome versions
 last 6 Firefox versions

app/_templates/layout.njk

@@ -8,7 +8,7 @@
   <link href="https://assets.nhs.uk/fonts/FrutigerLTW01-55Roman.woff2" type="font/woff2" rel="preload" as="font" crossorigin>
   <link href="https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff2" type="font/woff2" rel="preload" as="font" crossorigin>
   <link href="{{ baseUrl }}stylesheets/nhsuk-{{ version }}.min.css" rel="stylesheet">
-  <script src="{{ baseUrl }}javascripts/nhsuk-{{ version }}.min.js" defer></script>
+  <script src="{{ baseUrl }}javascripts/nhsuk-{{ version }}.min.js" type="module"></script>
 {% endblock %}
 
 {# Turn the header and footer off #}

babel.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  browserslistEnv: 'javascripts',
   presets: [
     [
       '@babel/preset-env',

backstop.config.js

@@ -80,7 +80,7 @@ module.exports = {
     engine_scripts: 'tests/backstop/engine_scripts',
     html_report: 'tests/backstop/html_report'
   },
-  readySelector: 'body.js-enabled',
+  readySelector: 'body.nhsuk-frontend-supported',
   report: ['browser'],
   scenarios: [
     {

docs/contributing/browser-support.md

@@ -2,47 +2,58 @@
 
 NHS.UK frontend browser support is shown in the table below.
 
-| Operating system | Browser                            | Support   |
-| ---------------- | ---------------------------------- | --------- |
-| Windows          | Internet Explorer 11               | compliant |
-| Windows          | Edge (latest versions)             | compliant |
-| Windows          | Google Chrome (latest versions)    | compliant |
-| Windows          | Mozilla Firefox (latest versions)  | compliant |
-| macOS            | Safari 12+                         | compliant |
-| macOS            | Google Chrome (latest versions)    | compliant |
-| macOS            | Mozilla Firefox (latest versions)  | compliant |
-| iOS              | Safari for iOS 12.1 and later      | compliant |
-| iOS              | Google Chrome (latest versions)    | compliant |
-| Android          | Google Chrome (latest versions)    | compliant |
-| Android          | Samsung Internet (latest versions) | compliant |
-
-'Compliant' means that components should look and function as they were designed to do in other modern browsers.
-
-'Latest versions' refers to the latest stable version and the version immediately before that.
-
-We no longer support older versions of Internet Explorer. This is due to the very low and falling numbers that these browsers make up compared to our total visits. Read the blog post [Changing our testing requirements for Internet Explorer 8, 9 and 10](https://technology.blog.gov.uk/2018/06/26/changing-our-testing-requirements-for-internet-explorer-8-9-and-10/) by GOV.UK for more information on why we have done this.
+| Browser                        | Support   |
+| ------------------------------ | --------- |
+| Chrome (stable versions)       | Compliant |
+| Chrome 61 and later            | Necessary |
+| Firefox (stable versions)      | Compliant |
+| Firefox 60 and later           | Necessary |
+| Edge (stable versions)         | Compliant |
+| Edge 16-18, Edge 79 and later  | Necessary |
+| Internet Explorer 11           | Limited   |
+| Safari (stable versions)       | Compliant |
+| Safari 11 and later            | Necessary |
+| Safari 10.3 (iOS)              | Limited   |
+| Safari 10.1 (macOS)            | Limited   |
+| Opera (most recent)            | Compliant |
+| Opera 48 and later             | Necessary |
+| Samsung Internet (most recent) | Compliant |
+| Samsung Internet 8.2 and later | Necessary |
+
+From NHS.UK frontend v10.0.0 onwards, Internet Explorer 11 will no longer run NHS.UK frontend JavaScript and support is completely removed for Internet Explorer 8 to 10. Our CSS are still compatible with Internet Explorer 11.
+
+Stable versions of browsers refer to all stable releases of Chrome, Firefox and Edge released in the last 6 months and the last 4 releases of Safari.
+
+For 'compliant' browsers we aim to provide the same baseline experience.
+
+For 'necessary' browsers we aim to support optional enhancements as much as possible. However, we might sometimes need to adjust the component's behaviour, while still allowing the users to complete their task. This might include:
+
+- falling back to the no-JavaScript experience
+- disabling parts of the enhancement
+- doing a simpler alternative
+
+For 'limited' browsers we do not download or attempt to parse NHS.UK frontend’s JavaScript. We will not regularly test in these browsers. We will not fix bugs affecting these browsers.
 
 # Assistive technology support
 
-We test the NHS.UK frontend with the following assistive technology:
+We test NHS.UK frontend with the following assistive technology:
 
-| Software                                                                                              | Type                                   | Browser                                       |
-| ----------------------------------------------------------------------------------------------------- | -------------------------------------- | --------------------------------------------- |
-| [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS)                                     | Windows desktop screen reader          | Internet Explorer 11, Chrome (latest version) |
-| [NVDA](https://www.nvaccess.org/)                                                                     | Windows desktop screen reader          | Firefox (latest versions)                     |
-| [VoiceOver](https://www.apple.com/uk/accessibility/iphone/vision/)                                    | Apple mobile and desktop screen reader | Safari 12+                                    |
-| [TalkBack](https://support.google.com/accessibility/android/topic/3529932?hl=en-GB&ref_topic=9078845) | Android mobile screen reader           | Chrome (latest version)                       |
-| [Dragon NaturallySpeaking](https://www.nuance.com/en-gb/dragon.html)                                  | Windows speech recognition             | Internet Explorer 11                          |
-| [ZoomText](https://www.zoomtext.com/products/zoomtext-magnifierreader/)                               | Windows desktop screen magnifier       | Internet Explorer 11                          |
+| Software                                            | Software version | Browser                                  |
+| --------------------------------------------------- | ---------------- | ---------------------------------------- |
+| JAWS (desktop screen reader)                        | 2019 or later    | Chrome or Edge (latest version)          |
+| NVDA (desktop screen reader)                        | Latest           | Chrome, Firefox or Edge (latest version) |
+| VoiceOver on iOS (mobile screen reader)             | Latest           | Safari (latest version                   |
+| TalkBack (mobile screen reader)                     | Latest           | Chrome (latest version)                  |
+| Windows Magnifier or Apple Zoom (screen magnifiers) | Latest           | Any                                      |
+| Dragon (speech recognition)                         | 15 or later      | Chrome (latest version)                  |
 
-Testing with the various technologies above should cover the vast amount of
-users who use assistive technologies.
+This table is based on the [2016 survey of assistive technologies used to access GOV.UK](https://accessibility.blog.gov.uk/2016/11/01/results-of-the-2016-gov-uk-assistive-technology-survey/) and the more recent [WebAIM screen reader survey](https://webaim.org/projects/screenreadersurvey9/).
 
 We also test that our components:
 
 - are accessible using a keyboard only
 - function correctly when using [high contrast mode in Windows](https://support.microsoft.com/en-gb/help/13862/windows-use-high-contrast-mode)
-- function correctly when changing colour schemes in ZoomText
+- function correctly when using ZoomText (screen magnifier)
 
 ---
 

docs/contributing/coding-standards.md

@@ -147,7 +147,7 @@ Bad:
 ```scss
 .nhsuk-checkboxes__conditional {
   // ...
-  .js-enabled &--hidden {
+  .nhsuk-frontend-supported &--hidden {
     // ...
   }
  // ...
@@ -161,7 +161,7 @@ Good:
   // ...
 }
 
-.js-enabled .nhsuk-checkboxes__conditional--hidden {
+.nhsuk-frontend-supported .nhsuk-checkboxes__conditional--hidden {
   // ...
 }
 ```

docs/contributing/testing.md

@@ -27,41 +27,7 @@ These statistics are from the NHS website, using Google analytics, over a 1 year
 | Large Desktop          | 1920x1080         | 2.45%         |
 | Small Desktop, Laptop  | 1280x1024         | 1.21%         |
 
-## Browser support
-
-'Compliant' means that components should look and function as they were designed to do in other modern browsers.
-
-'Latest versions' refers to the latest stable version and the version immediately before that.
-
-We no longer support older versions of Internet Explorer. This is due to the very low and falling numbers that these browsers make up compared to our total visits. Read the blog post [Changing our testing requirements for Internet Explorer 8, 9 and 10](https://technology.blog.gov.uk/2018/06/26/changing-our-testing-requirements-for-internet-explorer-8-9-and-10/) by GOV.UK for more information on why we have done this.
-
-| Operating system | Browser                            | Support   |
-| ---------------- | ---------------------------------- | --------- |
-| Windows          | Internet Explorer 11               | compliant |
-| Windows          | Edge (latest versions)             | compliant |
-| Windows          | Google Chrome (latest versions)    | compliant |
-| Windows          | Mozilla Firefox (latest versions)  | compliant |
-| macOS            | Safari 12+                         | compliant |
-| macOS            | Google Chrome (latest versions)    | compliant |
-| macOS            | Mozilla Firefox (latest versions)  | compliant |
-| iOS              | Safari for iOS 12.1 and later      | compliant |
-| iOS              | Google Chrome (latest versions)    | compliant |
-| Android          | Google Chrome (latest versions)    | compliant |
-| Android          | Samsung Internet (latest versions) | compliant |
-
-## Assistive technology support
-
-| Software                                                                                              | Type                                   | Browser                                       |
-| ----------------------------------------------------------------------------------------------------- | -------------------------------------- | --------------------------------------------- |
-| [JAWS](https://www.freedomscientific.com/Products/Blindness/JAWS)                                     | Windows desktop screen reader          | Internet Explorer 11, Chrome (latest version) |
-| [NVDA](https://www.nvaccess.org/)                                                                     | Windows desktop screen reader          | Firefox (latest versions)                     |
-| [VoiceOver](https://www.apple.com/uk/accessibility/iphone/vision/)                                    | Apple mobile and desktop screen reader | Safari 12+                                    |
-| [TalkBack](https://support.google.com/accessibility/android/topic/3529932?hl=en-GB&ref_topic=9078845) | Android mobile screen reader           | Chrome (latest version)                       |
-| [Dragon NaturallySpeaking](https://www.nuance.com/en-gb/dragon.html)                                  | Windows speech recognition             | Internet Explorer 11                          |
-| [ZoomText](https://www.zoomtext.com/products/zoomtext-magnifierreader/)                               | Windows desktop screen magnifier       | Internet Explorer 11                          |
-
-Testing with the various technologies above should cover the vast amount of
-users who use assistive technologies.
+Find out about [browser support](./browser-support.md#browser-support) and [assistive technology](./browser-support.md#assistive-technology-support).
 
 ### How to test
 

docs/installation/installing-compiled.md

@@ -29,7 +29,7 @@ If you require any of this functionality, you should [install using npm](/docs/i
    <link rel="stylesheet" href="css/nhsuk-[latest version].min.css">
 
    <!-- Scripts -->
-   <script src="js/nhsuk-[latest version].min.js" defer></script>
+   <script src="js/nhsuk-[latest version].min.js" type="module"></script>
 
    <!-- Favicons -->
    <link rel="shortcut icon" href="assets/favicons/favicon.ico" type="image/x-icon">
@@ -49,7 +49,7 @@ If you require any of this functionality, you should [install using npm](/docs/i
    Add the following JavaScript to the top of the `<body>` section of your page template:
 
    ```html
-   <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+   <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' nhsuk-frontend-supported' : '');</script>
    ```
 
 4. Create pages using NHS.UK frontend

docs/installation/installing-with-npm.md

@@ -74,24 +74,24 @@ You should include NHS.UK frontend JavaScript in your project to ensure that all
 Add the following JavaScript to the top of the `<body>` section of your page template:
 
 ```js
-document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' nhsuk-frontend-supported' : '');</script>
 ```
 
 ### Option 1: Include compiled JavaScript
 
-Include the `node_modules/nhsuk-frontend/dist/nhsuk.min.js` script in the `<head>` of your page using the `defer` attribute.
+Include the `node_modules/nhsuk-frontend/dist/nhsuk.min.js` script in the `<head>` of your page using the `type="module"` attribute.
 
-> The defer attribute is used for performance benefits as the browser loads the JavaScript file as soon as possible, due to it being in the `<head>`, but will not run until after the page has loaded.
+> The `type="module"` attribute stops Internet Explorer 11 and other older browsers running the JavaScript, which relies on features older browsers might not support and could cause errors. The script will be loaded as soon as possible, due to it being in the `<head>`, but will not run until after the page has loaded.
 
 You might wish to copy the file into your project or reference it straight from node_modules.
 
 ```html
-    <script src="path-to-assets/nhsuk.min.js" defer></script>
+    <script src="path-to-assets/nhsuk.min.js" type="module"></script>
   </head>
 ```
 
 ```html
-    <script src="node_modules/nhsuk-frontend/dist/nhsuk.min.js" defer></script>
+    <script src="node_modules/nhsuk-frontend/dist/nhsuk.min.js" type="module"></script>
   </head>
 ```
 
@@ -114,9 +114,6 @@ Rather than using `initAll`, you can initialise individual components used by yo
 import initRadios from 'nhsuk-frontend/packages/components/radios/radios.js';
 import initSkipLink from 'nhsuk-frontend/packages/components/skip-link/skip-link.js';
 
-// Polyfills
-import 'nhsuk-frontend/packages/polyfills.js';
-
 // Initialise components
 document.addEventListener('DOMContentLoaded', () => {
   initRadios();

packages/.eslintrc.js

@@ -16,9 +16,25 @@ module.exports = {
       },
       plugins: ['es-x'],
       rules: {
+        // Babel transpiles ES2020 class fields
+        'es-x/no-class-fields': 'off',
+
+        // Babel transpiles ES2022 class static fields
+        'es-x/no-class-static-fields': 'off',
+
         // ES modules include ES2016 '[].includes()' coverage
         // https://browsersl.ist/#q=supports+es6-module+and+not+supports+array-includes
-        'es-x/no-array-prototype-includes': 'off'
+        'es-x/no-array-prototype-includes': 'off',
+
+        // Babel transpiles ES2020 `??` nullish coalescing
+        'es-x/no-nullish-coalescing-operators': 'off',
+
+        // ES modules include ES2017 'Object.entries()' coverage
+        // https://browsersl.ist/#q=supports+es6-module+and+not+supports+object-entries
+        'es-x/no-object-entries': 'off',
+
+        // Babel transpiles ES2020 optional chaining
+        'es-x/no-optional-chaining': 'off'
       }
     }
   ]

packages/components/checkboxes/_index.scss

@@ -150,6 +150,6 @@ $nhsuk-checkboxes-label-padding-left-right: 12px;
   }
 }
 
-.js-enabled .nhsuk-checkboxes__conditional--hidden {
+.nhsuk-frontend-supported .nhsuk-checkboxes__conditional--hidden {
   display: none;
 }

packages/components/header/_header-base.scss

@@ -484,7 +484,7 @@
     justify-content: space-between;
   }
 
-  .js-enabled & {
+  .nhsuk-frontend-supported & {
     flex-wrap: nowrap;
     overflow: hidden;
   }

packages/components/radios/_index.scss

@@ -175,6 +175,6 @@ $nhsuk-radios-focus-width: $nhsuk-focus-width + 1px;
   }
 }
 
-.js-enabled .nhsuk-radios__conditional--hidden {
+.nhsuk-frontend-supported .nhsuk-radios__conditional--hidden {
   display: none;
 }

packages/components/tabs/_index.scss

@@ -41,8 +41,8 @@
   @include nhsuk-responsive-margin(8, "bottom");
 }
 
-// JavaScript enabled
-.js-enabled {
+// ES module JavaScript supported
+.nhsuk-frontend-supported {
   @include nhsuk-media-query($from: tablet) {
     .nhsuk-tabs__list {
       border-bottom: 1px solid $nhsuk-border-color;

packages/index.js

@@ -11,8 +11,6 @@ const initRadios = require('./components/radios/radios')
 const initSkipLink = require('./components/skip-link/skip-link')
 const initTabs = require('./components/tabs/tabs')
 
-require('./polyfills.js')
-
 /**
  * Use this function to initialise nhsuk-frontend components within a
  * given scope. This function is called by default with the document

packages/template.njk

@@ -28,7 +28,7 @@
   </head>
 
   <body {% if bodyClasses %}class="{{ bodyClasses }}"{% endif %} {{- nhsukAttributes(bodyAttributes) }}>
-    <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+    <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' nhsuk-frontend-supported' : '');</script>
     {% block bodyStart %}{% endblock %}
 
       {% block skipLink %}

shared/tasks/scripts.mjs

@@ -49,7 +49,7 @@ export function webpackJS(done) {
           colors: true,
           errors: false
         },
-        target: 'browserslist'
+        target: 'browserslist:javascripts'
       }).on('error', (error) => {
         done(
           new PluginError('webpackJS', error, {