Previously, styling of `<code>` 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 `<code>` 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 `<code>` 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
This commit adds `/tutorial` to the list of angular.io pages that we run
a11y tests against and updates the required scores to match the current
ones (to avoid a future regression going unnoticed).
PR Close#41103
As part of our CI checks, we ensure the a11y score on certain angular.io
pages do not fall below some thresholds.
This commit increases these thresholds based on our current scores to
ensure we do not regress below current values.
PR Close#37899
- Add more spacing to inputs.
- Correct placeholder colors in inputs.
- Add aria label to input for accessibility.
- Clean up layout styles and mobile view.
Fixes#31265
PR Close#31272