Accessibility: Interacting with auto-complete dialog traps tab and is different to everything else

[anoadragon453]

Description

I also found an interesting bug in the newest auto complete code on riot.im/develop (web). Type an at sign and the first letter(s) of a person you want to mention. When the results populate, press DownArrow to select.
Expected: You hit the first item on first downArrow.
Actual: You have to press it twice to hit the first item with accessibility. Now, try to auto-complete. Press Tab. Tab won‘t insert the selected full item. It will just put the cursor back after the characters you already typed. DownArrow onto the item again. Press Enter instead. That will insert the item, but at the same time send off the message prematurely.

Logs being sent: no

Version information

• Platform: web
• Browser: Firefox 70 Beta, 71 Nightly
• URL: riot.im/develop

[t3chguy]

I cannot reproduce this in Firefox 69 on Windows with NVDA on and off, will try with Firefox Beta

Edit: cannot reproduce with NVDA on and off in Firefox Beta (70) either

[MarcoZehe]

The bug has morphed. In the Accessibility-matrix.org channel:

1. if I type @, then a, then n, to mention @anoadragon453 ,
2. I hit DownArrow, so that user name is selected.
3. I hit Tab.
   • Expected: AutoComplete should fill the name, a colon, and a space, and close the AutoComplete. This is the way it behaves in other chat apps, and this is also the way the ARIA design pattern for AutoCompletes suggests the tab key to behave.
   • Actual: The second (in this case) item in the list is selected instead. Nothing is fulled. Pressing Tab again cycles back to item 1.
4. Instead of tab, I hit Enter:
   • Expected: Same as above, name gets inserted, along with a colon and a space.
   • Actual: Message is being sent off, with just the mention in it.
5. Instead, I hit Space.
   • Result: This behaves as expected.

So the bug has morphed a bit. Originally, the tab key did nothing once an AutoComplete result was selected. Now, it shifts focus between autocomplete results.

[t3chguy]

This is fixed in a PoC available at https://riots.im/adhoc/a11y_poc/

[babolivier]

Heya, I've played a bit with the PoC and wanted to provide some feedback. I don't find it really intuitive to use (mostly because everything else I'm used to (namely alt-tab and co) makes use of the tab key for switching, but if that doesn't work with screen readers then shrug), maybe also add support for left/right keys? When trying the poc, I had to go back to reading the tweet to realise that it's up/down that works, as in my attempts I had a single line of results so it never occurred to me that these keys would do something.

Also, unrelated, but I see funny things happening with display names/flares when I run the PoC in Firefox 70.0.1:

[t3chguy]

Heya, I've played a bit with the PoC and wanted to provide some feedback

Hey @babolivier thanks for your feedback!

(namely alt-tab and co)

The difference there is you're modifying tab using the Alt modifier and it only works whilst Alt is held (and isn't a text field w/ autocomplete).
Do you know of any chat apps (other than KeyBase) that allow you to Tab to iterate through their autocomplete options?

maybe also add support for left/right keys?

left and right are for moving the caret (and thus cancelling the completion)
it is based on the guidelines and principles of the ARIA specification, https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
Where it specifies editing keys other than up/down must be preserved to their normal function.

I had to go back to reading the tweet to realise that it's up/down that works,

up/down has always worked, tab/shift-tab just did as well previously (you can of course also click the options)

in my attempts I had a single line of results so it never occurred to me that these keys would do something.

Do you mean Emoji completion? thats the only one that isn't one-per-line to fit more in

Also, unrelated, but I see funny things happening with display names/flares when I run the PoC in Firefox 70.0.1:

Hah yeah I think I duplicated the section, it is a proof of concept after all :P