Loading icon: Add accessibility features

Purpose

During the accessibility evaluation for the loading icon (spinner) it was found that the spinner status isn't announced by a screen reader user.

Solution

This is the current markup for the loading icon:

<div class="gl-spinner-container">
  <span aria-label="Loading" class="align-text-bottom gl-spinner gl-spinner-dark gl-spinner-sm"></span>
</div>

The proposal is to add role="status" to the inner span. From https://www.w3.org/TR/wai-aria-1.1/#status,

status (role) A type of live region whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily presented as a status bar.

Authors SHOULD ensure an element with role status does not receive focus as a result of change in status.

Status is a form of live region. If another part of the page controls what appears in the status, authors SHOULD make the relationship explicit with the aria-controls attribute.

Assistive technologies MAY reserve some cells of a Braille display to render the status.

Elements with the role status have an implicit aria-live value of polite and an implicit aria-atomic value of true.

The proposed markup:

<div class="gl-spinner-container">
  <span aria-label="Loading" class="align-text-bottom gl-spinner gl-spinner-dark gl-spinner-sm" role="status"></span>
</div>

Edited Dec 16, 2021 by Jeremy Elder