Handle accessibility on sign in screen

[darcydriscoll]

🐏 Now: Motivation

⚜️ Where's the issue?

The sign in screen.

⚜️ What's the issue?

The sign in screen isn't as accessible as I thought it was.

⚜️ Any ideas on how to solve it?

• Decide if I should handle this in an issue or in a user story (e.g. 'Sign in with name using screen reader and/or keyboard')
• Is the text content's language set? (on the html tag)
• Can I navigate it with a keyboard? -- the answer is not really -- the input box isn't focusable for some reason
• Use Vue Axe on the page to see if anything else is picked up
• Progress bar isn't accessible for screen readers. See this article from Marcus
• Error messages may not be accessible. Just use Vue Announcer? IDK. Check out Accessible Vue
• Follow any lessons I learned from this #28 task

🦄 Later: Solving it

💠 The problem

Because this is a bug and not a new feature, I'll handle sign-in accessibility inside this issue.

💠 The method

• [x] Set the text content's language (instructions)
• [x] Ensure that I can navigate the screen with a keyboard (instructions)
• [x] Make the progress bar accessible for screen readers (instructions)
• [x] Use a more descriptive loading symbol for users who prefer reduced motion (e.g. an hourglass)
• [x] Investigate making my error message accessibility more standardised with Vue Announcer (instructions)
• [x] Let Vue Axe tell me if there's anything else to do

💠 Notes

[darcydriscoll]

Changed the focus ring colours of all focus rings to a colour with higher contrast against the dark background.

[darcydriscoll]

Made the sign in submit button contrast better against its text. Turns out, I didn't understand colour contrast as well as I thought I did. The 3:1 minimum contrast for interactive elements seems to refer to e.g. a button's contrast against the background, rather than the button text's contrast against the button itself.

[darcydriscoll]

Done!