[Tagging] Keyboard and screen reader friendly "Add Tags" Widget

[bradenmacdonald]

Refining and improving the "Add Tags" widget from #188 :

"As a keyboard-only user or screen reader user, I want to be able to comfortably and efficiently use the tag drawer to tag content."

Acceptance Criteria:

1. Everything in the "Add Tags" widget can be done comfortably with a keyboard.
2. Moving the cursor around with the arrow keys will select/focus on different chips. Specifically, the X receives the focus.
3. Each chip's X should have an aria-label that says e.g. "Course evaluations, click to remove"
4. Pressing BACKSPACE in the "Add Tags" text field once will focus on the chip before the cursor. Pressing it a second time will delete that chip. Pressing DELETE will also delete any focused/selected chip.
   • See video below for an example from Jira.
5. If the user types anything (e.g. types a letter), the focus always jumps to the end (after all the chips). Search keywords cannot be typed before/between the chips.
6. Moving around the tag tree is done using arrow keys:
   • up/down - go up or down.
   • Left - if leaf or already collapsed: jump to parent tag. Otherwise: collapse the current level.
   • Right - expand the current tag if possible.
   • Enter - if current tag has children: expand/collapse. If leaf: add tag.
   • Space - add tag (or undo adding if it's already added). Same as clicking the checkbox.
7. With the keyboard, each tag should be focused as a single widget (the checkbox, the label, and the expand arrow).
8. The Load More / Cancel / Add Tags actions must all be usable via keyboard.
9. When a tag anywhere in the tree is focused, pressing TAB should move the focus to the "Load More" link at the bottom, then to "Cancel" then to "Add Tags". The only way to move among rows/tags in the tag tree area is using the arrow keys.
10. Whenever the user first tabs into the tag tree dropdown the screen reader should say aloud: "[Unchecked/implicit/checked] Tag: [Name of the tag]. Use the arrow keys to move among the tags in this taxonomy. Press space to select a tag."

Note: Much of this functionality already exists in React Select.

Screen.Recording.2024-01-25.at.12.48.43.PM.mov

[pomegranited]

@bradenmacdonald What automated tests should this task add? Specifically, do we need tests that navigate using the keyboard as described in the ACs? Or is it enough to rely on React Select's a11y and just use "click" in the tests?

[bradenmacdonald]

@pomegranited Great question. It depends how much of this we have to implement ourselves. If we're largely using React-Select's functionality, we don't have to duplicate its own a11y tests. But anything we implement ourselves, we should have at least happy path tests that explicitly use keyboard commands like this example. i.e. that move around with the TAB and arrow keys, use SPACE/ENTER, etc.