@jkva This is potentially blocking for screen reader users, but only a usability/UX issue for those who can see (but perhaps not understand) the icons. So we should fix it for the former group as a matter of priority, with the latter being a design task.

I'd ideally like the status inside the link, to cut down on the number of Arrow key presses required to move past a testing task, and also to make the icon clickable. Something like:

<li class="test-name-wrapper in-progress">
    <a href="#" class="test-name" aria-current="true" aria-label="Close a modal dialog using a button (In Progress)">
      Close a modal dialog using a button
      <span aria-hidden="true" class="progress-indicator"></span>
    </a>
</li>

I'm using aria-label to avoid the case where there are multiple spans inside an element, and VoiceOver hence presents the parent element as two separate ones. But aria-labelledby could also work, e.g.:

<li class="test-name-wrapper in-progress">
    <a href="#" class="test-name" aria-current="true" aria-labelledby="test1-title test1-progress">
      <span id="test1-title">Close a modal dialog using a button</span>
      <span aria-hidden="true" class="progress-indicator"></span>
      <span class="sr-only" id="test1-progress">(In Progress)</span>
    </a>
</li>

What do you think?

Also, the text should probably be shown on hover/focus on the link, like a tooltip. Is that too much of a visual change? Could be a nice midpoint between the current state and something more drastic, like a legend or just showing the text to everyone.