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..d87435421e3 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..d1780449876 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..518adf8037a 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..d87435421e3 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..d87435421e3 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..805e1355dae 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..1d8f493ff8c 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..805e1355dae 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..805e1355dae 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..da779b0b23a 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..14707eccf43 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..260606c6cad 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..da779b0b23a 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..da779b0b23a 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..3cf6d24ed33 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..05ddb716dac 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..3cf6d24ed33 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..3cf6d24ed33 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..da779b0b23a 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..14707eccf43 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..260606c6cad 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..da779b0b23a 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..da779b0b23a 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..3cf6d24ed33 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..05ddb716dac 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..3cf6d24ed33 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..3cf6d24ed33 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..3bae65b3d32 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..b243f255680 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..fc5dfda689e 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..3bae65b3d32 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..3bae65b3d32 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..23625a4b085 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..c464a452f61 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..23625a4b085 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..23625a4b085 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..a501337f1ba 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..899326d95eb 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..9dad0ee2253 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..a501337f1ba 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..a501337f1ba 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..d816d620e96 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..5fde52f35d7 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..d816d620e96 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..d816d620e96 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..2fb31f5d113 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..f371ce81447 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..1f93b6149ce 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..2fb31f5d113 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..2fb31f5d113 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..8a76d3093ef 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..78ff63deae6 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..8a76d3093ef 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..8a76d3093ef 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..32b54dc19c0 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..74ee948017a 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..02189264336 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..32b54dc19c0 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..32b54dc19c0 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..90aa4a6fe58 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..31d3e4fec9b 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..90aa4a6fe58 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..90aa4a6fe58 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..d87435421e3 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..d1780449876 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..518adf8037a 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..d87435421e3 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..d87435421e3 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..805e1355dae 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..1d8f493ff8c 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..805e1355dae 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..805e1355dae 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..21ef036ce20 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..b3d1c8325ce 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..85fffd32c8d 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..21ef036ce20 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..21ef036ce20 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..1045becab43 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..f64910ed617 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..1045becab43 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..1045becab43 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..d87435421e3 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..d1780449876 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..518adf8037a 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..d87435421e3 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..d87435421e3 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..805e1355dae 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..1d8f493ff8c 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..805e1355dae 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..805e1355dae 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..7e273d90221 --- /dev/null +++ b/e2e/components/Overlay.test.ts @@ -0,0 +1,134 @@ +import {test, expect, type Page} from '@playwright/test' +import {visit} from '../test-helpers/storybook' +import {themes} from '../test-helpers/themes' + +const stories = [ + { + title: 'Default', + id: 'private-components-overlay--default', + setup: async (page: Page) => { + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + }, + }, + { + title: 'Playground', + id: 'private-components-overlay--playground', + setup: async (page: Page) => { + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + }, + }, + { + title: 'Dialog Overlay', + id: 'private-components-overlay-features--dialog-overlay', + setup: async (page: Page) => { + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + }, + }, + { + title: 'Dropdown Overlay', + id: 'private-components-overlay-features--dropdown-overlay', + setup: async (page: Page) => { + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + }, + }, + { + title: 'Memex Issue Overlay', + id: 'private-components-overlay-features--memex-issue-overlay', + setup: async (page: Page) => { + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + }, + }, + { + title: 'Memex Nested Overlays', + id: 'private-components-overlay-features--memex-nested-overlays', + setup: async (page: Page) => { + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + }, + }, + { + title: 'Nested Overlays', + id: 'private-components-overlay-features--nested-overlays', + setup: async (page: Page) => { + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + }, + }, + { + title: 'Overlay On Top Of Overlay', + id: 'private-components-overlay-features--overlay-on-top-of-overlay', + setup: async (page: Page) => { + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + await page.keyboard.press('Enter') + await page.keyboard.press('Enter') + }, + }, + { + title: 'Positioned Overlays', + id: 'private-components-overlay-features--positioned-overlays', + setup: async (page: Page) => { + await page.keyboard.press('Tab') + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + }, + }, + { + title: 'SX Props', + id: 'private-components-overlay-dev--sx-props', + setup: async (page: Page) => { + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + }, + }, +] 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, + }, + }) + + // await story.setup(page) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Overlay.${story.title}.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + }, + }) + // await story.setup(page) + + 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..dfb7a6c9890 --- /dev/null +++ b/packages/react/src/Overlay/Overlay.dev.stories.tsx @@ -0,0 +1,82 @@ +import React, {useRef, useState} from 'react' +import type {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, +} as Meta + +export const SxProps = () => { + const [isOpen, setIsOpen] = useState(false) + const buttonRef = useRef(null) + const confirmButtonRef = useRef(null) + const anchorRef = useRef(null) + const closeOverlay = () => setIsOpen(false) + const containerRef = useRef(null) + useFocusTrap({ + containerRef, + disabled: !isOpen, + }) + return ( + + + {isOpen ? ( + + + + Look! an overlay + + + ) : null} + + ) +} diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx index 6b31bdbb7ca..5041be9c9e2 100644 --- a/packages/react/src/Overlay/Overlay.features.stories.tsx +++ b/packages/react/src/Overlay/Overlay.features.stories.tsx @@ -117,6 +117,7 @@ export const DialogOverlay = ({anchorSide, role}: OverlayProps) => { anchorSide={anchorSide} role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'list' ? 'Confirmation screen' : undefined} ref={containerRef} > @@ -171,6 +172,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => { anchorSide={anchorSide} role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'list' ? 'Open overlay' : undefined} ref={primaryContainer} preventOverflow={false} > @@ -188,6 +190,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => { anchorSide={anchorSide} role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'list' ? 'Options' : undefined} ref={secondaryContainer} preventOverflow={false} > @@ -249,6 +252,7 @@ export const MemexNestedOverlays = ({role}: OverlayProps) => { left={16} role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'list' ? 'Add iteration' : undefined} ref={containerRef} preventOverflow={false} > @@ -334,6 +338,7 @@ export const NestedOverlays = ({role}: OverlayProps) => { ref={primaryContainer} role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'list' ? 'Sample list' : undefined} > @@ -375,6 +380,7 @@ export const NestedOverlays = ({role}: OverlayProps) => { left={64} role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'list' ? 'Create a list' : undefined} ref={secondaryContainer} > @@ -446,6 +452,7 @@ export const MemexIssueOverlay = ({role}: OverlayProps) => { left="calc(100vw - 350px)" role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'list' ? 'Draft issue editor' : undefined} ref={containerRef} > @@ -559,6 +566,7 @@ export const PositionedOverlays = ({right, role}: OverlayProps) => { anchorSide="inside-right" role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'list' ? 'Left aligned overlay' : undefined} ref={containerRef} > { position="fixed" role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'list' ? 'Right aligned overlay' : undefined} ref={containerRef} > { anchorSide="inside-right" role="dialog" aria-modal="true" + aria-label="Sample overlay" ref={containerRef} > { width={args.width} height={args.height} aria-modal={args.role === 'dialog'} + aria-label={args.role === 'list' ? 'Sample overlay' : undefined} ref={containerRef} {...args} >