From d80d6ea3f6bc153b864550e6189f4817729b1bf0 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Tue, 9 Mar 2021 14:15:16 +0200 Subject: [PATCH] fix(docs-infra): fix styling of `` elements on older browsers (#41051) Previously, styling of `` elements utilized the `:not()` CSS pseudo-class with multiple selectors (`:not(h1, h2, ...)`). It turns out that older browsers (such as IE11) do not support multiple selectors in a single `:not()` instance. (See [MDN][1] and [CanIUse][2] for more info.) This commit fixes `` styling to use multiple separate `:not()` instances instead (`:not(h1):not(h2)...`), so that they are styled correctly on older browsers as well. NOTE: This change seems to trigger some kind of bug in LightHouse that causes the a11y score of `/start` to be calculated as 0 (which is clearly wrong). This happens on Linux (tested on CI and locally using the Windows Subsystem for Linux (WSL)) - on Windows the score is computed correctly as 98/100. ([Example failure][3]) The bug seems to be related to the layout of the content and goes away if we change the viewport size (for example, switching to LightHouse's `desktop` config) or make another change that affects the content's layout (for example, reducing the padding of `` elements). To work around the issue, this commit updates the `test-aio-a11y.js` script to test `/start-routing` instead of `/start`. [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/:not#description:~:text=Using%20two%20selectors [2]: https://caniuse.com/css-not-sel-list [3]: https://circleci.com/gh/angular/angular/931038 PR Close #41051 --- aio/scripts/test-aio-a11y.js | 2 +- aio/src/styles/2-modules/_code.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/aio/scripts/test-aio-a11y.js b/aio/scripts/test-aio-a11y.js index 65f4d53fe2..d6fc2ada0e 100644 --- a/aio/scripts/test-aio-a11y.js +++ b/aio/scripts/test-aio-a11y.js @@ -27,7 +27,7 @@ const MIN_SCORES_PER_PAGE = { 'cli/add': 98, 'docs': 100, 'guide/docs-style-guide': 96, - 'start': 98, + 'start-routing': 93, 'tutorial': 98, }; diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss index 0f2a5ef758..c58d48ec1d 100644 --- a/aio/src/styles/2-modules/_code.scss +++ b/aio/src/styles/2-modules/_code.scss @@ -169,7 +169,7 @@ aio-code { } } - :not(h1, h2, h3, h4, h5, h6, pre) > code { + :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) > code { background-color: rgba($lightgray, 0.5); border-radius: 4px; color: $deepgray;