Update tab anchor link functionality

src/components/hy-tabs/hy-tabs.scss

@@ -87,17 +87,11 @@
     }
   }
 
-  [role='tab'] {
-    align-items: stretch;
-    background-color: transparent;
-    border: 0;
+  [role='tablist'] a {
     display: flex;
-    flex-direction: row;
-    flex-shrink: 0;
-    justify-content: center;
-    margin-bottom: 6px;
     max-width: 47.56%;
-    padding: 0;
+    text-decoration: none;
+    flex-shrink: 0;
 
     &:not(:first-of-type) {
       margin-left: 6px;
@@ -114,6 +108,17 @@
     @include breakpoint($extrawide) {
       max-width: 23.03%;
     }
+  }
+
+  [role='tab'] {
+    align-items: stretch;
+    background-color: transparent;
+    border: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-bottom: 6px;
+    padding: 0;
 
     > span {
       @include font-size(14px, 14px);

src/components/hy-tabs/hy-tabs.tsx

@@ -345,10 +345,22 @@ export class HyTabs implements ComponentInterface {
               this.tabButtonTitles.map((item) => {
                 const title = Object.values(item)[0];
                 const id = title.toLowerCase().replace(/\W/g, '-');
+
+                const titleAsId = title.toLowerCase().replace(/\W/g, '-');
+                const tabItemHref = '#' + titleAsId;
+
                 return (
-                  <button aria-selected="false" aria-controls={`${id}-tab`} class={this.headerstyle} role="tab" id={id}>
-                    <span>{title}</span>
-                  </button>
+                  <a href={tabItemHref} tabindex="-1">
+                    <button
+                      aria-selected="false"
+                      aria-controls={`${id}-tab`}
+                      class={this.headerstyle}
+                      role="tab"
+                      id={id}
+                    >
+                      <span>{title}</span>
+                    </button>
+                  </a>
                 );
               })}
           </div>