Merge pull request #8427 from cfpb/ans_browser_support

Add browser-support page to mkdocs and update references

.github/PULL_REQUEST_TEMPLATE.md

@@ -58,19 +58,8 @@ Feel free to delete this section if not applicable to this PR.
 
 #### Browser testing
 
-Visually tested in the following supported browsers:
-- [ ] Firefox
-- [ ] Chrome
-- [ ] Safari
-- [ ] Edge 18 (the last Edge prior to it switching to Chromium)
-- [ ] Internet Explorer 11 and 8 (via emulation in 11's dev tools)
-- [ ] Safari on iOS
-- [ ] Chrome on Android
-
-<!--
-Further guidance on browser support can be found at:
-https://github.com/cfpb/development/blob/main/guides/browser-support.md
--->
+Check the current browser support cutoff list](https://cfpb.github.io/consumerfinance.gov/browser-support#current-browser-support-metrics) for browsers that are advisable
+to prioritize for testing.
 
 #### Accessibility
 

CONTRIBUTING.md

@@ -44,34 +44,9 @@ When in doubt, mimic the styles and patterns in the existing codebase.
 
 ### Browser support
 
-- We serve JavaScript to any browser that
-  [supports fetch](https://caniuse.com/fetch).
-  We use [esbuild](https://github.com/evanw/esbuild) to transpile
-  and minify our JavaScript.
-
-- We prefix CSS for [every browser in our browserslist](https://github.com/cfpb/consumerfinance.gov/blob/main/package.json#L18).
-  We use [autoprefixer](https://github.com/postcss/autoprefixer) to add
-  vendor-specific prefixes to rules where necessary.
-
-#### Outputting browser support metrics
-
-Within the root directory, run `npx browserslist` to output the set of browser
-targets given to `autoprefixer` (CSS) transpiling.
-
-> [!NOTE]
-> A browserslist string is used in `package.json`.
-> See the
-> [browserslist docs](https://github.com/browserslist/browserslist#full-list)
-> for information on this string and the defaults.
-
-For JavaScript, `esbuild` uses the [`es6`](http://es6-features.org/) target and
-our code conditionally includes JavaScript in browsers that
-[support fetch](https://caniuse.com/fetch).
-
-> [!NOTE]
-> JavaScript may still
-> be delivered to legacy browsers in the form of our analytics and
-> related scripts.
+See our
+[browser support docs](https://cfpb.github.io/consumerfinance.gov/browser-support)
+for more information.
 
 #### Browser Testing
 

docs/browser-support.md

@@ -0,0 +1,63 @@
+# Browser support
+
+- We serve JavaScript to any browser that
+  [supports fetch](https://caniuse.com/fetch).
+  We use [esbuild](https://github.com/evanw/esbuild) to transpile
+  and minify our JavaScript.
+
+- We prefix CSS for [every browser in our browserslist](https://github.com/cfpb/consumerfinance.gov/blob/main/package.json#L18).
+  We use [autoprefixer](https://github.com/postcss/autoprefixer) to add
+  vendor-specific prefixes to rules where necessary.
+
+## Outputting browser support metrics
+
+Within the root directory, run `npx browserslist` to output the set of browser
+targets given to `autoprefixer` (CSS) transpiling.
+
+!!! note
+
+    A browserslist string is used in `package.json`.
+    See the
+    [browserslist docs](https://github.com/browserslist/browserslist#full-list)
+    for information on this string and the defaults.
+
+For JavaScript, `esbuild` uses the [`es6`](http://es6-features.org/) target and
+our code conditionally includes JavaScript in browsers that
+[support fetch](https://caniuse.com/fetch).
+
+!!! note
+
+    JavaScript may still
+    be delivered to legacy browsers in the form of our analytics and
+    related scripts.
+
+## Current browser support metrics
+
+Twice per year we aim to updated the browser metrics that are fed into our
+browserslist config at
+[@cfpb/browserslist-config](https://github.com/cfpb/cfpb-analytics/tree/main/packages/browserslist-config).
+
+Per the [best practices published by browserslist](https://github.com/browserslist/browserslist?tab=readme-ov-file#best-practices),
+we use a 0.2% cutoff with this config for the browsers
+that get fed into our build systems.
+
+However, for what we actively aim to support and test, we use a higher cutoff
+of 1%. The current 1% cutoff list is:
+
+```
+and_chr 123
+chrome 124
+chrome 123
+chrome 122
+chrome 121
+chrome 120
+edge 123
+edge 122
+edge 121
+edge 120
+ios_saf 17.4
+ios_saf 17.3
+ios_saf 17.2
+ios_saf 17.1
+ios_saf 16.6-16.7
+```

mkdocs.yml

@@ -18,6 +18,7 @@ nav:
       - Django and Wagtail Migrations: migrations.md
       - Wagtail Pages: wagtail-pages.md
   - Supporting Features:
+      - Browser Support: browser-support.md
       - Caching: caching.md
       - Feature Flags: feature-flags.md
       - Filterable Lists: filterable-lists.md