diff --git a/.changeset/famous-trainers-allow.md b/.changeset/famous-trainers-allow.md
new file mode 100644
index 00000000000..652225b4fb2
--- /dev/null
+++ b/.changeset/famous-trainers-allow.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+fix(Timeline): render as unordered list
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-colorblind-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-colorblind-linux.png
index 8727b830433..fd70761fbb8 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-colorblind-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-dimmed-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-dimmed-linux.png
index 9a596f6cae0..ed4f253cd8c 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-dimmed-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-high-contrast-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-high-contrast-linux.png
index 85e4cce2805..15c744b3c43 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-linux.png
index 8727b830433..fd70761fbb8 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-tritanopia-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-tritanopia-linux.png
index 8727b830433..fd70761fbb8 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-light-colorblind-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-light-colorblind-linux.png
index 2fe90ceecdc..b6b3e0924dd 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-light-colorblind-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-light-high-contrast-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-light-high-contrast-linux.png
index d2bb6dd09ae..8fcc204f890 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-light-high-contrast-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-light-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-light-linux.png
index 2fe90ceecdc..b6b3e0924dd 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-light-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-light-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-light-tritanopia-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-light-tritanopia-linux.png
index 2fe90ceecdc..b6b3e0924dd 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-light-tritanopia-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Clip-Sidebar-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-colorblind-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-colorblind-linux.png
index cf789b3ebeb..f0662e1a3e7 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-colorblind-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-dimmed-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-dimmed-linux.png
index 2b6533c383f..71ac0971918 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-dimmed-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-high-contrast-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-high-contrast-linux.png
index 71fb8b3506e..bd4506ff9bc 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-linux.png
index cf789b3ebeb..f0662e1a3e7 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-tritanopia-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-tritanopia-linux.png
index cf789b3ebeb..f0662e1a3e7 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-light-colorblind-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-light-colorblind-linux.png
index 5a055cd718a..e93f9791b3c 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-light-colorblind-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-light-high-contrast-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-light-high-contrast-linux.png
index cd540308418..5627c86951f 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-light-high-contrast-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-light-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-light-linux.png
index 5a055cd718a..e93f9791b3c 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-light-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-light-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-light-tritanopia-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-light-tritanopia-linux.png
index 5a055cd718a..e93f9791b3c 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-light-tritanopia-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Condensed-Items-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-colorblind-linux.png
index a862eb9507b..6aa46ad7ce0 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-dimmed-linux.png
index 71d48dfde3f..f3dd5fb6be9 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-high-contrast-linux.png
index 1574e801cc3..807a6b2df1e 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-linux.png
index a862eb9507b..6aa46ad7ce0 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-tritanopia-linux.png
index a862eb9507b..6aa46ad7ce0 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-light-colorblind-linux.png
index 78eb1aea348..141b89a9896 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-light-high-contrast-linux.png
index 8c365d390ea..57ec0c44088 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-light-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-light-linux.png
index 78eb1aea348..141b89a9896 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-light-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-light-tritanopia-linux.png
index 78eb1aea348..141b89a9896 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-colorblind-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-colorblind-linux.png
index c1d572d4ac3..dd72767f424 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-colorblind-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-dimmed-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-dimmed-linux.png
index 35a3bca4328..48d1af1e3ec 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-dimmed-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-high-contrast-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-high-contrast-linux.png
index fd23b676b4e..591a4d3c0ce 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-linux.png
index c1d572d4ac3..dd72767f424 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-tritanopia-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-tritanopia-linux.png
index c1d572d4ac3..dd72767f424 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-colorblind-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-colorblind-linux.png
index 7cd05e47be7..432c2dabf19 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-colorblind-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-high-contrast-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-high-contrast-linux.png
index 2a539d9cac8..71e788f96ca 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-high-contrast-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-linux.png
index 7cd05e47be7..432c2dabf19 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-tritanopia-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-tritanopia-linux.png
index 7cd05e47be7..432c2dabf19 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-tritanopia-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-focus-linux.png
index fcb376b9dab..17f7d7f4dd9 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-focus-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-hover-linux.png
index cce73b9e3ae..043d936e2d9 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-hover-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-linux.png
index cfd6b5aeb88..da74cf8adb0 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-focus-linux.png
index 0960bebc36b..a74f66ea15d 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-focus-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-hover-linux.png
index 6aa96d809d7..40c68773d7a 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-hover-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-linux.png
index cce0bb1a2fd..d3f0672df01 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-focus-linux.png
index fcb376b9dab..17f7d7f4dd9 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-focus-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-focus-linux.png
index 231ee7f104a..d9c0701fac2 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-focus-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-hover-linux.png
index 7f8f59afc44..c5630f980ca 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-hover-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-linux.png
index 8722c3cfc90..1e83ab32888 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-hover-linux.png
index cce73b9e3ae..043d936e2d9 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-hover-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-linux.png
index cfd6b5aeb88..da74cf8adb0 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-focus-linux.png
index fcb376b9dab..17f7d7f4dd9 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-focus-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-hover-linux.png
index cce73b9e3ae..043d936e2d9 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-hover-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-linux.png
index cfd6b5aeb88..da74cf8adb0 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-focus-linux.png
index 0b8fba47243..b7f381da51f 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-focus-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-hover-linux.png
index 208f79736a8..11d8552b7ad 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-hover-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-linux.png
index 4eac70cf984..277cbc9f8e7 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-focus-linux.png
index 0b8fba47243..b7f381da51f 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-focus-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-focus-linux.png
index 7ed7af4d691..8b2ff5b8c23 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-focus-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-hover-linux.png
index 5204bb1a12a..7d708c3a8db 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-hover-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-linux.png
index 50bf4a0878a..5be85e297ef 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-hover-linux.png
index 208f79736a8..11d8552b7ad 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-hover-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-linux.png
index 4eac70cf984..277cbc9f8e7 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-focus-linux.png
index 0b8fba47243..b7f381da51f 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-focus-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-hover-linux.png
index 208f79736a8..11d8552b7ad 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-hover-linux.png differ
diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-linux.png
index 4eac70cf984..277cbc9f8e7 100644
Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-linux.png differ
diff --git a/packages/react/src/Timeline/Timeline.features.stories.tsx b/packages/react/src/Timeline/Timeline.features.stories.tsx
index 0a6731096ff..6f92cd7d8c1 100644
--- a/packages/react/src/Timeline/Timeline.features.stories.tsx
+++ b/packages/react/src/Timeline/Timeline.features.stories.tsx
@@ -53,19 +53,23 @@ export const CondensedItems = () => (
export const TimelineBreak = () => (
-
-
-
-
- This is a message
-
+
+
+
+
+
+ This is a message
+
+
-
-
-
-
- This is a message
-
+
+
+
+
+
+ This is a message
+
+
)
diff --git a/packages/react/src/Timeline/Timeline.tsx b/packages/react/src/Timeline/Timeline.tsx
index 32c7c33aa7a..b1009ec78fd 100644
--- a/packages/react/src/Timeline/Timeline.tsx
+++ b/packages/react/src/Timeline/Timeline.tsx
@@ -7,9 +7,18 @@ import type {SxProp} from '../sx'
import sx from '../sx'
import type {ComponentProps} from '../utils/types'
-const Timeline = styled.div<{clipSidebar?: boolean} & SxProp>`
+const Timeline = styled.ul<{clipSidebar?: boolean} & SxProp>`
display: flex;
flex-direction: column;
+ list-style: none;
+ padding-inline-start: 0;
+ margin-block-start: 0;
+ margin-block-end: 0;
+
+ .Timeline-Group {
+ padding-inline-start: 0;
+ }
+
${props =>
props.clipSidebar &&
css`
@@ -27,7 +36,7 @@ const Timeline = styled.div<{clipSidebar?: boolean} & SxProp>`
type StyledTimelineItemProps = {condensed?: boolean} & SxProp
-const TimelineItem = styled.div.attrs(props => ({
+const TimelineItem = styled.li.attrs(props => ({
className: clsx('Timeline-Item', props.className),
}))`
display: flex;
@@ -108,7 +117,7 @@ const TimelineBody = styled.div`
${sx};
`
-const TimelineBreak = styled.div`
+const StyledTimelineBreak = styled.div`
position: relative;
z-index: 1;
height: 24px;
@@ -121,6 +130,21 @@ const TimelineBreak = styled.div`
${sx};
`
+function TimelineBreak(props: ComponentProps) {
+ return
+}
+
+function TimelineGroup({children, ...props}: React.ComponentPropsWithoutRef<'ul'>) {
+ return (
+
+
+ {children}
+
+
+ )
+}
+TimelineGroup.displayName = 'Timeline.Group'
+
TimelineItem.displayName = 'Timeline.Item'
TimelineBadge.displayName = 'Timeline.Badge'
@@ -133,9 +157,11 @@ export type TimelineProps = ComponentProps
export type TimelineItemsProps = ComponentProps
export type TimelineBodyProps = ComponentProps
export type TimelineBreakProps = ComponentProps
+export type TimelineGroupProps = ComponentProps
export default Object.assign(Timeline, {
Item: TimelineItem,
Badge: TimelineBadge,
Body: TimelineBody,
Break: TimelineBreak,
+ Group: TimelineGroup,
})
diff --git a/packages/react/src/Timeline/__tests__/Timeline.test.tsx b/packages/react/src/Timeline/__tests__/Timeline.test.tsx
index c02faab4135..432d1c777fe 100644
--- a/packages/react/src/Timeline/__tests__/Timeline.test.tsx
+++ b/packages/react/src/Timeline/__tests__/Timeline.test.tsx
@@ -27,7 +27,11 @@ describe('Timeline.Item', () => {
behavesAsComponent({Component: Timeline.Item})
it('should have no axe violations', async () => {
- const {container} = HTMLRender()
+ const {container} = HTMLRender(
+
+
+ ,
+ )
const results = await axe.run(container)
expect(results).toHaveNoViolations()
})
@@ -50,3 +54,32 @@ describe('Timeline.Badge', () => {
expect(results).toHaveNoViolations()
})
})
+
+describe('Timeline.Break', () => {
+ behavesAsComponent({Component: Timeline.Break})
+
+ it('should have no axe violations', async () => {
+ const {container} = HTMLRender()
+ const results = await axe.run(container)
+ expect(results).toHaveNoViolations()
+ })
+})
+
+describe('Timeline.Group', () => {
+ behavesAsComponent({Component: Timeline.Group, options: {skipAs: true, skipSx: true}})
+
+ // TODO
+ it.todo('correctly renders with Timeline.Group')
+
+ it('should have no axe violations', async () => {
+ const {container} = HTMLRender(
+
+
+ test
+
+ ,
+ )
+ const results = await axe.run(container)
+ expect(results).toHaveNoViolations()
+ })
+})
diff --git a/packages/react/src/Timeline/__tests__/Timeline.types.test.tsx b/packages/react/src/Timeline/__tests__/Timeline.types.test.tsx
index c86ca5e2b9a..74f21fa9f8e 100644
--- a/packages/react/src/Timeline/__tests__/Timeline.types.test.tsx
+++ b/packages/react/src/Timeline/__tests__/Timeline.types.test.tsx
@@ -9,6 +9,7 @@ export function shouldAcceptCallWithNoProps() {
+
)
}
@@ -26,6 +27,8 @@ export function shouldNotAcceptSystemProps() {
{/* @ts-expect-error system props should not be accepted */}
+ {/* @ts-expect-error system props should not be accepted */}
+
)
}
diff --git a/packages/react/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap b/packages/react/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
index b96e1e117af..93e7eac1c1e 100644
--- a/packages/react/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
+++ b/packages/react/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
@@ -9,6 +9,12 @@ exports[`Timeline renders with clipSidebar prop 1`] = `
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
+ list-style: none;
+ padding-inline-start: 0;
+}
+
+.c0 .Timeline-Group {
+ padding-inline-start: 0;
}
.c0 .Timeline-Item:first-child {
@@ -19,7 +25,7 @@ exports[`Timeline renders with clipSidebar prop 1`] = `
padding-bottom: 0;
}
-
`;
@@ -61,7 +67,7 @@ exports[`Timeline.Item renders with condensed prop 1`] = `
border: 0;
}
-
`;