V8: Accessibility improvements for top header

[MMasey]

This PR aims to fix issue 15, 16 and 17 from the A & AA accessibility issue list #5277

I have introduced a new css class called visually-hidden that I imagine will be useful in the long run to adding screen reader specific text to buttons.

I have added a btn-reset class that removed the default browser styling for buttons, which should make it easier to use the correct <button> markup when appropriate.

These two new additions have allowed me to update the icon buttons in the top right hand menu so that they use the correct element (as they are not linking to another page, the <a> tag wasn't appropriate). I've also added in some text that will provide screen readers with some context for the buttons functionality.

I have also added a focus state for the user icon. Note that on the user button, i have used an aria-label rather than the visually-hidden class, this is because the <umb-avatar> directive doesn't allow transclusion, so I couldn't add the additional span element inside it.

Cheers

[emmaburstow]

Goooood morning @MMasey,

Thanks for the PR. This is a fantastic idea to aid the future accessibility improvements. I love the approach. We'll have a look over and let you know if we need a thing.

Em

[MMasey]

Thanks @emmaburstow. Could this be tagged with the accessibility label please 🙂 Cheers

[emmaburstow]

Done :)

[MMasey]

Hey wonderful PR team, I know you're probably all super busy, but is there any update on if/when this will be merged in? The btn-reset and visually-hidden classes will be incredibly useful when it comes to improving the semantics of the backoffice, and in turn the accessibility. For example, there are loads of buttons across that backoffice that use an <a> element. When this is changed to a <button> element, the btn-reset class helps to retain the style and will make it easier for more people to go through and fix those issues.

Thanks 🙂

@nul800sebastiaan @poornimanayar @emmaburstow @abjerner @dawoe

[nul800sebastiaan]

Thanks very much @MMasey - this indeed looks like super useful updates. The only thing to keep in mind for the future is localization. I will merge this since it's (much) better than what we had before but at some point those hard coded English texts should also be translatable 👍

Thanks again!

[MMasey]

Thanks @nul800sebastiaan, after speaking with @RachBreeze about the visually-hidden class, we’ve decided on sr-only (screen reader only) as we can also do sr-only-focus following the same naming convention making it a little more reusable. You can catch up with the conversation at #5664. I’ll try update this PR accordingly today 🙂

[nul800sebastiaan]

Cool, I missed the separate conversation there! I'll continue the conversation there.