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

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" } },
     });