LP1948693 Migrate from NgbTabset to ngbNav

LP1948693 Migrate from NgbTabset to ngbNav

Updates the deprecated NgbTabset components to ngbNav and adds directive
for keyboard navigation.

See https://gist.github.com/stephanieleary/800b9f2b1d9c08cc66d694daaa1788b9 for
a quick guide to the markup changes involved.

Screens to test:

1. /staff/acq/provider, right click an existing provider to show details tabs
2. /staff/admin/local/negative-balances
3. /staff/admin/local/action/survey, edit an existing survey, test Edit Survey
and Q&A tabs
4. /staff/admin/server/actor/org_unit, note that Addresses tab has a second set
of tabs underneath
5. /staff/admin/server/actor/org_unit_type, note that eg-tree has also changed
here
6. /staff/admin/server/permission/grp_tree, choose a group to see tabs
7. /staff/admin/server/config/print_template
8. /staff/booking/create_reservation
9. /staff/booking/manage_reservations, filter reservations section
10. /staff/booking/return
11. /staff/cat/authority/browse
12. /staff/cat/vandelay/import and all import/export tabs
13. /staff/cat/bucket/record/view
14. /staff/catalog/search
15. /staff/circ/holds/pull-list, right click a hold, choose Show Hold Details,
the tabs are at the bottom of the screen

Test plan:

Note that you cannot navigate tabbed interfaces using the tab key on your
keyboard.

Apply the patch, then visit the screens listed above.

You should be able to use the tab key to move sequentially through all the tabs.
Pressing Enter on an inactive tab should make it active, just as clicking it
would. You should not be able to click or press Enter to activate a disabled
tab.

You should be able to move from the last tab in the list into the first
focusable element in the active tab's content panel. If you spot a tab content
panel that doesn't contain a focusable element (i.e. links or inputs), let me
know; we have to set its tabindex attribute manually.

If a tab panel contains a second set of tabs, these should work as well.

Note on ARIA and roles:

Note that neither Bootstrap 5 nor ng-bootstrap are currently following the ARIA
Authoring Practices Guide for tabs with manual activation (the recommended
pattern for tab panels with complicated content, like form inputs or data
tables), which does not recommend sequential movement:
https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html. Therefore,
we aren't following this pattern either. We can revisit this and/or take it up
with Bootstrap.

For now, running axe DevTools on any screen with navs will show ARIA role errors
on role="tab" attributes. We are using ng-bootstrap's default ARIA roles for
tabs, but they are incorrect. I am trying to get traction on a pull request to
change the problem in ng-bootstrap, but in the meantime, we are not using the
automatic [roles] directive. Role attributes have been set explicitly on all
tabs and their containing elements.

Note on eg-tree CSS:

In the Org Unit Type screens, there was previously some inline CSS related to
eg-tree that was causing compiler errors. I have moved this to a separate CSS
file, and will revisit eg-tree styles more generally in another upcoming
project.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Signed-off-by: Bill Erickson <berickxx@gmail.com>