Site Health: don't use a progressbar for the health "score"

[afercia]

See #46573.

The "progress" indicator on the Site Health pages has a few issues, partly because of the implementation, and partly because of buggy assistive technologies behavior.

For example:

The aria-valuetext="Site tests are running, please wait a moment." doesn't get updated and it still gets read out when the score calculation is complete:

Also, aria-valuetext must not be used to communicate the state. Instead, it "Defines the human readable text alternative of aria-valuenow... Authors SHOULD only set the aria-valuetext attribute when the rendered value cannot be meaningfully represented as a number. ". ​https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext

Additionally:

• Firefox + NVDA don't announce anything, the whole progress indicator is completely ignored
• arguably, this isn't exactly a progress "bar"
• regardless, a <progress> element or role=progressbar should be used to represents the completion progress of a task. Whatever users do in these pages, the progress value doesn't change: it's a static value that indicates the current health score rather than an actual progress.

​https://www.w3.org/TR/html52/sec-forms.html#the-progress-element
​https://www.w3.org/TR/wai-aria-1.1/#progressbar

From a semantic perspective, using this UI element to also indicate the page loading progress is not appropriate. Also, not sure why the score number is generated via CSS.

For reference: the <progress> element seem to have some better support compared to role=progressbar (at least NVDA reads out something) but it's still buggy and not recommended. Here's some up to date (March 2, 2019) data and testing:
​https://scottaohara.github.io/a11y_styled_form_controls/src/progress-bar/

At the time of testing, a styled progress bar won't be fully accessible in all screen reader and browser pairings.
Instead it may be more appropriate to simply treat the progress bar as a visual decoration, hide it from screen readers, and provide visually hidden text as a means to consistently convey the information.

Given the buggy support from assistive technologies and considering role="progressbar" doesn't add any value in this specific case, I'd recommend to remove any ARIA role/attributes and use just plain text.

Ideally, there should be some explanatory text before the score number, for example:

<span class="screen-reader-text">Current health score:</span>
<span class="styled-health-score-class-here">80%</span>

[afercia]

46621.diff​ refactors the progress indicator:

• removes any ARIA
• adds a screen-reader-text "Current health score:"
• adds role="img" aria-hidden="true" focusable="false" to the SVG
• reduces CSS specificity simplifying unnecessary overqualified selectors
• fixes the syntax for after and before (double colon)

Worth noting, as mentioned in #46573, the CSS keyframe animation doesn't work in Edge and IE11.

[afercia]

In 45041:

Accessibility: Simplify the Site Health score indicator.

The Site Health score indicator isn't exactly a "progress bar" and shouldn't use ARIA roles and properties related to progress bars. Also, some browser / screen reader combinations don't announce the score properly.

• removes any ARIA
• adds a screen-reader-text "Current health score:"
• adds role="img" aria-hidden="true" focusable="false" to the SVG
• reduces CSS specificity simplifying unnecessary overqualified selectors
• fixes the syntax for ::after and ::before (double colon)

Fixes #46621.