Autocomplete and accessibility

In the meantime, turns out this is well documented :-) not sure documentation works in real life, but the updated library now has everything for accessibility :-)

To tab or not to tab

The issue is the following: while you type, you show suggestions. The focus is still in the input field, and yet, you should somehow show to the user what is the currently matched suggestion (I'm using bg-primary to show this). I cannot use hover styles, because you can hover a proposal, and yet, change suggestions with the arrow key. I cannot use the focus styles, because they don't exist as a pseudo class (and I really want to avoid any extra css for my library). Also, focus styles are ugly :-)

But the, I realized that when pressing tab, I was moving the focus to the suggestions. At first, it seemed like a great idea: this way, users can tab through proposals. And at the same time, it also seems like a really bad idea: because users need to tab through all proposals to move to the next input field.

Tab vs arrow keys

I wondered: how does behave a native datalist ? Turns out: you need to use arrow keys to move through proposals, and tab move you to the next element. So I decided to do just that: I added a tabindex=-1 and it works fine. You can still use arrow keys as before to move through suggestions.

But is it accessible? How would the user know which proposal is selected if he is blind? I guess I can use Live Regions but I'm not sure how well that is supported (sometimes, the specs are wonderful, but real life isn't).

At least, with tabs, you know for sure that when focusing an element, it will get announced. I'm still on the fence regarding this, but I will definitely investigate and make sure it's working as intended for version 1.1.

Extra tip: using regions

Since I didn't want to split my library into multiple files, but still keep it manageable, I discovered the region/endregion syntax in vs code that allows to collapse/expand whole section of code. It also helps to keep your code structured and grouped in a meaningful way.

// #region REGION_NAME_HERE ... some code // #endregion

Autocomplete and accessibility

Comments (1)

More from this blog

A git diff with all changed and new unstaged files

Writing a Zero-Dependency CSV and XLSX Reader/Writer

Media Queries Level 5 are awesome

Modern tooltips

Using Dialog elements today

To tab or not to tab

Tab vs arrow keys

Full demo

Extra tip: using regions

Command Palette

Comments (1)

More from this blog

To tab or not to tab

Tab vs arrow keys

Full demo

Extra tip: using regions