Screenreader should read gear button shortcut

[chrmarti]

Issue Type: Bug

Testing #57304

I couldn't find a way to navigate to the gear menu using the keyboard:

VS Code version: Code - Insiders 1.27.0-insider (43676d0, 2018-08-28T05:12:24.162Z)
OS version: Darwin x64 17.7.0

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz (8 x 2200)
GPU Status	2d_canvas: enabled checker_imaging: disabled_off flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on native_gpu_memory_buffers: enabled rasterization: enabled video_decode: enabled video_encode: enabled webgl: enabled webgl2: enabled
Load (avg)	2, 2, 2
Memory (System)	16.00GB (0.04GB free)
Process Argv	/Applications/Visual Studio Code - Insiders.app/Contents/MacOS/Electron --user-data-dir /Users/chrmarti/Development/repos/tmp/user2 --extensions-dir /Users/chrmarti/Development/repos/tmp/ext2
Screen Reader	no
VM	33%

Extensions: none

[roblourens]

There is a keyboard shortcut, but we thought that it's not natural to have all of them as tab targets.

The keyboard shortcut needs to be read in the aria-label, which I haven't done yet...

[cleidigh]

@roblourens
Are you thinking of having "Press alt-F9 for settings options" or something similar?
that's gonna be a lot of extra stuff, no?

[roblourens]

Yeah exactly, I'm not sure how that will work, but if it's not a tab target I think it needs to be more discoverable to keyboard users.

[cleidigh]

but I think we agree there are already too many tab targets
I wonder if one time announcement when arriving on the settings page would do it
the last thing an accessibility user needs is repetition of a behavior indicator that doesn't change

[roblourens]

the last thing an accessibility user needs is repetition of a behavior indicator that doesn't change

One existing precedent I thought of is in the extension viewlet, aria-label for every item includes "Press enter for extension details". It's annoying but I'm not sure what else to do.

[roblourens]

I'm actually not sure how to have the screenreader read that, because it should go after the description, but that's not an aria-label, it's the actual text of an element via aria-describedby. For now, I put the keybinding in the button title.

[cleidigh]

do you want me to look at this?

[roblourens]

Sure, if you have any ideas

[cleidigh]

I'm trying to understand exactly what you mean by your above statement 'element with describedby'
I'm rusty on the thread

[roblourens]

You use describedby to point at the description, which is how the description is read, right?

[cleidigh]

correct
I'm not clear on the latest problem. Do you need a multiple component reader label? Not ideally the title?

[roblourens]

I think the screenreader should read the keyboard shortcut for the gear button after it reads the name and description of the setting, if that's possible.

[cleidigh]

So:

"File Auto Save" + "files autosave blah blob" + "More Actions, Press" + "{$kbd_shortcut}"

for something like that we use describedby= 'id_name id_description id_map id_ks'
or whatever combination. actually id_name would actually be the label, but you get the idea.

key making it work is any dynamic text should be in the DOM usually a hidden div
I had to deal with similar issues for the enum descriptions but I haven't committed that yet.

[roblourens]

Oh, you can set multiple ids in describedby and it will read all of them? Sounds perfect.

[cleidigh]

yup, so can aria-labeledby !

targets have to be static, what I did is to add a div to to the option template with no content
but the aria-label attribute this division pointed to by the option element and its location in the DOM
is irelevant