Loader: allow informative, accessible text to be shown and read out

[damienrobson-sage]

Desired behaviour

A prop can be passed into the Loader component that allows text to be displayed e.g. underneath the animated icon. It would also be of benefit if said text was picked up correctly by screen readers. This would improve the accessibility and user experience of using loaders for non-sighted users;

Current behaviour

Only the animated loader is shown; extra work and components are needed to allow for text to be displayed alongside (see CodeSandbox)

Suggested Solution

• Support optional use of text to show alongside the screen reader;
• Make use of similar to the screenReaderOnly prop in Typography to allow any info text to be read out

CodeSandbox or Storybook URL

https://codesandbox.io/s/suspicious-northcutt-f4g3qt?file=/src/Loading.js

Anything else we should know?

No response

Confidentiality

• [X] I confirm there is no confidential or commercially sensitive information included.

[nineteen88]

Hi @damienrobson-sage - this isn't currently something in the DS. It's not something that would be difficult to add, though it seems your implementation of Loader plus two Typography components looks like fine to do from a consumer's end. It might be worthing speaking to the DS team about including this, and see what they say?

Maybe raise it here first? https://github.com/Sage/design-system/issues

[damienrobson-sage]

Thanks @nineteen88 - I've opened this issue as a result of your suggestion above

[Parsium]

Closing this as there is a workaround available 👍🏼