search

mozilla / sumo

Project management board for SUMO and Community properties.
Mozilla Public License 2.0
14 stars 5 forks source link

Autofocus the sign-in-step email field for the switching-devices wizard #1614

Closed mikeconley closed 11 months ago

mikeconley commented 11 months ago

This is to reduce the chances that people might think that the wizard is a screenshot, rather than something interactive.

mikeconley commented 11 months ago

Hey @emilghittasv - a fix for this just merged to main. @hannajones asked a good question here wondering how different screenreaders will react to the automatic focus switch after the wizard loads. Do you have some time to check?

emilghittasv commented 11 months ago

@mikeconley @hannajones (cc @akatsoulas)

I've run some tests using NVDA & high zoom-in levels and the outcome is not that great for our a11y users. Screeenreader users are losing context as NVDA immediately starts reading the input field details without giving some more context about what's happening on our KB article page & high zoom-in users are going to experience a "jump" directly to the input field, again without having more context.

I wanted to get a solid opinion from one of our a11y engineers so I had an awesome discussion with Morgan Rae Reschenberg.

Here is Morgan's input on this:

Not only is this UX frustrating for users who have the right version of fx, but for those who don't have it, the autofocus still applies, and is then blocked. This sends the screen reader alll over the page and is very confusing to hear. In general, we'd recommend not using autofocus here, but if we have to use it we'd (a) disable it for users who don't have the right fx version and (b) mark the wizard as a dialog with an aria-label title, and use aria-describedby for the wizard container so the dialog title gets announced when autofocus happens (ie. focusing the input would say something like: Backup assistant, dialog, input, email address). This way users know where they are.