Improve focus styles for links inside Timeline.Item (#1089)

joshfarrant · web-flow · commit afd46c1f8d76 · 2025-07-07T15:26:51.000+01:00
* improve focus styles in Timeline.Item links

* add changeset

* add outline offset

* switch to :focus-visible

* update changeset
diff --git a/.changeset/sweet-chefs-notice.md b/.changeset/sweet-chefs-notice.md
@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Improved focus styles for links inside `Timeline.Item`.
diff --git a/packages/react/src/Timeline/Timeline.module.css b/packages/react/src/Timeline/Timeline.module.css
@@ -78,6 +78,11 @@
   color: var(--brand-InlineLink-color-pressed);
 }
 
+.Timeline__item a:focus-visible {
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-2);
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .Timeline__item,

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@primer/react-brand': patch
 +---
++
 +Improved focus styles for links inside `Timeline.Item`.