From f39bb71573d0fc6b970d0036f5ad3e7bc5b1d790 Mon Sep 17 00:00:00 2001 From: Brendan Kenny Date: Thu, 12 Jan 2023 15:28:35 -0600 Subject: [PATCH 1/4] remove focus-visible polyfill --- package-lock.json | 11 ----------- package.json | 1 - src/lib/components/CourseSearchResults/index.js | 1 - src/lib/components/Search/index.js | 1 - src/lib/components/SearchResults/index.js | 1 - src/lib/components/SelectGroup/_styles.scss | 4 ---- src/lib/components/SelectGroup/index.js | 1 - src/lib/components/Tabs/index.js | 1 - src/styles/components/_buttons.scss | 9 --------- src/styles/components/_details.scss | 5 ----- src/styles/components/_self-assessment-hint.scss | 4 ---- src/styles/components/_tooltips.scss | 6 ------ src/styles/generic/_shared.scss | 6 ------ 13 files changed, 51 deletions(-) diff --git a/package-lock.json b/package-lock.json index c6928bb98f3..2b7d4c73c2b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,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", @@ -10413,11 +10412,6 @@ "resolved": "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz", "integrity": "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==" }, - "node_modules/focus-visible": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz", - "integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==" - }, "node_modules/follow-redirects": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz", @@ -37407,11 +37401,6 @@ "resolved": "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz", "integrity": "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==" }, - "focus-visible": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz", - "integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==" - }, "follow-redirects": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz", diff --git a/package.json b/package.json index a5765d6675c..724bd1a9992 100644 --- a/package.json +++ b/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", diff --git a/src/lib/components/CourseSearchResults/index.js b/src/lib/components/CourseSearchResults/index.js index 708aa97d962..537c91a3255 100644 --- a/src/lib/components/CourseSearchResults/index.js +++ b/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. diff --git a/src/lib/components/Search/index.js b/src/lib/components/Search/index.js index 2acb6154c85..24f29d61c58 100644 --- a/src/lib/components/Search/index.js +++ b/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; diff --git a/src/lib/components/SearchResults/index.js b/src/lib/components/SearchResults/index.js index 58b51405476..6a98d1f3713 100644 --- a/src/lib/components/SearchResults/index.js +++ b/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. diff --git a/src/lib/components/SelectGroup/_styles.scss b/src/lib/components/SelectGroup/_styles.scss index cbd57d20316..d9049c494de 100644 --- a/src/lib/components/SelectGroup/_styles.scss +++ b/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); } diff --git a/src/lib/components/SelectGroup/index.js b/src/lib/components/SelectGroup/index.js index 9bb0d1c7b5b..74b54bf1cf3 100644 --- a/src/lib/components/SelectGroup/index.js +++ b/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. diff --git a/src/lib/components/Tabs/index.js b/src/lib/components/Tabs/index.js index 3920910aaec..c20ea33c3ef 100644 --- a/src/lib/components/Tabs/index.js +++ b/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 diff --git a/src/styles/components/_buttons.scss b/src/styles/components/_buttons.scss index 364269837eb..2ca37ebeb59 100644 --- a/src/styles/components/_buttons.scss +++ b/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; diff --git a/src/styles/components/_details.scss b/src/styles/components/_details.scss index 7b5aa8317b0..997fc41abde 100644 --- a/src/styles/components/_details.scss +++ b/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; } diff --git a/src/styles/components/_self-assessment-hint.scss b/src/styles/components/_self-assessment-hint.scss index 53b4368ecb1..51f0db5a634 100644 --- a/src/styles/components/_self-assessment-hint.scss +++ b/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; } diff --git a/src/styles/components/_tooltips.scss b/src/styles/components/_tooltips.scss index f117b6207c4..eaac166cc0a 100644 --- a/src/styles/components/_tooltips.scss +++ b/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; -} diff --git a/src/styles/generic/_shared.scss b/src/styles/generic/_shared.scss index 4ab6267c505..a591c3aca11 100644 --- a/src/styles/generic/_shared.scss +++ b/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, From 7966a87290d8ec13e83d79f0fdb705488b13a246 Mon Sep 17 00:00:00 2001 From: Brendan Kenny Date: Thu, 12 Jan 2023 15:40:59 -0600 Subject: [PATCH 2/4] update wicg-inert to only polyfill if necessary --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2b7d4c73c2b..ca09c47bf31 100644 --- a/package-lock.json +++ b/package-lock.json @@ -67,7 +67,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": { @@ -28666,9 +28666,9 @@ "dev": true }, "node_modules/wicg-inert": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.1.tgz", - "integrity": "sha512-PhBaNh8ur9Xm4Ggy4umelwNIP6pPP1bv3EaWaKqfb/QNme2rdLjm7wIInvV4WhxVHhzA4Spgw9qNSqWtB/ca2A==" + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.2.tgz", + "integrity": "sha512-Ba9tGNYxXwaqKEi9sJJvPMKuo063umUPsHN0JJsjrs2j8KDSzkWLMZGZ+MH1Jf1Fq4OWZ5HsESJID6nRza2ang==" }, "node_modules/wide-align": { "version": "1.1.3", @@ -51823,9 +51823,9 @@ "dev": true }, "wicg-inert": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.1.tgz", - "integrity": "sha512-PhBaNh8ur9Xm4Ggy4umelwNIP6pPP1bv3EaWaKqfb/QNme2rdLjm7wIInvV4WhxVHhzA4Spgw9qNSqWtB/ca2A==" + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.2.tgz", + "integrity": "sha512-Ba9tGNYxXwaqKEi9sJJvPMKuo063umUPsHN0JJsjrs2j8KDSzkWLMZGZ+MH1Jf1Fq4OWZ5HsESJID6nRza2ang==" }, "wide-align": { "version": "1.1.3", diff --git a/package.json b/package.json index 724bd1a9992..ff17461829c 100644 --- a/package.json +++ b/package.json @@ -111,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": { From 8a74f096a182f0ee612084fac7570f0088b96465 Mon Sep 17 00:00:00 2001 From: Brendan Kenny Date: Fri, 13 Jan 2023 10:53:13 -0600 Subject: [PATCH 3/4] async page inert when nav drawer is opened --- src/lib/actions.js | 37 +++++++++++++++++++++---------------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/src/lib/actions.js b/src/lib/actions.js index 7d5b775c9e9..a2e19fe7618 100644 --- a/src/lib/actions.js +++ b/src/lib/actions.js @@ -114,28 +114,33 @@ 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. + 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(() => { From c7184c565627b016af79b530a0e7f1a77d999d0b Mon Sep 17 00:00:00 2001 From: Brendan Kenny Date: Thu, 2 Feb 2023 16:10:53 -0600 Subject: [PATCH 4/4] feedback --- src/lib/actions.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/actions.js b/src/lib/actions.js index a2e19fe7618..ad521b032e1 100644 --- a/src/lib/actions.js +++ b/src/lib/actions.js @@ -115,7 +115,8 @@ export const requestFetchReports = store.action((_, url, startDate) => { */ const disablePage = () => { // 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. + // 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');