Improve navigation drawer performance, remove/update old polyfills

package.json

@@ -75,7 +75,6 @@
     "fast-glob": "^3.2.7",
     "firebase": "^9.0.0-beta.7",
     "firebase-tools": "^9.3.0",
-    "focus-visible": "^5.0.2",
     "gorko": "^0.8.0",
     "gray-matter": "^4.0.3",
     "gulp": "^4.0.0",
@@ -112,7 +111,7 @@
     "unistore": "^3.4.1",
     "web-vitals": "^3.1.0",
     "webdev-infra": "1.0.42",
-    "wicg-inert": "^3.0.1",
+    "wicg-inert": "^3.1.2",
     "yaml-front-matter": "^4.0.0"
   },
   "devDependencies": {

src/lib/actions.js

@@ -114,28 +114,34 @@ export const requestFetchReports = store.action((_, url, startDate) => {
  * This is used when we open the navigation drawer or show a modal dialog.
  */
 const disablePage = () => {
-  /** @type {HTMLElement|object} */
-  const main = document.querySelector('main') || {};
-  /** @type {HTMLElement|object} */
-  const footer = document.querySelector('.w-footer') || {};
-
-  document.body.classList.add('overflow-hidden');
-  main.inert = true;
-  footer.inert = true;
+  // Setting the majority of the page as inert can have a significant perf hit when
+  // trying to animate e.g. the navigation drawer, so do it in the frame after this
+  // to avoid blocking on interaction and incurring an INP delay.
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const main = document.querySelector('main');
+      const footer = document.querySelector('footer');
+
+      if (main) main.inert = true;
+      if (footer) footer.inert = true;
+    });
+  });
 };
 
 /**
  * Uninert the page so scrolling and pointer events work again.
  */
 const enablePage = () => {
-  /** @type {HTMLElement|object} */
-  const main = document.querySelector('main') || {};
-  /** @type {HTMLElement|object} */
-  const footer = document.querySelector('.w-footer') || {};
-
-  document.body.classList.remove('overflow-hidden');
-  main.inert = false;
-  footer.inert = false;
+  // Similar to disablePage(), go inert in the next frame to avoid the perf hit.
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const main = document.querySelector('main');
+      const footer = document.querySelector('footer');
+
+      if (main) main.inert = false;
+      if (footer) footer.inert = false;
+    });
+  });
 };
 
 export const openNavigationDrawer = store.action(() => {

src/lib/components/CourseSearchResults/index.js

@@ -5,7 +5,6 @@
 import {html} from 'lit';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import {SearchResults} from '../SearchResults';
-import 'focus-visible';
 
 /**
  * An Algolia search box for courses drawer.

src/lib/components/Search/index.js

@@ -7,7 +7,6 @@ import {BaseStateElement} from '../BaseStateElement';
 import {store} from '../../store';
 import {debounce} from '../../utils/debounce';
 import {logError} from '../../analytics';
-import 'focus-visible';
 
 let algoliaIndexPromise;
 

src/lib/components/SearchResults/index.js

@@ -6,7 +6,6 @@ import {html} from 'lit';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import {BaseElement} from '../BaseElement';
 import {allowHtml, escapeHtml} from '../../../lib/utils/escape-html';
-import 'focus-visible';
 
 /**
  * An Algolia search box.

src/lib/components/SelectGroup/_styles.scss

@@ -147,10 +147,6 @@ input[type='radio'] ~ .web-select-group__selector::after {
   border-color: $FOCUS_COLOR;
 }
 
-.js-focus-visible .web-select-group__input:focus:not(.focus-visible) ~ .web-select-group__selector::before {
-  border-color: transparent;
-}
-
 input[type='radio']:checked ~ .web-select-group__selector::after {
   transform: scale(1);
 }

src/lib/components/SelectGroup/index.js

@@ -1,7 +1,6 @@
 import {html} from 'lit';
 import {BaseElement} from '../BaseElement';
 import {generateIdSalt} from '../../utils/generate-salt';
-import 'focus-visible';
 
 /**
  * Element that renders a radio group or checkbox group.

src/lib/components/Tabs/index.js

@@ -2,7 +2,6 @@ import {html} from 'lit';
 import {BaseElement} from '../BaseElement';
 import {checkOverflow} from '../../utils/check-overflow';
 import {generateIdSalt} from '../../utils/generate-salt';
-import 'focus-visible';
 
 /**
  * Element that wraps each child element in a tab panel

src/styles/components/_buttons.scss

@@ -52,10 +52,6 @@
   outline-offset: -3px;
 }
 
-.js-focus-visible .w-button:focus:not(.focus-visible) { // sass-lint:disable-line class-name-format
-  outline: none;
-}
-
 .w-button[disabled] {
   background: $GREY_300;
   box-shadow: none;
@@ -183,11 +179,6 @@
   outline: none;
 }
 
-.js-focus-visible .w-button--icon:focus:not(.focus-visible), // sass-lint:disable-line class-name-format
-.js-focus-visible .w-button--svg:focus:not(.focus-visible) { // sass-lint:disable-line class-name-format
-  box-shadow: none;
-}
-
 // A round button.
 .w-button--round {
   border-radius: $GLOBAL_ROUNDED;

src/styles/components/_details.scss

@@ -41,11 +41,6 @@ $CHEVRON_MARGIN: 12px;
     box-shadow: 0 0 0 1px $FOCUS_COLOR;
   }
 
-  .js-focus-visible &:focus:not(.focus-visible) .w-details__header::after {
-    // sass-lint:disable-line class-name-format
-    box-shadow: none;
-  }
-
   &:active .w-details__header::after {
     background: $WEB_PRIMARY_COLOR_100;
   }

src/styles/components/_self-assessment-hint.scss

@@ -71,10 +71,6 @@ $BORDER_COLOR: $GREY_300;
     box-shadow: 0 0 0 1px $FOCUS_COLOR;
   }
 
-  .js-focus-visible &:focus:not(.focus-visible)::after { // sass-lint:disable-line class-name-format
-    box-shadow: none;
-  }
-
   &:active::after {
     background: $GREEN_100;
   }

src/styles/components/_tooltips.scss

@@ -71,9 +71,3 @@
 :focus .w-tooltip--right {
   transform: translateX(-100%) scale(1);
 }
-
-// sass-lint:disable-block class-name-format
-.js-focus-visible :focus:not(.focus-visible) .w-tooltip {
-  opacity: 0;
-  visibility: hidden;
-}

src/styles/generic/_shared.scss

@@ -26,12 +26,6 @@
   outline: none !important;
 }
 
-// This will hide the focus indicator if the element receives focus via the
-// mouse, but it will still show up on keyboard focus.
-.js-focus-visible :focus:not(.focus-visible) { // sass-lint:disable-line class-name-format
-  outline: none;
-}
-
 div,
 dl,
 dt,