Loading

The Loading component has been designed with accessibility in mind, providing features that enhance the experience for users of assistive technologies.

The following props are available to improve the accessibility of your Loading component:

One of these props must be provided: text, title, or ariaHidden={true}. They are mutually exclusive and cannot be used together.

The Loading component automatically implements the following accessibility features:

• Uses semantic SVG elements with proper ARIA attributes for the loading indicator
• Automatically adjusts announcements based on the presence of text or title props:
  • When text is provided, the visual loading indicator is hidden from screen readers and only the text is announced
  • When title is provided, it serves as an accessible name for the loading indicator
  • When ariaHidden is true, the entire component is hidden from screen readers
• Always renders as a div when text is provided to ensure proper structure

• Always provide either text, title, or ariaHidden={true} to ensure proper accessibility:

  • Use text when you want both visible and announced text
  • Use title for loading indicators without visible text
  • Use ariaHidden={true} when:
    • Loading state is conveyed through other visible text on the page
    • Multiple loading indicators are present and only one should be announced
  • Always ensure both title and text are properly translated

• When using asComponent:

  • By default, Loading renders as a div element
  • Use asComponent when the Loading component is wrapped by another component that requires a phrasing element as children
  • Ensure the chosen element maintains proper semantic structure:

  <Button>
    <Loading title="Title of the button is loading" asComponent="span" />
  </Button>

<Loading title="Loading page content" type="pageLoader" />

Screen reader announces: “Loading page content, image”

<Loading text="Please wait while we process your request" type="boxLoader" />

Screen reader announces: “Please wait while we process your request”

<Stack>
  <Loading type="searchLoader" title="Loading search results" />
  <Loading
    type="inlineLoader"
    ariaHidden={true} // This loader won't be announced
  />
</Stack>

Screen reader only announces: “Loading search results, image”