WEBDEV-8019 Add basic loading indicator

[rebecca-shoptaw]

As part of the migration of the ia-activity-indicator into the elements repo, we're first building the svg and CSS animations for the loading indicator and then expanding it into a more fully-featured ia-status-indicator that can show a loading, error, or success indicator depending on a mode property.

This PR simply builds the first basic loading indicator.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 45.16%. Comparing base (d272dd5) to head (69041f0).

Additional details and impacted files

@@             Coverage Diff             @@
##             main      #17       +/-   ##
===========================================
+ Coverage   34.61%   45.16%   +10.54%     
===========================================
  Files           3        4        +1     
  Lines          26       31        +5     
  Branches        4        4               
===========================================
+ Hits            9       14        +5     
  Misses         15       15               
  Partials        2        2               

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[nsharma123]

I looked into and conducted research for this particular loading. I found that SVG loading indicators shouldn’t rely on <title> or for assistive technology. Instead, the loading state should be communicated via an ARIA role on the container, such as role="status or role="progressbar".

The <title> / elements mainly create tooltips, which aren’t relevant for this use case. A better approach is to provide context using an ARIA label or a screen-reader-only text like Loading, please wait….

Since the loading state is already described textually, the SVG itself can be marked as decorative using aria-hidden="true".

Here is an example of what a loader SVG would look like.

<div
  class="circular-loading-indicator"
  role="status"
  aria-live="polite"
  aria-label="Loading, please wait"
>
  <span class="sr-only">Loading, please wait…</span>

  <svg
    viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    focusable="false"
  >
  <!-- svg content -->
  </svg>
</div>

[rebecca-shoptaw]

Thanks @nsharma123! I'll do some more research myself (if you have sources for your research, that would be great) and look into switching out that title.

[rebecca-shoptaw]

I looked into and conducted research for this particular loading. I found that SVG loading indicators shouldn’t rely on <title> or for assistive technology. Instead, the loading state should be communicated via an ARIA role on the container, such as role="status or role="progressbar".

The <title> / elements mainly create tooltips, which aren’t relevant for this use case. A better approach is to provide context using an ARIA label or a screen-reader-only text like Loading, please wait….

Since the loading state is already described textually, the SVG itself can be marked as decorative using aria-hidden="true".

Thanks @nsharma123 ! I did some research in a11y resources and the MDN docs and determined that the best approach was to use the title element, which is specifically intended for SVG accessibility and the preferred method when no visible text describes the indicator (see: MDN docs on title), combined with the status role which automatically uses aria-live="polite" and is the most accurate representation of what the image is for (see: MDN docs on status).

Made both changes -- thanks for bringing this up and I'm excited to get more a11y work into this new repo.

[jbuckner]

Two comments (and can remove that light/dark switch), but looks good 👍