V8: Accessibility improvements: Screen Reader Prerequisites

[RachBreeze]

A number of accessibility issues have been identified in #5277.
Many of the fixes require a class which supports hidden text for screen readers.

The aim of this PR is to start to build the css elements which the screen readers will require.

A number of PRs have already been submitted which require a screen reader only class #5544, #5585 and #5664

Following a review of #5664 we identified the need to submit an individual PR for a screen reader only class. The aim of this PR is to allow the class to be pulled into belle.less independently of the other PRs allowing the accessibility work to continue whilst the other PRs are reviewed.

[emmaburstow]

Hi Rachel!

Thanks for this PR. It looks great and will really improve accessibility. Will let you know if we need any changes.

Em

[RachBreeze]

Good morning @emmaburstow
Thank you. Would it be possible for you to tag this with the accessibility label please?
Cheers

[emmaburstow]

Sure :)

[zersiax]

Looks good, it was a good idea to use Bootstrap's example here. There's a number of elements a class like this would be useful for, most notably a place to fire aria live alerts from. Adding extra explanatory text to visual controls is another use, but try not to go too crazy with the verbosity when it comes to that. "This button opens a menu that lets you change the universe in very interesting ways" is too long and would be read out every single time a screen reader lands on the element in question :-)

[nul800sebastiaan]

Thanks @RachBreeze - this was already merged as part of #5664 - great job! 👍