Update browser support to Firefox ESR, Safari 15.6+, evergreen (Fix #1145)

AGENTS.md

@@ -23,7 +23,7 @@ A single component is spread across **three parallel trees**, by file type, that
 
 **Theming:** Two brands — **Mozilla** (default) and **Firefox**. Themes are CSS Custom Properties declared on `:root` in `includes/themes/` (`_mozilla.scss`, `_firefox.scss`). For any themeable property (foreground/background/link colors, heading & body font families) use `var(--...)` (e.g. `var(--background-color)`, `var(--theme-heading-text-color)`). **Exception: text sizing** — use the type-scale mixins (`@include text-heading-lg;`), never custom properties, because the mixins bake in responsive media queries.
 
-**JavaScript:** Plain ES (target IE10 via Babel in tests), `module.exports`, no framework. Each module is an object named `Mzp<Thing>` (e.g. `MzpDetails`, `MzpModal`) exposing `init()`/`destroy()` and exported as a **UMD global** named in `webpack.entrypoints.js`. Modules feature-detect via `MzpSupports` and lean on `MzpUtils` helpers.
+**JavaScript:** Plain ES (targets the `browserslist` matrix in `package.json` — Firefox ESR, Safari 15.6+, evergreen — via Babel), `module.exports`, no framework. Each module is an object named `Mzp<Thing>` (e.g. `MzpDetails`, `MzpModal`) exposing `init()`/`destroy()` and exported as a **UMD global** named in `webpack.entrypoints.js`. Modules feature-detect via `MzpSupports` and lean on `MzpUtils` helpers.
 
 ## Build, Test, and Development Commands
 

CHANGELOG.md

@@ -1,6 +1,6 @@
 # HEAD
 
-This version introduces some major modernization changes around CSS and drops browser support for XXXX ( to be defined before V23 is published).
+This version introduces some major modernization changes around CSS and updates the supported browser matrix to Firefox ESR, Safari 15.6+, and evergreen browsers.
 
 The good news is we don't expect many visible changes in modern browsers and you should be able to do some automated visual regression testing to help with the migration.
 
@@ -10,6 +10,8 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust
 
 ### Browser Support
 
+* (breaking) Updated the supported browser matrix to Firefox ESR, Safari 15.6+, and evergreen browsers (`browserslist` in `package.json`).
+* (breaking) Removed the Babel `targets: { ie: '10' }` override in every webpack config (docs site, npm package, and test bundle). The compiled JS now targets the `browserslist` matrix above instead of IE10.
 * (breaking) Remove support for vendor prefixing (#957)
 
 ### Typography

components/00-basic-elements/details/readme.md

@@ -1,7 +1,9 @@
 The `<details>` element was introduced in HTML5 to provide a native collapsible
-“accordion” widget that previously required JavaScript. However, older browsers
-don’t support the newer elements, so Protocol includes a JavaScript polyfill to
-improve backwards compatibility.
+“accordion” widget that previously required JavaScript. It's natively supported
+across Protocol's [supported browsers](/docs/usage/browser-support.html), so no
+polyfill is needed. If you need more control over the open/close behavior than
+the native element provides, use the JS-driven Protocol
+[Details component](details-component) instead.
 
 The `<details>` element requires a `<summary>`, which you can combine with
 headings to convey hierarchy, if appropriate.

components/button/button--with-icon.readme.md

@@ -16,7 +16,7 @@ consistency and reliability, use an image.
 
 - Prefer embedded SVG over an external `img` (whether SVG or other format). An
   inline SVG icon can more easily change color for the different button states
-  and style variants. Be aware that very old browsers don’t support SVG.
+  and style variants.
 
 - Consider the text direction of the page language. Arrows in particular indicate
   a specific orientation that may be confusing in text that flows the opposite

components/details-component/details-component.html

@@ -18,14 +18,6 @@ <h4>Sub Heading</h4>
 <script src="{{ '/protocol/js/details.js' | path }}"></script>
 
 <script>
-  // check if details is supported, if not, init this as a polyfill
-  if (typeof window.MzpSupports !== 'undefined') {
-      // not supported, add support
-      if(!window.MzpSupports.details) {
-          window.MzpDetails.init('summary');
-      }
-  }
-
   // init generic class indicating headings should be made into open/close component
   window.MzpDetails.init('.mzp-c-details > h2');
   window.MzpDetails.init('.mzp-c-details > h3');

components/details-component/readme.md

@@ -26,14 +26,6 @@ const MzpDetails = window.MzpDetails;
 Then initialize the component:
 
 ```javascript
-// check if details is supported, if not, init this as a polyfill
-if (typeof window.MzpSupports !== 'undefined') {
-    // not supported, add support
-    if(!window.MzpSupports.details) {
-        window.MzpDetails.init('summary');
-    }
-}
-
 // init generic class indicating headings should be made into open/close component
 window.MzpDetails.init('.mzp-c-details > h2');
 window.MzpDetails.init('.mzp-c-details > h3');

components/layout/02-columns/readme.md

@@ -15,10 +15,7 @@ two columns in one-third/two-thirds proportions. If you need that kind of layout
 you’ll need to use an alternative method.
 
 This uses [CSS grid](https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout),
-which is [well supported in modern browsers](https://caniuse.com/css-grid) but
-not supported in any browsers release prior to 2018. Older browsers will ignore
-the column layout and content will be linearized by default. If you need a
-multi-column layout in older browsers you’ll need to use an alternative method.
+which is well supported across Protocol's supported browsers.
 
 The contents of each column should be in its own container element that must be
 a _direct child_ of the multi-column container, as shown in the examples. The

docs/01-fundamentals/02-themes.md

@@ -13,9 +13,6 @@ Our CSS framework achieves the different themes by using [CSS Custom properties]
 set on the root element using the `:root` pseudo-class, and these custom properties will be changed depending on
 which brand is represented on the page.
 
-(Note: Since CSS Custom Properties aren't supported by legacy browsers,
-Protocol still uses a default theme with Sass variables for those browsers.)
-
 Protocol defaults to the Mozilla brand “out of the box.” If you use the packaged,
 pre-compiled CSS, you’ll have everything you need for a Mozilla-branded website
 without needing to compile the Sass yourself. We still recommend doing your own

docs/02-usage/03-browser-support.md

@@ -0,0 +1,31 @@
+---
+title: Browser Support
+label: Browser Support
+---
+
+Protocol supports:
+
+- **Firefox ESR** and current Firefox
+- **Safari 15.6** and later (macOS and iOS)
+- **Chrome, Edge, and other "evergreen" browsers**
+
+This matrix is declared as the `browserslist` key in
+[`package.json`](https://github.com/mozilla/protocol/blob/main/package.json),
+which drives both the Sass build's CSS minification and the Babel target for
+the compiled JavaScript.
+
+## What this means for your project
+
+If you compile Protocol's Sass yourself, your own build tooling should target
+the same matrix (or a subset of it) to avoid re-introducing legacy CSS output.
+
+Protocol no longer ships vendor-prefixed fallbacks, `@supports` feature-query
+fallbacks for older engines, or IE-era polyfills. If your project needs to
+support browsers outside this matrix, you'll need to add your own fallback
+styles and polyfills.
+
+## Testing
+
+Protocol's automated test suite (`npm test`) runs unit tests in Firefox and
+Chrome. Safari is not currently covered by CI; if you rely on Safari support,
+we recommend a manual smoke test of your integration.

package.json

@@ -56,7 +56,14 @@
     "stylelint-config-standard-scss": "^15.0.1"
   },
   "browserslist": [
-    "defaults",
-    "IE 8"
+    "last 2 chrome versions",
+    "last 2 edge versions",
+    "last 2 firefox versions",
+    "last 2 opera versions",
+    "last 2 samsung versions",
+    "Firefox ESR",
+    "Safari >= 15.6",
+    "iOS >= 15.6",
+    "not dead"
   ]
 }

webpack.docs.build.config.js

@@ -32,14 +32,7 @@ const protocolJSConfig = {
                     loader: 'babel-loader',
                     options: {
                         presets: [
-                            [
-                                '@babel/preset-env',
-                                {
-                                    targets: {
-                                        ie: '10'
-                                    }
-                                }
-                            ]
+                            '@babel/preset-env'
                         ]
                     }
                 }
@@ -168,14 +161,7 @@ const fractalJSConfig = {
                     loader: 'babel-loader',
                     options: {
                         presets: [
-                            [
-                                '@babel/preset-env',
-                                {
-                                    targets: {
-                                        ie: '10'
-                                    }
-                                }
-                            ]
+                            '@babel/preset-env'
                         ]
                     }
                 }

webpack.package.build.config.js

@@ -36,14 +36,7 @@ const jsConfig = {
                     loader: 'babel-loader',
                     options: {
                         presets: [
-                            [
-                                '@babel/preset-env',
-                                {
-                                    targets: {
-                                        ie: '10'
-                                    }
-                                }
-                            ]
+                            '@babel/preset-env'
                         ]
                     }
                 }

webpack.test.config.js

@@ -36,14 +36,7 @@ module.exports = {
                     loader: 'babel-loader',
                     options: {
                         presets: [
-                            [
-                                '@babel/preset-env',
-                                {
-                                    targets: {
-                                        ie: '10'
-                                    }
-                                }
-                            ]
+                            '@babel/preset-env'
                         ]
                     }
                 }