[Enhancement] Allow users to add items using keyboard

[jarekmorawski]

Note
An epic should be created for this after we clean up and merge: #38364
See #38364 (comment) for follow up issues.

In the dropdown like category or attributes, users must currently click the Create new button to add an item, and keyboard navigation doesn't work. They're taken to the next field when they press Tab, but the previous one is cleared.

For example, when you're adding an attribute, and you type the name, then press Tab, you're taken to the Add another button, and the attribute dropdown field is cleared.

tab.mov

We should fix it so that the Create new button is highlighted by default, and the user can press either Enter (then the attribute will be created, but they'll stay in the same field) or Tab (the attribute will be created, but they'll go the next field). Users should also be able to create an item when clicking outside the field (f.e. while jumping from Attributes to Values).

We should also accept the , (comma) key when the users add multiple values.

keyboardnavigation.mov

Designs

5sAIeTRd9Yp7nSCT33BAWz-fi-10189%3A248920

Acceptance criteria

General

• Search is active when the field is in focus.
• Tab jumps to the next item outside the menu (e.g. button bar or another field).
• Shift + Tab jumps to the previous item outside the menu (e.g. button bar or another field).
• Esc closes the list, keeps the field selected and the input active.

Menus

• Up arrow moves the focus to the previous top-level item.
• Down arrow moves the focus to the next top-level item.
• Right arrow or Enter opens the parent item and selects the first submenu item.
• Left arrow or Enter closes the parent but keeps it focused.
• Space selects/deselects an item (works for parents and children).

Searching/creating items

• The Create new button is automatically highlighted (as in hovered) only when it's the only item in the list. When it's not, we highlight the first item in the list.
• Up arrow moves the focus to the previous item (if it's the top item, users can press Up to activate the search field).
• Down arrow moves the focus to the next item (if it's the first item, users can press Down to highlight the Create new button).
• Space selects/deselects an item.
• Users can press Enter or , to create a new item.
• When there's any text input, users can click outside the field to create a new item.
• When there's any text input, users can press Tab to select or create a new item and jump to the next field.
• Users can press , when adding multiple values to create an item. The field remains focused, so they can continue typing and adding further values.

[pmcpinto]

@mdperez86 @AnnaMag is it possible to prioritize this issue to be implemented in the current cycle. This was a common pain point in the early user testing sessions and it's adding a lot of friction to the categories and attributes creation flow

[pmcpinto]

@mdperez86 is it possible to prioritize this change? Thanks

[mdperez86]

@mdperez86 is it possible to prioritize this change? Thanks

Hello @pmcpinto which project do you think this issue could be in?

[pmcpinto]

An extension of pcQJnU-Rk-p2. We'll have more small improvements as we collect more feedback from users, so perhaps it would be good to have an ongoing project focused on this cc @AnnaMag

[mdperez86]

I though that project finished on 5th Dec. But I'm ok if we are going to keep it open to deal with all those feedbacks. Happy to work on that! @AnnaMag what is your suggestion?

[AnnaMag]

@mdperez86 yes, it makes sense to turn it into an ongoing initiative.

[jarekmorawski]

@mdperez86 I've updated the ACs following our discussion yesterday. They're now more robust and comply with accessibility recommendations. This issue is good to be worked on. Note that I also created an issue for the Clear button (optional for this task).

[mdperez86]

@jarekmorawski @pmcpinto

The Create new button is automatically highlighted only when it's the only item in the list. When it's not, we highlight the first item in the list.

What highlighted means? Is it the same as outlined, focused?

Because if it's focused, it's not possible to do it because we need to keep the focus all the time within the input field so that the user can continue typing. I we move the focus out of the field while the user is typing to hightlight the first item in the list then the user is not going to be able to continue searching items.
Also if the Create new button is the only item in the list that means the typed text does not produce any retulting item but the user can backspace the text to continue with the search while the focus remains in the input field.

If highlighted means anything different from focused then it's totaly fine. Just consider a different styles than outline when focus because it may be confusing for the user.

[mdperez86]

@jarekmorawski @pmcpinto

Up arrow selects the previous item (if it's the top item, users can press Up to activate the search field).
Down arrow selects the next item (if it's the first item, users can press Down to highlight the Create new button).

Here do you mean focus the item, not select the item right? If it's select then its ok for single selection comobox but not for multi selection combobox. In multi selection comboboxes the normal selection key is space while navigate/focus prev and next items using up and down arrows.

[jarekmorawski]

What highlighted means? Is it the same as outlined, focused?

No, it's the color we add to an item when it's hovered (#F6F7F7). The focus should remain in the search/input field.

Here do you mean focus the item, not select the item right?

Correct. The arrow keys move the focus between the items. For actual selecting/deselecting items (as in checking or unchecking the boxes), we should use the Space key. I'll update the AC to make this clear.

[mattsherman]

Re-opening... was mistakenly closed via #36432.

[pmcpinto]

@louwie17 @mdperez86 I checked this with Jarek and it doesn't seem to work as expected. Can you check it?

[octaedro]

This issue is blocked by the work on this PR (which is still a work in progress). After we have that in place, we will be able to estimate and work on this.

[AnnaMag]

@joshuatf just an FYI ^. Is it in your plans to work on the required draft ?

[joshuatf]

@AnnaMag it's not. I asked if someone in @woocommerce/mothra was able to tackle this in Slack when I shifted into my new role, but I think it may have been deprioritized.

I'm happy to either work on #38364 or assist someone who wants to work on it, but keyboard interactions are already working in that PR. At this point it just needs:

• Styling for the select control wrapper (probably best in the current PR)
• Integration with existing use cases of the experimental select control (follow-up)
• Integration with the tree select control component (follow-up)

[louwie17]

Styling for the select control wrapper (probably best in the current PR)

I actually worked on your PR @joshuatf a bit this week, and tackled a bunch of the styling. Not all the way there yet, but getting close.

[AnnaMag]

Thank you both.
@louwie17 I added the PR to the next cycle.

[j111q]

I was testing today using @AnnaMag's updated demo link for Adding a New Product -- I tried to type out a new tag name, and press "Enter" to immediately create a new tag but it didn't work, and then realised in general, keyboard navigation/functionality wasn't working in the text fields.

I came here to report it but found this issue, so I'm just adding a +1 on @jarekmorawski's list of acceptance criteria above 👍

[joshuatf]

This should be solved by the introduction of the FormTokenField in #45295.

[retrofox]

We should fix it so that the Create new button is highlighted by default, and the user can press either Enter (then the attribute will be created, but they'll stay in the same field) or Tab (the attribute will be created, but they'll go the next field). Users should also be able to create an item when clicking outside the field (f.e. while jumping from Attributes to Values).

Creating the attribute when pressing the TAB key sounds unexpected. Beyond my opinion and just FYI, I'm working on replacing the current implementation with the core ComboboxControl component. Pressing the TAB key leaves the control without any additional action. To select the item, it needs to press the ENTER key or another key combination.

They're now more robust and comply with accessibility recommendations. This issue is good to be worked on. Note that I also created an #36283 for the Clear button (optional for this task).

Quoting part of the article:

Web application menus are expected to work like desktop application menus. For example, the left and right keys are used to iterate through the top-level items, and the up and down arrows are used to navigate submenus. Pressing the tab key focuses the next item after the menu instead of the next menu item.

Implementing this behavior using core components would be tough since we would have to work upstream. Also, there isn't a guarantee that the proposed changes will be accepted. Instead, could we consider this behavior? Maybe we can try to polish the creating workflow when pressing the Enter key, etc.

Could we reconsider this behavior?

[pmcpinto]

Thanks for investigating this. It makes sense to reconsider the behavior. @j111q what do you think?

[pmcpinto]

@j111q in case you missed my previous ping.

[j111q]

@retrofox If I'm understanding your concerns correctly, these are the two ACs which you think are weird:

• When there's any text input, users can click outside the field to create a new item.
• When there's any text input, users can press Tab to select or create a new item and jump to the next field.

If so, I would agree with you - let's tweak these to:

• If there's any text input, and users click outside the field, it will close the menu and not select or create a new item. The field should no longer be in focus.
• If there's any text input, users can press Tab to move focus down through items in the menu, or to move focus to Create [new item]. Users will need to hit Enter to actually select or create items.

Does that make more sense?