Add HTML5 element: <progress>

Wanted to flag this the accessibility concerns about properly labelling it:

In most cases you should provide an accessible label when using <progress>. While you can use the standard ARIA labelling attributes aria-labelledby or aria-label as you would for any element with role="progressbar", when using <progress> you can alternatively use the <label> element.

I would say that using <label> is better.

<label>
  Uploading Document: <progress value="70" max="100">70 %</progress>
</label>

More good examples here - https://scottaohara.github.io/a11y_styled_form_controls/src/progress-bar/

RE #25

Thank you for review. Yes definitely we need label. Here i only prepared example that no visual regressions will be.

But think original question, least how I understood, is that this is definitely a good replacement to have.

There's still little lag in current Firefox but is it really a blocker?

little lag in current Firefox but is it really a blocker

I don't think so. Probably it may be fixed or even ignored.

Keshav Patel → made their first commit to this issue’s fork.

- I adjusted the styles for Olivero and Claro.
- Added a label for accessibility

What's left to do:

- Correct styles for Umami (it is possible to remove them completely from Umami. Because they look strange even before the patch)
- Figure out what to do with stable9 styles
- Figure out what to do with the starter kit.

Moving back to work

Would be cool if anyone could test it.

Worth comparing with https://dequeuniversity.com/library/aria/progress-bar-bounded

Many uses of progress bars are essentially static, but Drupal we often use them as dynamic elements which should be updated with aria-live.

Deque uses:

<div id="progressbar-bounded" class="deque-progressbar deque-progressbar-bounded">
  <progress role="progressbar"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="A bounded progress bar from 0 to 100">
  </progress>
  <p>
    <button class="deque-button" id="start-progressbar">
      Start
    </button>
  </p>
</div>

They leverage the ARIA progressbar role. I"m not certain that this is needed, but wanted to note it here.

MDN just states:

If the progressbar role is applied to an HTML
element, the accessible name can come from the associated . Otherwise use aria-labelledby if a visible label is present or aria-label if a visible label is not present.

What is in the latest patch I think is:

  <div id="${id}" class="progress" aria-live="polite">
        <label>
          <div class="progress__label">&nbsp;</div>
          <progress class="progress__element" value="0" max="100"></progress>
        </label>
        <div class="progress__percentage"></div>
        <div class="progress__description">&nbsp;</div>
  </div>

I'm not sure how much the JavaScript would affect things here either. I haven't compared the two.