Link component should use native outline - boxShadow cause a11y issue…

…s on high contrast themes
primer · Dec 2, 2024 · 35e5b80 · 35e5b80
1 parent 7473042
commit 35e5b80
Showing 1 changed file with 2 additions and 4 deletions.
diff --git a/packages/react/src/Link/Link.module.css b/packages/react/src/Link/Link.module.css
@@ -4,7 +4,6 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: box-shadow var(--brand-animation-duration-faster);
   text-decoration: none;
   cursor: pointer;
 }
@@ -38,9 +37,8 @@
 }
 
 .Link:focus:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--brand-color-canvas-default), 0 0 2px 5px var(--brand-color-focus);
-  transition: none;
+  outline: 4px solid var(--brand-color-focus);
+  outline-offset: 2px;
 }
 
 .Link--default,