Codecov Report

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

@@             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.

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>

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.

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.