diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-dark-colorblind-linux.png
new file mode 100644
index 00000000000..9184936428c
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-dark-dimmed-linux.png
new file mode 100644
index 00000000000..ab598bc1619
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..861603d8332
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-dark-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-dark-linux.png
new file mode 100644
index 00000000000..9184936428c
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..9184936428c
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-light-colorblind-linux.png
new file mode 100644
index 00000000000..329a2f1d79c
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-light-high-contrast-linux.png
new file mode 100644
index 00000000000..5cf5c5e320a
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-light-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-light-linux.png
new file mode 100644
index 00000000000..329a2f1d79c
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-light-tritanopia-linux.png
new file mode 100644
index 00000000000..329a2f1d79c
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-dark-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-dark-colorblind-linux.png
new file mode 100644
index 00000000000..71be1297378
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-dark-dimmed-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-dark-dimmed-linux.png
new file mode 100644
index 00000000000..7bb0976c2e2
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-dark-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..7074567d327
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-dark-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-dark-linux.png
new file mode 100644
index 00000000000..7356ac5968e
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-dark-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..7356ac5968e
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-light-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-light-colorblind-linux.png
new file mode 100644
index 00000000000..25f933882d6
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-light-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-light-high-contrast-linux.png
new file mode 100644
index 00000000000..dc6f9180c55
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-light-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-light-linux.png
new file mode 100644
index 00000000000..ba2865f37b0
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-light-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-light-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-light-tritanopia-linux.png
new file mode 100644
index 00000000000..ba2865f37b0
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dialog-Overlay-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-colorblind-linux.png
new file mode 100644
index 00000000000..38dcb48f995
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-dimmed-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-dimmed-linux.png
new file mode 100644
index 00000000000..5aed1427429
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..c20b9db4b74
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-linux.png
new file mode 100644
index 00000000000..f11e2e76b00
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..f11e2e76b00
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-light-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-light-colorblind-linux.png
new file mode 100644
index 00000000000..4d88a83b40e
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-light-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-light-high-contrast-linux.png
new file mode 100644
index 00000000000..b2a3c80fc7a
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-light-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-light-linux.png
new file mode 100644
index 00000000000..942ec63a064
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-light-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-light-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-light-tritanopia-linux.png
new file mode 100644
index 00000000000..942ec63a064
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-dark-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-dark-colorblind-linux.png
new file mode 100644
index 00000000000..5d0f7a2496e
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-dark-dimmed-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-dark-dimmed-linux.png
new file mode 100644
index 00000000000..da192aa2934
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-dark-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..ed2263ade4a
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-dark-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-dark-linux.png
new file mode 100644
index 00000000000..5d0f7a2496e
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-dark-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..40e5344f33c
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-light-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-light-colorblind-linux.png
new file mode 100644
index 00000000000..e1c0c2fdc91
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-light-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-light-high-contrast-linux.png
new file mode 100644
index 00000000000..88c5904b6e5
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-light-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-light-linux.png
new file mode 100644
index 00000000000..e1c0c2fdc91
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-light-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-light-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-light-tritanopia-linux.png
new file mode 100644
index 00000000000..fcbbed6917c
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Issue-Overlay-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-colorblind-linux.png
new file mode 100644
index 00000000000..15c7c89e0fc
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-dimmed-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-dimmed-linux.png
new file mode 100644
index 00000000000..38bb73c0bba
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..7390ebf1e9c
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-linux.png
new file mode 100644
index 00000000000..bc2921e4ba2
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..15c7c89e0fc
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-colorblind-linux.png
new file mode 100644
index 00000000000..83c6dd9acf8
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-high-contrast-linux.png
new file mode 100644
index 00000000000..2a7d1ad9849
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-linux.png
new file mode 100644
index 00000000000..61e5794f0c7
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-tritanopia-linux.png
new file mode 100644
index 00000000000..afe9e626188
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-colorblind-linux.png
new file mode 100644
index 00000000000..3f0dbed8adf
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-dimmed-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-dimmed-linux.png
new file mode 100644
index 00000000000..bab0c5fb548
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..90b8fbcb24f
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-linux.png
new file mode 100644
index 00000000000..a993395c4a3
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..b192ab59603
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-colorblind-linux.png
new file mode 100644
index 00000000000..3ff648effc4
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-high-contrast-linux.png
new file mode 100644
index 00000000000..a2ce78dc270
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-linux.png
new file mode 100644
index 00000000000..26543ada49e
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-tritanopia-linux.png
new file mode 100644
index 00000000000..f0c283a19ab
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-dark-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-dark-colorblind-linux.png
new file mode 100644
index 00000000000..17177e7fa56
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-dark-dimmed-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-dark-dimmed-linux.png
new file mode 100644
index 00000000000..f9d0fc96868
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-dark-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..c7e5a3082ea
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-dark-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-dark-linux.png
new file mode 100644
index 00000000000..dcc6a2934d0
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-dark-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..dcc6a2934d0
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-light-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-light-colorblind-linux.png
new file mode 100644
index 00000000000..48cf8bfa9a5
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-light-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-light-high-contrast-linux.png
new file mode 100644
index 00000000000..71c59324000
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-light-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-light-linux.png
new file mode 100644
index 00000000000..48cf8bfa9a5
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-light-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-light-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-light-tritanopia-linux.png
new file mode 100644
index 00000000000..38015449521
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Overlay-On-Top-Of-Overlay-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-dark-colorblind-linux.png
new file mode 100644
index 00000000000..5d200813319
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-dark-dimmed-linux.png
new file mode 100644
index 00000000000..f23945bb6be
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..18fc28b11df
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-dark-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-dark-linux.png
new file mode 100644
index 00000000000..89dfaf97237
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..89dfaf97237
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-light-colorblind-linux.png
new file mode 100644
index 00000000000..f55e1b6bdea
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-light-high-contrast-linux.png
new file mode 100644
index 00000000000..9863598732f
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-light-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-light-linux.png
new file mode 100644
index 00000000000..f55e1b6bdea
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-light-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-light-tritanopia-linux.png
new file mode 100644
index 00000000000..0a571cc0726
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Playground-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-dark-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-dark-colorblind-linux.png
new file mode 100644
index 00000000000..a3d281ba1d5
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-dark-dimmed-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-dark-dimmed-linux.png
new file mode 100644
index 00000000000..873d027843a
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-dark-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..f038668b0fd
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-dark-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-dark-linux.png
new file mode 100644
index 00000000000..a3d281ba1d5
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-dark-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..a3d281ba1d5
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-light-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-light-colorblind-linux.png
new file mode 100644
index 00000000000..26ee25bae5c
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-light-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-light-high-contrast-linux.png
new file mode 100644
index 00000000000..cdb39f7b459
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-light-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-light-linux.png
new file mode 100644
index 00000000000..26ee25bae5c
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-light-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-light-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-light-tritanopia-linux.png
new file mode 100644
index 00000000000..26ee25bae5c
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Positioned-Overlays-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-dark-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-dark-colorblind-linux.png
new file mode 100644
index 00000000000..5475c3715bc
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-dark-dimmed-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-dark-dimmed-linux.png
new file mode 100644
index 00000000000..4bcd5ee5821
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-dark-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..f75800514b5
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-dark-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-dark-linux.png
new file mode 100644
index 00000000000..87614b253a4
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-dark-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..87614b253a4
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-light-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-light-colorblind-linux.png
new file mode 100644
index 00000000000..be48775f9a6
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-light-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-light-high-contrast-linux.png
new file mode 100644
index 00000000000..411ea701363
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-light-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-light-linux.png
new file mode 100644
index 00000000000..838eca2baec
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-light-linux.png differ
diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-light-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-light-tritanopia-linux.png
new file mode 100644
index 00000000000..838eca2baec
Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-SX-Props-light-tritanopia-linux.png differ
diff --git a/e2e/components/Overlay.test.ts b/e2e/components/Overlay.test.ts
new file mode 100644
index 00000000000..b9f36ba62ed
--- /dev/null
+++ b/e2e/components/Overlay.test.ts
@@ -0,0 +1,84 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  {
+    title: 'Default',
+    id: 'private-components-overlay--default',
+  },
+  {
+    title: 'Playground',
+    id: 'private-components-overlay--playground',
+  },
+  {
+    title: 'Dialog Overlay',
+    id: 'private-components-overlay-features--dialog-overlay',
+  },
+  {
+    title: 'Dropdown Overlay',
+    id: 'private-components-overlay-features--dropdown-overlay',
+  },
+  {
+    title: 'Memex Issue Overlay',
+    id: 'private-components-overlay-features--memex-issue-overlay',
+  },
+  {
+    title: 'Memex Nested Overlays',
+    id: 'private-components-overlay-features--memex-nested-overlays',
+  },
+  {
+    title: 'Nested Overlays',
+    id: 'private-components-overlay-features--nested-overlays',
+  },
+  {
+    title: 'Overlay On Top Of Overlay',
+    id: 'private-components-overlay-features--overlay-on-top-of-overlay',
+  },
+  {
+    title: 'Positioned Overlays',
+    id: 'private-components-overlay-features--positioned-overlays',
+  },
+  {
+    title: 'SX Props',
+    id: 'private-components-overlay-dev--sx-props',
+  },
+] as const
+
+test.describe('Overlay ', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('@vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+              args: {
+                open: true,
+              },
+            })
+
+            await expect(page).toHaveScreenshot(`Overlay.${story.title}.${theme}.png`, {animations: 'disabled'})
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+              args: {
+                open: true,
+              },
+            })
+
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
+})
diff --git a/e2e/test-helpers/storybook.ts b/e2e/test-helpers/storybook.ts
index cd07cbb4629..ccb890c8316 100644
--- a/e2e/test-helpers/storybook.ts
+++ b/e2e/test-helpers/storybook.ts
@@ -54,7 +54,7 @@ export async function visit(page: Page, options: Options) {
 
   await page.goto(url.toString())
   await page.waitForSelector('body.sb-show-main:not(.sb-show-preparing-story)')
-  await page.waitForSelector('#storybook-root > *')
+  await page.waitForSelector('#storybook-root > *', {state: 'attached'})
 
   await waitForImages(page)
 }
diff --git a/packages/react/src/Overlay/Overlay.dev.stories.tsx b/packages/react/src/Overlay/Overlay.dev.stories.tsx
new file mode 100644
index 00000000000..1f848d4d6c2
--- /dev/null
+++ b/packages/react/src/Overlay/Overlay.dev.stories.tsx
@@ -0,0 +1,91 @@
+import React, {useRef, useState} from 'react'
+import type {Args, Meta} from '@storybook/react'
+import Text from '../Text'
+import {Button, IconButton} from '../Button'
+import Overlay from './Overlay'
+import {useFocusTrap} from '../hooks/useFocusTrap'
+import Box from '../Box'
+import {XIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Private/Components/Overlay/Dev',
+  component: Overlay,
+  args: {
+    open: false,
+  },
+  argTypes: {
+    open: {
+      control: false,
+      visible: false,
+    },
+  },
+} as Meta<typeof Overlay>
+
+export const SxProps = (args: Args) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const confirmButtonRef = useRef<HTMLButtonElement>(null)
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const closeOverlay = () => setIsOpen(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+  useFocusTrap({
+    containerRef,
+    disabled: !isOpen,
+  })
+  return (
+    <Box ref={anchorRef}>
+      <Button
+        ref={buttonRef}
+        onClick={() => {
+          setIsOpen(!isOpen)
+        }}
+      >
+        Open overlay
+      </Button>
+      {isOpen || args.open ? (
+        <Overlay
+          initialFocusRef={confirmButtonRef}
+          returnFocusRef={buttonRef}
+          ignoreClickRefs={[buttonRef]}
+          onEscape={closeOverlay}
+          onClickOutside={closeOverlay}
+          width="large"
+          anchorSide="inside-right"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Sample overlay"
+          ref={containerRef}
+          sx={{
+            left: '50%',
+            mt: 2,
+            color: 'var(--bgColor-danger-muted)',
+          }}
+          style={{padding: '16px'}}
+        >
+          <Box
+            sx={{
+              height: '100vh',
+              maxWidth: 'calc(-1rem + 100vw)',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <IconButton
+              aria-label="Close"
+              onClick={closeOverlay}
+              icon={XIcon}
+              variant="invisible"
+              sx={{
+                position: 'absolute',
+                left: '5px',
+                top: '5px',
+              }}
+            />
+            <Text>Look! an overlay</Text>
+          </Box>
+        </Overlay>
+      ) : null}
+    </Box>
+  )
+}
diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx
index 6b31bdbb7ca..af4c93bc5e3 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.features.stories.tsx
@@ -1,5 +1,5 @@
 import React, {useState, useRef, useCallback} from 'react'
-import type {Meta} from '@storybook/react'
+import type {Args, Meta} from '@storybook/react'
 import {TriangleDownIcon, PlusIcon, IssueDraftIcon, XIcon} from '@primer/octicons-react'
 import {
   Overlay,
@@ -18,8 +18,6 @@ import {
   ActionMenu,
   useFocusTrap,
 } from '..'
-import type {AnchorSide} from '@primer/behaviors'
-import type {AriaRole} from '../utils/types'
 import {Tooltip} from '../TooltipV2'
 
 export default {
@@ -28,6 +26,7 @@ export default {
   args: {
     anchorSide: 'inside-top',
     role: 'dialog',
+    open: false,
   },
   argTypes: {
     anchorSide: {
@@ -49,16 +48,14 @@ export default {
     role: {
       type: 'string',
     },
+    open: {
+      control: false,
+      visible: false,
+    },
   },
 } as Meta
 
-interface OverlayProps {
-  anchorSide?: AnchorSide
-  role?: AriaRole
-  right?: boolean
-}
-
-export const DropdownOverlay = ({anchorSide}: OverlayProps) => {
+export const DropdownOverlay = ({anchorSide, open}: Args) => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
 
@@ -67,7 +64,7 @@ export const DropdownOverlay = ({anchorSide}: OverlayProps) => {
       <Button ref={buttonRef} sx={{position: 'relative'}} onClick={() => setIsOpen(!isOpen)}>
         open overlay
       </Button>
-      {isOpen ? (
+      {isOpen || open ? (
         <Overlay
           returnFocusRef={buttonRef}
           height="auto"
@@ -79,12 +76,14 @@ export const DropdownOverlay = ({anchorSide}: OverlayProps) => {
           role="none"
         >
           <ActionList role="menu">
-            <ActionList.Item>Copy link</ActionList.Item>
-            <ActionList.Item>Quote reply</ActionList.Item>
-            <ActionList.Item>Reference in new issue</ActionList.Item>
-            <ActionList.Item>Edit</ActionList.Item>
+            <ActionList.Item role="menuitem">Copy link</ActionList.Item>
+            <ActionList.Item role="menuitem">Quote reply</ActionList.Item>
+            <ActionList.Item role="menuitem">Reference in new issue</ActionList.Item>
+            <ActionList.Item role="menuitem">Edit</ActionList.Item>
             <ActionList.Divider />
-            <ActionList.Item variant="danger">Delete</ActionList.Item>
+            <ActionList.Item variant="danger" role="menuitem">
+              Delete
+            </ActionList.Item>
           </ActionList>
         </Overlay>
       ) : null}
@@ -92,7 +91,7 @@ export const DropdownOverlay = ({anchorSide}: OverlayProps) => {
   )
 }
 
-export const DialogOverlay = ({anchorSide, role}: OverlayProps) => {
+export const DialogOverlay = ({anchorSide, role, open}: Args) => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -106,7 +105,7 @@ export const DialogOverlay = ({anchorSide, role}: OverlayProps) => {
       <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
         open overlay
       </Button>
-      {isOpen ? (
+      {isOpen || open ? (
         <Overlay
           initialFocusRef={confirmButtonRef}
           returnFocusRef={buttonRef}
@@ -117,6 +116,7 @@ export const DialogOverlay = ({anchorSide, role}: OverlayProps) => {
           anchorSide={anchorSide}
           role={role}
           aria-modal={role === 'dialog' ? 'true' : undefined}
+          aria-label={role === 'dialog' ? 'Confirmation screen' : undefined}
           ref={containerRef}
         >
           <Box display="flex" flexDirection="column" p={2}>
@@ -134,7 +134,7 @@ export const DialogOverlay = ({anchorSide, role}: OverlayProps) => {
   )
 }
 
-export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => {
+export const OverlayOnTopOfOverlay = ({anchorSide, role, open}: Args) => {
   const [isOpen, setIsOpen] = useState(false)
   const [isSecondaryOpen, setIsSecondaryOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
@@ -161,7 +161,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => {
       <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
         open overlay
       </Button>
-      {isOpen ? (
+      {isOpen || open ? (
         <Overlay
           initialFocusRef={confirmButtonRef}
           returnFocusRef={buttonRef}
@@ -171,6 +171,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => {
           anchorSide={anchorSide}
           role={role}
           aria-modal={role === 'dialog' ? 'true' : undefined}
+          aria-label={role === 'dialog' ? 'Open overlay' : undefined}
           ref={primaryContainer}
           preventOverflow={false}
         >
@@ -188,6 +189,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => {
               anchorSide={anchorSide}
               role={role}
               aria-modal={role === 'dialog' ? 'true' : undefined}
+              aria-label={role === 'dialog' ? 'Options' : undefined}
               ref={secondaryContainer}
               preventOverflow={false}
             >
@@ -218,7 +220,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => {
   )
 }
 
-export const MemexNestedOverlays = ({role}: OverlayProps) => {
+export const MemexNestedOverlays = ({role, open}: Args) => {
   const [overlayOpen, setOverlayOpen] = React.useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -238,7 +240,7 @@ export const MemexNestedOverlays = ({role}: OverlayProps) => {
           icon={TriangleDownIcon}
         />
       </ButtonGroup>
-      {overlayOpen && (
+      {(overlayOpen || open) && (
         <Overlay
           width="auto"
           onEscape={() => setOverlayOpen(false)}
@@ -249,15 +251,21 @@ export const MemexNestedOverlays = ({role}: OverlayProps) => {
           left={16}
           role={role}
           aria-modal={role === 'dialog' ? 'true' : undefined}
+          aria-label={role === 'dialog' ? 'Add iteration' : undefined}
           ref={containerRef}
           preventOverflow={false}
         >
-          <Box as="form" onSubmit={() => setOverlayOpen(false)} sx={{display: 'flex', flexDirection: 'column', py: 2}}>
+          <Box
+            as="form"
+            onSubmit={() => setOverlayOpen(false)}
+            sx={{display: 'flex', flexDirection: 'column', py: 2}}
+            aria-label="Set Duration Form"
+          >
             <Box sx={{paddingX: 3, display: 'flex', alignItems: 'center', gap: 1}}>
               <Text color="fg.muted" sx={{fontSize: 1}}>
                 Duration:
               </Text>
-              <TextInput defaultValue={2} />
+              <TextInput defaultValue={2} aria-label="Duration" />
               <ActionMenu>
                 <ActionMenu.Button sx={{width: 200}} aria-label="Change duration unit">
                   {duration}
@@ -285,7 +293,7 @@ export const MemexNestedOverlays = ({role}: OverlayProps) => {
   )
 }
 
-export const NestedOverlays = ({role}: OverlayProps) => {
+export const NestedOverlays = ({role, open}: Args) => {
   const [listOverlayOpen, setListOverlayOpen] = React.useState(false)
   const [createListOverlayOpen, setCreateListOverlayOpen] = React.useState(false)
 
@@ -321,7 +329,7 @@ export const NestedOverlays = ({role}: OverlayProps) => {
           icon={TriangleDownIcon}
         />
       </ButtonGroup>
-      {listOverlayOpen && (
+      {(listOverlayOpen || open) && (
         <Overlay
           width="medium"
           onEscape={() => setListOverlayOpen(false)}
@@ -334,6 +342,7 @@ export const NestedOverlays = ({role}: OverlayProps) => {
           ref={primaryContainer}
           role={role}
           aria-modal={role === 'dialog' ? 'true' : undefined}
+          aria-label={role === 'dialog' ? 'Sample list' : undefined}
         >
           <Box sx={{display: 'flex', flexDirection: 'column', py: 2}}>
             <Box sx={{paddingX: 3, paddingY: 2}}>
@@ -375,9 +384,10 @@ export const NestedOverlays = ({role}: OverlayProps) => {
               left={64}
               role={role}
               aria-modal={role === 'dialog' ? 'true' : undefined}
+              aria-label={role === 'dialog' ? 'Create a list' : undefined}
               ref={secondaryContainer}
             >
-              <Box as="form" sx={{display: 'flex', flexDirection: 'column', p: 3}}>
+              <Box as="form" sx={{display: 'flex', flexDirection: 'column', p: 3}} aria-label="Set Duration Form">
                 <Text color="fg.muted" sx={{fontSize: 1, mb: 3}}>
                   Create a list to organize your starred repositories.
                 </Text>
@@ -396,7 +406,7 @@ export const NestedOverlays = ({role}: OverlayProps) => {
   )
 }
 
-export const MemexIssueOverlay = ({role}: OverlayProps) => {
+export const MemexIssueOverlay = ({role, open}: Args) => {
   const [overlayOpen, setOverlayOpen] = React.useState(false)
   const linkRef = useRef<HTMLAnchorElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
@@ -435,7 +445,7 @@ export const MemexIssueOverlay = ({role}: OverlayProps) => {
       >
         <IssueDraftIcon /> {title}
       </Link>
-      {overlayOpen && (
+      {(overlayOpen || open) && (
         <Overlay
           height="auto"
           width="auto"
@@ -446,6 +456,7 @@ export const MemexIssueOverlay = ({role}: OverlayProps) => {
           left="calc(100vw - 350px)"
           role={role}
           aria-modal={role === 'dialog' ? 'true' : undefined}
+          aria-label={role === 'dialog' ? 'Draft issue editor' : undefined}
           ref={containerRef}
         >
           <Box sx={{p: 4, height: '100vh', width: '350px'}}>
@@ -509,7 +520,7 @@ export const MemexIssueOverlay = ({role}: OverlayProps) => {
   )
 }
 
-export const PositionedOverlays = ({right, role}: OverlayProps) => {
+export const PositionedOverlays = ({right, role, open}: Args) => {
   const [isOpen, setIsOpen] = useState(false)
   const [direction, setDirection] = useState<'left' | 'right'>(right ? 'right' : 'left')
   const buttonRef = useRef<HTMLButtonElement>(null)
@@ -547,7 +558,7 @@ export const PositionedOverlays = ({right, role}: OverlayProps) => {
       >
         Open right overlay
       </Button>
-      {isOpen ? (
+      {isOpen || open ? (
         direction === 'left' ? (
           <Overlay
             initialFocusRef={confirmButtonRef}
@@ -559,6 +570,7 @@ export const PositionedOverlays = ({right, role}: OverlayProps) => {
             anchorSide="inside-right"
             role={role}
             aria-modal={role === 'dialog' ? 'true' : undefined}
+            aria-label={role === 'dialog' ? 'Left aligned overlay' : undefined}
             ref={containerRef}
           >
             <Box
@@ -603,6 +615,7 @@ export const PositionedOverlays = ({right, role}: OverlayProps) => {
             position="fixed"
             role={role}
             aria-modal={role === 'dialog' ? 'true' : undefined}
+            aria-label={role === 'dialog' ? 'Right aligned overlay' : undefined}
             ref={containerRef}
           >
             <Box
diff --git a/packages/react/src/Overlay/Overlay.stories.tsx b/packages/react/src/Overlay/Overlay.stories.tsx
index ccf96721655..fa7c5d643ef 100644
--- a/packages/react/src/Overlay/Overlay.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.stories.tsx
@@ -214,7 +214,7 @@ export default {
   },
 } as Meta<ComponentProps<typeof Overlay>>
 
-export const Default = () => {
+export const Default = (args: Args) => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const confirmButtonRef = useRef<HTMLButtonElement>(null)
@@ -235,7 +235,7 @@ export const Default = () => {
       >
         Open overlay
       </Button>
-      {isOpen ? (
+      {isOpen || args.open ? (
         <Overlay
           initialFocusRef={confirmButtonRef}
           returnFocusRef={buttonRef}
@@ -246,6 +246,7 @@ export const Default = () => {
           anchorSide="inside-right"
           role="dialog"
           aria-modal="true"
+          aria-label="Sample overlay"
           ref={containerRef}
         >
           <Box
@@ -275,6 +276,15 @@ export const Default = () => {
     </Box>
   )
 }
+Default.args = {
+  open: false,
+}
+Default.argTypes = {
+  open: {
+    control: false,
+    visible: false,
+  },
+}
 export const Playground = (args: Args) => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
@@ -296,7 +306,7 @@ export const Playground = (args: Args) => {
       >
         Open overlay
       </Button>
-      {isOpen ? (
+      {isOpen || args.open ? (
         <Overlay
           initialFocusRef={confirmButtonRef}
           returnFocusRef={buttonRef}
@@ -306,6 +316,7 @@ export const Playground = (args: Args) => {
           width={args.width}
           height={args.height}
           aria-modal={args.role === 'dialog'}
+          aria-label={args.role === 'dialog' ? 'Sample overlay' : undefined}
           ref={containerRef}
           {...args}
         >
@@ -349,6 +360,7 @@ Playground.args = {
   preventOverflow: 'false',
   role: 'dialog',
   visibility: 'visible',
+  open: false,
 }
 Playground.argTypes = {
   width: {
@@ -381,6 +393,7 @@ Playground.argTypes = {
   },
   open: {
     control: false,
+    visible: false,
   },
   portalContainerName: {
     control: false,