[EuiProgress] Render a `<progress />` element when no value

[myasonik]

Summary

EuiProgress renders a div if no `value is set.

A <progress /> element with no value set is considered in an indeterminate state which I think is a pretty good semantic indication of our visual representation of when EuiProgress is used without a value.

What to do

Always render a <progress /> element

See the discussion in #2985, which concludes that we need to reassess the use of a pseudo element for the indeterminate state. Firefox is the limiting factor, and we'll need to come up with a design that works without a div

[cchaos]

Interesting article on styling <progress> elements, the a11y considerations, and a quick comment about it vs <meter>: https://scottaohara.github.io/a11y_styled_form_controls/src/progress-bar/

[myasonik]

Scott O'Hara's great! Thanks for finding that!

If we want to move towards an alternate solution like he suggests, I can draft up an example of what we could do. (I didn't see a suggestion from him that we could use.)

Otherwise, given our current work and support matrix, I'd also be happy just moving to the standard elements and revisiting the a11y implications once we have no bigger fish to fry. (Who knows, maybe by then, browsers and assistive tech will catch up.)

[github-actions[bot]]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.