[Tagging] New "Add Tags" Widget in Tag Drawer

[bradenmacdonald]

"As a course author, I want to easily add tags to content in my course"

Design: Design: See "Tag Drawer" in Figma "Content Tagging MVP"

Summary: Implement the new "Add Tags" widget in the tagging drawer. Leave the rest of the drawer unchanged for now.

Before	After

Acceptance Criteria

1. The new "Add Tags" widget keeps track of which tags are being newly added (in its React state). If the user presses cancel, no changes are made. If the user presses "Add Tags", the new tags are saved (see note 4 below).
2. Newly added tags appear as chips in the add tags field, and can be removed by clicking on their X.
3. Existing tags that were already added before the user clicks "Add Tags" do not appear as chips in the "Add Tags" widget.
4. The user can type into the widget to filter the tags by keyword.
5. The user can continue to type to search/filter tags even when there are chips displayed inside the field.
6. Very long tag names wrap to the next line; they are not truncated.
7. Preserve the functionality from feat: add search highlight/expand and "no tags" message [FC-0036] frontend-app-authoring#799 : matches are highlighted, parent tags are expanded but only if their child/grandchild matches the search, and a message is displayed if there are no matching tags.
8. "Load More" is only shown if there are more pages of [matching] tags than currently shown in the dropdown.
9. The styling of checkboxes of implicit tags has changed. Instead of a dash, it is now a checkmark (the transparency remains the same i.e. 40% opacity).
10. The "Add" button is only shown if there is at least one newly added tag/chip visible.
11. The second "Add Tags" button at the bottom of the dropdown is disabled until/unless there is at least one newly added tag/chip visible.
12. The dropdown is shown when the "Add Tags" search box or the dropdown itself has focus. If the user clicks off the dropdown onto somewhere else on the tagging drawer, the dropdown will close but the chips will remain in the box and the tags won't be added until/unless the user clicks "Add Tags".
    
13. If the user selects "cancel" on the dropdown menu, their selections (i.e. chips) are forgotten and the select menu is closed.
14. Existing (previously saved) tags are shown as disabled checkmarks and cannot be removed using the checkboxes in the dropdown "Add Tags" widget. Instead, users click on the (X) next to them to remove them. But newly-added tags (that appear as chips) can be undone by un-checking them in the tag tree dropdown. This is the same as clicking the X on the chip.

Important Notes

1. Advanced keyboard and screen reader accessibility features will be built in [Tagging] Keyboard and screen reader friendly "Add Tags" Widget #189 . Review this first to be aware of it
2. We may want to use React Select here, which might save a lot of time.
3. Other changes to the overall tag drawer will come in [Tagging] Refined Tag Drawer #190. Changing anything outside of the "Add Tags" widget is out of scope!
   
4. In a following ticket, we will implement "edit mode" for the drawer which means that the drawer itself will also have a state that tracks newly added tags, and the changes won't be saved until the user closes the drawer using the "Save" button. So when the user presses "Add Tags" to save the changes from this new "Add Tags" widget, do not use React Query / REST API to save the tag changes immediately. Instead, call a callback prop from the parent drawer/taxonomy component. That parent component should then use React Query to save the changes, but later we'll modify it to just store the changes in React State until the user presses Save on the drawer.

[wittjeff]

The clickable things need to be keyboard-focusable (or the clickable icon within the chip should be keyboard-focusable; best not to have targets within targets.) React-select doesn't seem to do this. Paragon's Chip component does, but I don't see a mode for putting chips within a multi-select input. I think this has been worked over in the past, so maybe bring this to the weekly meeting?

The clickable/focusable thing (one per chip) should have a sensible human-readable Accessible Name, probably derived from an aria-label. If it isn't clear from the role, the name (aria-label) should indicate what will happen when you click on it. Example: aria-label="remove course evaluations" or "Course evaluations, click to remove". Paragon docs show an aria-label that isn't appropriate on the focusable icon on a chip, so the docs or code need to be updated there.