TagInput: Part 2 - Keyboard Navigation

[Gazook89]

Description

This portion mostly focuses on improving keyboard navigation of the TagInput elements.

You should be able to tab through the Properties Editor across inputs, jumping to the "new tag" input when you hit the TagInput component. Further tabing moves you past the TagInput.

If the "new tag" input is focused, you can use the arrow keys to move back or forwards through the tags/new input, and it should trap focus inside the component when using arrow keys-- it currently does not*.

You can also tab/shift tab to move through the tags/new input, and this does not trap focus inside the component.

enter on a tag opens it for editing or submits it if currently editing, esc closes it without saving, , submits a change if editing, tab moves focus out while keeping it open for editing.

Related Issues or Discussions

• Continues the work on TagInput - Functional component for tag-like inputs #3735

QA Instructions, Screenshots, Recordings

Use keyboard to navigate through the TagInput and see if it's intuitive. If you want to go deeper, I'm sure this could be improved with a closer look at WCAG guidelines, though I did try to follow it pretty closely.

Reviewer Checklist

*Reviewers, refer to this list when testing features, or suggest new items *

• Verify new features are functional
  • tab into the component from either before or after the component focuses the 'add tag' input
  • enter or , in the 'add tag' input submits a new tag
  • shift tab from 'add tag' input moves focus through tags starting from end, and escapes the component entirely from the first tag
  • tab, when focus is already inside the tag list, moves the focus through tags and escapes the component entirely from the 'add tag' input.
  • enter on a tag opens it for editing, and submits it if already open for editing
  • esc on edited tag cancels the edit and closes the input
  • , on edited tag submits it (like enter)
  • arrow keys move focus between tabs but does not escape the component when it reaches the ends
• Verify old features have not broken
  • still saves tags to the brew as before
• Test for edge cases / try to break things
• Identify opportunities for simplification and refactoring
• Check for code legibility and appropriate comments

Copy this list

- [ ] Verify new features are functional
  - [ ] `tab` into the component from either before or after the component focuses the 'add tag' input
  - [ ] `enter` or `,` in the 'add tag' input submits a new tag
  - [ ] `shift tab` from 'add tag' input moves focus through tags starting from end, and escapes the component entirely from the first tag
  - [ ] `tab`, when focus is already inside the tag list, moves the focus through tags and escapes the component entirely from the 'add tag' input.
  - [ ] `enter` on a tag opens it for editing, and submits it if already open for editing
  - [ ] `esc` on edited tag cancels the edit and closes the input
  - [ ] `,` on edited tag submits it (like `enter`)
  - [ ] `arrow keys` move focus between tabs but does not escape the component when it reaches the ends
- [ ] Verify old features have not broken
  - [ ] still saves tags to the brew as before
- [ ] Test for edge cases / try to break things
- [ ] Identify opportunities for simplification and refactoring
- [ ] Check for code legibility and appropriate comments