Keyboard navigation for the label menu editor

[brizental]

So, right now a user can open the label menu just by pressing the 'l' key, but for actually interacting with the menu the user still has to use the mouse.

These are the interactions that I thought:

1. When the user presses the 'Esc' key the menu closes;
2. When the users presses the 'Enter' key inside the input area the menu saves and closes;
3. When the user presses the 'Tab' key the first element in the list gets focused and if the user keeps on pressing the next element gets focused and so on;
4. When the users presses 'Enter' and a list item is focused this list item gets checked or un-checked;

Just to be clear, this is the menu that I'm talking about:

\

I think maybe there are some interactions missing that I haven't listed.

Also, I was thinking while writing this issue, and this would be important for accessibility too :)

[zoepage]

@brizental I love the idea :)

1. When the user presses the 'Esc' key the menu closes

And the changes are dismissed, right?

2. When the users presses the 'Enter' key inside the input area the menu saves and closes;

What about the case, if someone wants to add more than one? In addition, see 4.

3. When the user presses the 'Tab' key the first element in the list gets focused and if the user keeps on pressing the next element gets focused and so on;

+1

4. When the users presses 'Enter' and a list item is focused this list item gets checked or un-checked;

+1 (could intervene with 2.?)

[brizental]

@zoepage nice, thanks for the feedback.

1. Yes, the changes would be dismissed. It would be the same interaction as when you click outside of the box right now.

2. Hmm, hadn't thought about that. What if when the user clicks "Enter" if any results were found, the first result gets highlighted and checked? If no results were found nothing happens. Now, I don't know what key press would be intuitive for when the user wants to 'Save and Close'. What we could do is, if the user keeps on pressing the 'Tab' key and gets to the end of the list, the search input gets highlighted and then the 'Save and Close' button, if he presses enter in the 'Save and Close' then it saves and closes.

3. Now, if we go along with what I suggested in 2. then before going to the list, when the user clicks 'Tab' inside the search input he first goes to the 'Save and Close' button and after that he goes to the list.

4. I don't think it would intervene with 2., because 2. is only for when the user clicks 'Enter' inside of the input box. This is for when the user clicks 'Enter' inside of a list item.

[zoepage]

@brizental Sounds good to me :)

What do you think @magsout ?

[magsout]

@zoepage @brizental 💯

2. hum, what about using s to save instead ?

totally agree with improved accessibility for the Label Editor. Thanks @brizental

[zoepage]

hum, what about using s to save instead ?

Not sure, if this is little to much overhead regards the learning curve to add another key? :) I feel like the Enter is a great behaviour people already have learned.

[magsout]

@zoepage You're probably right

[magsout]

@zoepage Enter seems to be a good choice 👍

[zoepage]

Thanks @magsout for your feedback :)

@brizental Would you be interested to work on this? :)

[brizental]

@zoepage Sure, I would like to work on this :)