Ensure tab links conform to WCAG 2.1 AA guidelines (PP-3575) (#192)

## Description

<!--- Describe your changes -->
Tab links throughout the app were provided href values of
`javascript:void(0)` to prevent navigation. These void calls were
replaced with identifiers that reference actual sections within the app.

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
Using `javascript:void(0)` calls provide a poor experience for users as
they provide no indication that a real destination exists for the link
within the document. Ideally, we would make these elements buttons, but
we are currently constrained by `react-bootstrap` and how it implements
tabs. The alternatives: 1) remove the `event.preventDefault()` and the
tabs will navigate appropriately, but this causes a full page reload
every time by `react-router`, or 2) swap the links with buttons, but
this would break much of the functionality and visual styling.
<!--- If it fixes an open issue, please link to the issue here. -->
[PP-3575](https://ebce-lyrasis.atlassian.net/browse/PP-3575)

## How Has This Been Tested?

<!--- Please describe in detail how you tested your changes. -->
Manually tested that the tabbing still works as intended.
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [ ] I have updated the documentation accordingly.
- [x] All new and existing tests passed.


[PP-3575]:
https://ebce-lyrasis.atlassian.net/browse/PP-3575?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: PoorBillyPilgrim

src/components/TabContainer.tsx

@@ -49,10 +49,12 @@ export abstract class TabContainer<
         <ul className="nav nav-tabs">
           {Object.keys(this.tabs()).map((name) => (
             <li key={name} role="presentation" className={this.tabClass(name)}>
-              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               <a
-                href="javascript:void(0)"
-                onClick={this.handleSelect}
+                href={`#${name}`}
+                onClick={(event) => {
+                  event.preventDefault();
+                  this.handleSelect(event);
+                }}
                 data-tabkey={name}
               >
                 {this.tabDisplayName(name)}
@@ -93,7 +95,7 @@ export abstract class TabContainer<
   renderTab(name, children) {
     const display = this.currentTab() === name ? "block" : "none";
     return (
-      <div style={{ display }} key={name}>
+      <div style={{ display }} key={name} id={name}>
         {children}
       </div>
     );

src/components/__tests__/DiagnosticsServiceTabs-test.tsx

@@ -132,6 +132,7 @@ describe("DiagnosticsServiceTabs", () => {
 
       const tab2 = wrapper.find(".nav-tabs").find("li").at(1);
       tab2.find("a").simulate("click", {
+        preventDefault: stub(),
         currentTarget: { dataset: { tabkey: "test_service_2" } },
       });
 

src/components/__tests__/DiagnosticsTabContainer-test.tsx

@@ -136,6 +136,7 @@ describe("DiagnosticsTabContainer", () => {
       const tabs = wrapper.find("ul.nav-tabs").find("a");
       const monitorTab = tabs.at(1);
       monitorTab.simulate("click", {
+        preventDefault: stub(),
         currentTarget: { dataset: { tabkey: "monitor" } },
       });
 

src/components/__tests__/SelfTestsTabContainer-test.tsx

@@ -125,6 +125,7 @@ describe("SelfTestsTabContainer", () => {
     const tabs = wrapper.find("ul.nav-tabs").find("a");
     const patronAuthTab = tabs.at(1);
     patronAuthTab.simulate("click", {
+      preventDefault: stub(),
       currentTarget: { dataset: { tabkey: "patronAuthServices" } },
     });
 

src/components/__tests__/TroubleshootingTabContainer-test.tsx

@@ -36,6 +36,7 @@ describe("TroubleshootingTabContainer", () => {
     const tabs = wrapper.find("ul.nav-tabs").find("a");
     const selfTestsTab = tabs.at(1);
     selfTestsTab.simulate("click", {
+      preventDefault: stub(),
       currentTarget: { dataset: { tabkey: "self-tests" } },
     });