Sign in quick pick dialog: focus movement could be improved

1. Turn on Settings sync
2. Get the following dialog

Press tab - focus moves to checkbox. Press tab again, focus moves to the other checkbox.

Ideally the first tab would move focus to the “Sign in and Turn on” button. And not to the checkbox

[isidorn]

Yes I can reproduce. Well if VoiceOver was not reading the description before the change for #122054 then there is no point in reverting. Or I misunderstood something?

The issue here is that we are using aria-activedescendent to tell the screen reader what is the active element, and based on that the screen reader will read. It would be cool if there is a way to append a label to be read by a screen reader apart from the one provided by the activedescendent. @joanmarie might you have a hint on how to do this? So A contains B, browser focus is on A, A has activedescendent pointing to B. Is there a way for A to append something to what is read by the screen reader?

@TylerLeonhardt If there is not nice way then we will have to use an aria alert to announce the placeholder

[TylerLeonhardt]

@joanmarie

What description and what placeholder? Are these two things the same?

Sorry about that. I think @isidorn got those mixed up. Let me provide more context.

Based on your text “Select an account to sign in” I think we are talking about two different quick picks. We are talking about the one that says “Please sign in to synchronize your data across devices” that has a “Sign in & turn on” button next to it.

@isidorn said placeholder before because the description and placeholder visually appear to be in the same place… but the placeholder is shown when the input box is enabled, and the description is shown instead when the input box is disabled.

Settings Sync disables the input for this quick pick so we are purely talking about the description here. Sorry for the confusion.

When should these things be read, every time the active descendant changes? Just the first time? Something else?

I… am just getting ramped up on A11y-related changes and am quite the noob, sorry… so I’ll let @isidorn answer it correctly but ideally, the description should be read out when the quick pick is shown… so it might look like this:

• click the person icon in the bottom left of vscode
• click on “Turn on Settings Sync…”
• That brings me to the “Please sign in to synchronize your data across devices” quick pick and the screen reader reads out “Please sign in to synchronize your data across devices” before saying anything about the button or quick pick list.

It’s possible that you see a different quick pick before the “Please sign in to synchronize your data across devices” quick pick… if so, let me know what that one is and we can talk about that one too. I want to fix all the screen reader issues for quick pick 😃