fix: tab nav focus ring (#151)

* fix: tab nav focus ring

* fix: localize links

Author: emilyjablonski

src/actions/Link.tsx

@@ -27,6 +27,8 @@ export interface LinkProps {
   ariaHidden?: boolean
   /** Accessible label if link doesn't contain text content */
   ariaLabel?: string
+  /** Indicates whether this link represents the current item within a set */
+  ariaCurrent?: string
   /** Element ID */
   id?: string
   /** Additional CSS classes */
@@ -53,6 +55,7 @@ const Link = (props: LinkProps) => {
     className: classNames.join(" "),
     "aria-label": props.ariaLabel,
     "aria-hidden": props.ariaHidden,
+    "aria-current": props.ariaCurrent,
   }
 
   if (props.newWindowTarget) {

src/navigation/Tabs.scss

@@ -63,7 +63,11 @@
   &:focus-visible,
   .tabs-tab-link:focus-visible {
     outline: 2px solid var(--seeds-color-highlight-cool);
-    outline-offset: 2px;
+    outline-offset: -2px;
+  }
+
+  &:focus-within {
+    z-index: 2;
   }
 
   &:hover {
@@ -110,8 +114,24 @@
 
 .tabs-tab-link {
   display: block;
+  border-radius: inherit;
+  margin-inline: calc(-1 * var(--tab-padding-inline));
+  margin-block: calc(-1 * var(--tab-padding-block))
+    calc(-1 * (var(--tab-padding-block) - var(--tab-active-indicator-width)));
+  padding-inline: var(--tab-padding-inline);
+  padding-block: var(--tab-padding-block)
+    calc(var(--tab-padding-block) - var(--tab-active-indicator-width));
   color: inherit;
   text-decoration: none;
+
+  [data-size="sm"] & {
+    margin-inline: calc(-1 * var(--tab-padding-inline-sm));
+    margin-block: calc(-1 * var(--tab-padding-block-sm))
+      calc(-1 * (var(--tab-padding-block-sm) - var(--tab-active-indicator-width)));
+    padding-inline: var(--tab-padding-inline-sm);
+    padding-block: var(--tab-padding-block-sm)
+      calc(var(--tab-padding-block-sm) - var(--tab-active-indicator-width));
+  }
 }
 
 .tabs-panel {

src/navigation/Tabs.tsx

@@ -5,6 +5,7 @@ import {
   TabList as ReactTabList,
   TabPanel as ReactTabPanel,
 } from "react-tabs"
+import Link from "../actions/Link"
 import { SeedsSizes } from "../global/sharedTypes"
 import "./Tabs.scss"
 
@@ -93,9 +94,9 @@ const Tab = (props: TabProps) => {
     if (!disabled && href) {
       return (
         <li data-active={selected} data-disabled={disabled} className={className.join(" ")}>
-          <a href={href} aria-current={selected ? "page" : undefined} className="tabs-tab-link">
+          <Link href={href} ariaCurrent={selected ? "page" : undefined} className="tabs-tab-link">
             {props.children}
-          </a>
+          </Link>
         </li>
       )
     }