Rework composer autocomplete to be smarter and not trap tab

[t3chguy]

Fixes element-hq/element-web#4872
Fixes element-hq/element-web#11071
Fixes element-hq/element-web#17171
Fixes element-hq/element-web#15646

Notes: Autocomplete has been updated to match modern accessibility standards. Navigate via up/down arrows rather than Tab. Enter or Tab to confirm a suggestion. This should be familiar to Slack & Discord users. You can now use Tab to navigate around the application and do more without touching your mouse. No more accidentally sending half of people's names because the completion didn't fire on Enter!

This PR brings our autocomplete in line with ARIA standards and matches the behaviour of Slack & Discord so should be easier for new users to comprehend.

	Before	After
Tab	Navigate Suggestions	Accepts Suggestion
Vertical Arrows	Navigate Suggestions	Navigate Suggestions
Enter	Sends Message	Accepts Suggestion

This means that the Tab key no longer keeps you trapped in the composer

Preview: https://6114f8642fe2a3998a4ce3cd--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

---

Here's what your changelog entry will look like:

✨ Features

• Rework composer autocomplete to be smarter and not trap tab (#5659). Fixes Automatically replace plain text Emoji doesn't work with Enter element-hq/element-web#4872, Accessibility: Interacting with auto-complete dialog traps tab and is different to everything else element-hq/element-web#11071 Inline Reactions should send if the emoji is fully formed, before it is converted element-hq/element-web#17171 and accept tab-complete with enter key? element-hq/element-web#15646.

---

Here's what your changelog entry will look like:

✨ Features

• Autocomplete has been updated to match modern accessibility standards. Navigate via up/down arrows rather than Tab. Enter or Tab to confirm a suggestion. This should be familiar to Slack & Discord users. You can now use Tab to navigate around the application and do more without touching your mouse. No more accidentally sending half of people's names because the completion didn't fire on Enter! (#5659). Fixes Automatically replace plain text Emoji doesn't work with Enter element-hq/element-web#4872, Accessibility: Interacting with auto-complete dialog traps tab and is different to everything else element-hq/element-web#11071, Inline Reactions should send if the emoji is fully formed, before it is converted element-hq/element-web#17171 accept tab-complete with enter key? element-hq/element-web#15646 and Automatically replace plain text Emoji doesn't work with Enter element-hq/element-web#4872.

[pvagner]

Unfortunatelly this no longer applies. I was using it for a while and now need to either fix this or revert and get used to the default behaviour.

[t3chguy]

@pvagner what do you mean it no longer applies?

[pvagner]

Oh, by saying it no longer applies I wanted to say it needs tweaking as it does not merge cleanly and I was not able to do such changes my-self.

[t3chguy]

Ah yes, github doesn't show merge conflicts for draft PRs annoyingly, I've resolved that for you now @pvagner

The merge conflict was quite complex, I gave it a cursory test but let me know if it behaves whatsoever differently, it shouldn't.

Thanks!

[turt2live]

looks good overall

[turt2live]

rm -rf tabcomplete

[nadonomy]

LGTM.

@novocaine @dbkr In the release notes, I think we should highlight this change as existing users will need to battle existing muscle memory and it's bound to cause friction.

I think we'd want to say something along the lines of "Autocomplete suggestions have been updated to match modern accessibility standards. Navigate via arrows rather than tab. Enter to confirm a suggestion."

[novocaine]

LGTM.

@novocaine @dbkr In the release notes, I think we should highlight this change as existing users will need to battle existing muscle memory and it's bound to cause friction.

I think we'd want to say something along the lines of "Autocomplete suggestions have been updated to match modern accessibility standards. Navigate via arrows rather than tab. Enter to confirm a suggestion."

note that thanks to the new changelog automation, @t3chguy was simply able to update the PR description with your copy, and dave and I didn't need to lift a finger

[MTRNord]

Can we get this as a setting instead? This is a breaking change without warning and it gets annoying already. :/ Tab is the correct way but this breaks it so I now need to add unneeded spaces to be able to send messages as well as taking 2x to write a message. Also there are 8/10 times the wrong emoji being autocompleted. For example :O will get autocompleted to :v: which is no where near the correct one.

[turt2live]

Please open an issue to report problems. PR comments are not monitored for triage.