@hanzogui/kitchen-sink 3.0.5

package/tests/ThemeChange.test.tsx

@@ -0,0 +1,70 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+import { TEST_IDS } from '../src/constants/test-ids'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'ThemeChange', type: 'useCase' })
+})
+
+test('Initial theme (yellow) renders with correct colors', async ({ page }) => {
+  // The expected yellow theme color in RGB format (themeDev palette)
+  const expectedYellowColor = 'rgb(255, 221, 0)'
+
+  // Get the theme info text to verify we're on yellow theme
+  const themeInfo0 = await page.locator(`#${TEST_IDS.themeInfo}-0`).textContent()
+  const themeInfo1 = await page.locator(`#${TEST_IDS.themeInfo}-1`).textContent()
+
+  // Verify both levels show yellow theme
+  expect(themeInfo0).toContain('"theme":"yellow"')
+  expect(themeInfo1).toContain('"theme":"yellow"')
+
+  // Get the styles for all squares
+  const staticSquare0Styles = await getStyles(page.locator(`#${TEST_IDS.staticSquare}-0`))
+  const staticSquare1Styles = await getStyles(page.locator(`#${TEST_IDS.staticSquare}-1`))
+  const dynamicSquare0Styles = await getStyles(
+    page.locator(`#${TEST_IDS.dynamicSquare}-0`)
+  )
+  const dynamicSquare1Styles = await getStyles(
+    page.locator(`#${TEST_IDS.dynamicSquare}-1`)
+  )
+
+  // Verify all squares have the yellow theme color
+  expect(staticSquare0Styles.backgroundColor).toBe(expectedYellowColor)
+  expect(staticSquare1Styles.backgroundColor).toBe(expectedYellowColor)
+  expect(dynamicSquare0Styles.backgroundColor).toBe(expectedYellowColor)
+  expect(dynamicSquare1Styles.backgroundColor).toBe(expectedYellowColor)
+})
+
+test('Inner theme change does not affect outer theme', async ({ page }) => {
+  // Initial colors (themeDev palette)
+  const initialYellowColor = 'rgb(255, 221, 0)'
+
+  // Get initial styles for both levels
+  const outerSquareInitial = await getStyles(page.locator(`#${TEST_IDS.staticSquare}-0`))
+  const innerSquareInitial = await getStyles(page.locator(`#${TEST_IDS.staticSquare}-1`))
+
+  // Verify both start with yellow
+  expect(outerSquareInitial.backgroundColor).toBe(initialYellowColor)
+  expect(innerSquareInitial.backgroundColor).toBe(initialYellowColor)
+
+  // Click the inner theme change button
+  await page.locator(`#${TEST_IDS.changeThemeButton}-1`).click()
+
+  // Get updated styles
+  const outerSquareAfter = await getStyles(page.locator(`#${TEST_IDS.staticSquare}-0`))
+  const innerSquareAfter = await getStyles(page.locator(`#${TEST_IDS.staticSquare}-1`))
+
+  // Verify outer square remains yellow
+  expect(outerSquareAfter.backgroundColor).toBe(initialYellowColor)
+
+  // Verify inner square has changed (not yellow anymore)
+  expect(innerSquareAfter.backgroundColor).not.toBe(initialYellowColor)
+
+  // Verify theme info text reflects changes
+  const outerThemeInfo = await page.locator(`#${TEST_IDS.themeInfo}-0`).textContent()
+  const innerThemeInfo = await page.locator(`#${TEST_IDS.themeInfo}-1`).textContent()
+
+  expect(outerThemeInfo).toContain('"theme":"yellow"')
+  expect(innerThemeInfo).not.toContain('"theme":"yellow"')
+})

package/tests/ThemeComponentResolution.test.tsx

@@ -0,0 +1,82 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+import { TEST_IDS } from '../src/constants/test-ids'
+
+/**
+ * Tests for theme component resolution (commit 5839319146 goals)
+ *
+ * These tests verify that the theme resolution algorithm correctly handles:
+ * 1. Explicit scheme overrides (e.g., dark_green inside blue parent)
+ * 2. Inheriting scheme from parent for component themes
+ * 3. Preserving sub-themes when only componentName is provided (no backtracking)
+ */
+
+test.beforeEach(async ({ page }) => {
+  // Use v4 themes as these tests require theme names like light_green, dark_green, etc.
+  await setupPage(page, {
+    name: 'ThemeComponentResolution',
+    type: 'useCase',
+    searchParams: { v4theme: 'true' },
+  })
+})
+
+test.describe('Goal 1a: Explicit scheme override', () => {
+  test('dark_green theme is preserved when nested inside blue parent', async ({
+    page,
+  }) => {
+    // Direct dark_green theme
+    const directSquare = page.locator(`#${TEST_IDS.themeExplicitSchemeDirect}`)
+    await expect(directSquare).toBeVisible()
+
+    // Nested: blue → dark_green
+    const nestedSquare = page.locator(`#${TEST_IDS.themeExplicitSchemeNested}`)
+    await expect(nestedSquare).toBeVisible()
+
+    // Both should have the same theme name (dark_green)
+    const directText = await directSquare.innerText()
+    const nestedText = await nestedSquare.innerText()
+
+    expect(directText).toBe('dark_green')
+    expect(nestedText).toBe('dark_green')
+  })
+})
+
+test.describe('Goal 1b: Inherit scheme from parent', () => {
+  test('green theme inherits light scheme from parent', async ({ page }) => {
+    // Direct light_green theme
+    const directSquare = page.locator(`#${TEST_IDS.themeInheritSchemeDirect}`)
+    await expect(directSquare).toBeVisible()
+
+    // Nested: light → green
+    const nestedSquare = page.locator(`#${TEST_IDS.themeInheritSchemeNested}`)
+    await expect(nestedSquare).toBeVisible()
+
+    // Both should resolve to light_green
+    const directText = await directSquare.innerText()
+    const nestedText = await nestedSquare.innerText()
+
+    expect(directText).toBe('light_green')
+    expect(nestedText).toBe('light_green')
+  })
+})
+
+test.describe('Goal 2: Sub-theme preservation', () => {
+  test('surface1 sub-theme is preserved when nested (no backtracking)', async ({
+    page,
+  }) => {
+    // Direct light_blue_surface1
+    const directSquare = page.locator(`#${TEST_IDS.themeSurface1Direct}`)
+    await expect(directSquare).toBeVisible()
+
+    // Nested: blue → surface1
+    const nestedSquare = page.locator(`#${TEST_IDS.themeSurface1WithComponent}`)
+    await expect(nestedSquare).toBeVisible()
+
+    // Both should be light_blue_surface1
+    const directText = await directSquare.innerText()
+    const nestedText = await nestedSquare.innerText()
+
+    expect(directText).toBe('light_blue_surface1')
+    expect(nestedText).toBe('light_blue_surface1')
+  })
+})

package/tests/ThemeConditionalName.test.tsx

@@ -0,0 +1,34 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'ThemeConditionalName', type: 'useCase' })
+})
+
+test('Theme reverts to parent when name changes from accent to undefined', async ({
+  page,
+}) => {
+  const parent = page.locator('#theme-conditional-parent')
+  const child = page.locator('#theme-conditional-child')
+  const toggle = page.locator('#theme-conditional-toggle')
+
+  // initially active=false, child should match parent (no theme override)
+  const parentInitial = await getStyles(parent)
+  const childInitial = await getStyles(child)
+  expect(childInitial.backgroundColor).toBe(parentInitial.backgroundColor)
+
+  // toggle active=true, child gets accent theme — should differ from parent
+  await toggle.click()
+  await page.waitForTimeout(100)
+  const parentActive = await getStyles(parent)
+  const childActive = await getStyles(child)
+  expect(childActive.backgroundColor).not.toBe(parentActive.backgroundColor)
+
+  // toggle active=false again, child should revert to parent theme
+  await toggle.click()
+  await page.waitForTimeout(100)
+  const parentReverted = await getStyles(parent)
+  const childReverted = await getStyles(child)
+  expect(childReverted.backgroundColor).toBe(parentReverted.backgroundColor)
+})

package/tests/ThemeMediaAnimation.test.tsx

@@ -0,0 +1,65 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+// $theme-dark + animateOnly fix was intentionally reverted (80d70ce595)
+test.skip()
+
+test.describe('Theme Media + Animation', () => {
+  test('$theme-dark bg applies when animated with motion driver', async ({ page }) => {
+    await setupPage(page, {
+      name: 'ThemeMediaAnimationCase',
+      type: 'useCase',
+      theme: 'dark',
+      searchParams: { animationDriver: 'motion' },
+    })
+
+    const animatedBg = await page.evaluate(() => {
+      const el = document.querySelector('[data-testid="theme-media-animated"]')
+      return el ? getComputedStyle(el).backgroundColor : null
+    })
+
+    const staticBg = await page.evaluate(() => {
+      const el = document.querySelector('[data-testid="theme-media-static"]')
+      return el ? getComputedStyle(el).backgroundColor : null
+    })
+
+    // both should have the same background color in dark mode
+    // ($theme-dark overrides bg to $color3)
+    expect(animatedBg).toBeTruthy()
+    expect(staticBg).toBeTruthy()
+    expect(animatedBg).toBe(staticBg)
+  })
+
+  test('$theme-dark bg differs from light theme when animated', async ({ page }) => {
+    // light theme
+    await setupPage(page, {
+      name: 'ThemeMediaAnimationCase',
+      type: 'useCase',
+      theme: 'light',
+      searchParams: { animationDriver: 'motion' },
+    })
+
+    const lightBg = await page.evaluate(() => {
+      const el = document.querySelector('[data-testid="theme-media-animated"]')
+      return el ? getComputedStyle(el).backgroundColor : null
+    })
+
+    // dark theme
+    await setupPage(page, {
+      name: 'ThemeMediaAnimationCase',
+      type: 'useCase',
+      theme: 'dark',
+      searchParams: { animationDriver: 'motion' },
+    })
+
+    const darkBg = await page.evaluate(() => {
+      const el = document.querySelector('[data-testid="theme-media-animated"]')
+      return el ? getComputedStyle(el).backgroundColor : null
+    })
+
+    // $theme-dark changes bg from $color1 to $color3, so they should differ
+    expect(lightBg).toBeTruthy()
+    expect(darkBg).toBeTruthy()
+    expect(lightBg).not.toBe(darkBg)
+  })
+})

package/tests/ThemeNested.test.tsx

@@ -0,0 +1,141 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+import { TEST_IDS } from '../src/constants/test-ids'
+
+/**
+ * Tests for GitHub issue #3673: Nested theme regression
+ *
+ * When using nested themes like <Theme name="blue"><Theme name="surface3">,
+ * the parent color context (blue) should be preserved, resulting in
+ * light_blue_surface3 theme being applied.
+ *
+ * The bug causes the nested theme to lose the color context, resulting in
+ * just light_surface3 being applied instead.
+ */
+
+test.beforeEach(async ({ page }) => {
+  // Test the nested theme regression (issue #3673)
+  // Use v4 themes as the bug specifically occurs with @hanzogui/themes/v4
+  await setupPage(page, {
+    name: 'ThemeNested',
+    type: 'useCase',
+    searchParams: { v4theme: 'true' },
+  })
+})
+
+test('Nested blue theme with surface3 matches direct light_blue_surface3', async ({
+  page,
+}) => {
+  // Get the direct theme element
+  const directSquare = page.locator(`#${TEST_IDS.nestedThemeDirect}`)
+  await expect(directSquare).toBeVisible()
+
+  // Get the nested theme element
+  const nestedSquare = page.locator(`#${TEST_IDS.nestedThemeNested}`)
+  await expect(nestedSquare).toBeVisible()
+
+  // Get computed styles for both
+  const directStyles = await getStyles(directSquare)
+  const nestedStyles = await getStyles(nestedSquare)
+
+  // The nested theme should produce the same background color as the direct theme
+  // If the bug is present, nestedStyles will have light_surface3 colors instead of light_blue_surface3
+  expect(nestedStyles.backgroundColor).toBe(directStyles.backgroundColor)
+})
+
+test('Nested light → blue → surface3 matches direct light_blue_surface3', async ({
+  page,
+}) => {
+  // Get the direct theme element
+  const directSquare = page.locator(`#${TEST_IDS.nestedThemeDirect}`)
+  await expect(directSquare).toBeVisible()
+
+  // Get the nested theme with explicit light parent
+  const nestedWithParent = page.locator(`#${TEST_IDS.nestedThemeWithParent}`)
+  await expect(nestedWithParent).toBeVisible()
+
+  // Get computed styles for both
+  const directStyles = await getStyles(directSquare)
+  const nestedStyles = await getStyles(nestedWithParent)
+
+  // The nested theme should produce the same background color as the direct theme
+  expect(nestedStyles.backgroundColor).toBe(directStyles.backgroundColor)
+})
+
+test('Nested red theme with surface3 matches direct light_red_surface3', async ({
+  page,
+}) => {
+  // Get the direct red theme element
+  const redDirectSquare = page.locator(`#${TEST_IDS.nestedThemeRedDirect}`)
+  await expect(redDirectSquare).toBeVisible()
+
+  // Get the nested red theme element
+  const redNestedSquare = page.locator(`#${TEST_IDS.nestedThemeRedNested}`)
+  await expect(redNestedSquare).toBeVisible()
+
+  // Get computed styles for both
+  const redDirectStyles = await getStyles(redDirectSquare)
+  const redNestedStyles = await getStyles(redNestedSquare)
+
+  // The nested theme should produce the same background color as the direct theme
+  expect(redNestedStyles.backgroundColor).toBe(redDirectStyles.backgroundColor)
+})
+
+test('Blue surface3 differs from colorless surface3', async ({ page }) => {
+  // Get the blue nested theme
+  const blueNestedSquare = page.locator(`#${TEST_IDS.nestedThemeNested}`)
+  await expect(blueNestedSquare).toBeVisible()
+
+  // Get the colorless surface3 theme
+  const noColorSquare = page.locator(`#${TEST_IDS.nestedThemeNoColor}`)
+  await expect(noColorSquare).toBeVisible()
+
+  // Get computed styles for both
+  const blueStyles = await getStyles(blueNestedSquare)
+  const noColorStyles = await getStyles(noColorSquare)
+
+  // The blue surface3 should have a different background than the colorless surface3
+  // This verifies that color context actually makes a difference
+  expect(blueStyles.backgroundColor).not.toBe(noColorStyles.backgroundColor)
+})
+
+test('Blue surface3 differs from red surface3', async ({ page }) => {
+  // Get the blue nested theme
+  const blueNestedSquare = page.locator(`#${TEST_IDS.nestedThemeNested}`)
+  await expect(blueNestedSquare).toBeVisible()
+
+  // Get the red nested theme
+  const redNestedSquare = page.locator(`#${TEST_IDS.nestedThemeRedNested}`)
+  await expect(redNestedSquare).toBeVisible()
+
+  // Get computed styles for both
+  const blueStyles = await getStyles(blueNestedSquare)
+  const redStyles = await getStyles(redNestedSquare)
+
+  // Different color contexts should produce different backgrounds
+  expect(blueStyles.backgroundColor).not.toBe(redStyles.backgroundColor)
+})
+
+test('Nested blue → surface1 → surface3 preserves blue color context', async ({
+  page,
+}) => {
+  // This is the exact reproduction case from issue #3673
+  // Using surface3 theme inside a surface1 theme should preserve the blue color context
+
+  // Get the direct blue_surface3 element
+  const directSquare = page.locator(`#${TEST_IDS.nestedSurface1To3Direct}`)
+  await expect(directSquare).toBeVisible()
+
+  // Get the nested blue → surface1 → surface3 element
+  const nestedSquare = page.locator(`#${TEST_IDS.nestedSurface1To3Nested}`)
+  await expect(nestedSquare).toBeVisible()
+
+  // Get computed styles for both
+  const directStyles = await getStyles(directSquare)
+  const nestedStyles = await getStyles(nestedSquare)
+
+  // The nested theme should produce the same background color as the direct theme
+  // If the bug is present, nestedStyles will have light_surface3 colors instead of light_blue_surface3
+  expect(nestedStyles.backgroundColor).toBe(directStyles.backgroundColor)
+})

package/tests/ThemeReset.test.tsx

@@ -0,0 +1,63 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+import { TEST_IDS } from '../src/constants/test-ids'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'ThemeReset', type: 'useCase' })
+})
+
+test('Reset from nested themes goes back to grandparent', async ({ page }) => {
+  // Case 1: Reset from dark → pink → blue should go back to dark
+  const resetButton1 = page.locator(`#${TEST_IDS.resetButton1}`)
+  await expect(resetButton1).toBeVisible()
+
+  // Get the background color of the button
+  const button1Styles = await getStyles(resetButton1)
+
+  // The button should have dark theme background (not pink or blue)
+  // Dark theme typically has a dark background
+  expect(button1Styles.backgroundColor).not.toBe('rgb(255, 192, 203)') // pink
+  expect(button1Styles.backgroundColor).not.toBe('rgb(0, 0, 255)') // blue
+})
+
+test('Reset from dark → pink goes back to dark (documentation example)', async ({
+  page,
+}) => {
+  // Case 2: Reset from dark → pink should go back to dark
+  const resetSquare1 = page.locator(`#${TEST_IDS.resetSquare1}`)
+  await expect(resetSquare1).toBeVisible()
+
+  const square1Styles = await getStyles(resetSquare1)
+
+  // The square should have dark theme background
+  // This matches the documentation example
+  expect(square1Styles.backgroundColor).not.toBe('rgb(255, 192, 203)') // pink
+})
+
+test('Reset from dark only goes to light', async ({ page }) => {
+  // Case 3: Reset from dark only should go to light (opposite scheme)
+  const resetSquare2 = page.locator(`#${TEST_IDS.resetSquare2}`)
+  await expect(resetSquare2).toBeVisible()
+
+  const square2Styles = await getStyles(resetSquare2)
+
+  // The square should have light theme background (opposite of dark)
+  expect(square2Styles.backgroundColor).not.toBe('rgb(0, 0, 0)') // black/dark
+})
+
+test('Reset from dark with button shows different themes', async ({ page }) => {
+  // Case 4: Dark button vs reset button should have different themes
+  const darkButton = page.locator(`#${TEST_IDS.darkButton}`)
+  const resetButton2 = page.locator(`#${TEST_IDS.resetButton2}`)
+
+  await expect(darkButton).toBeVisible()
+  await expect(resetButton2).toBeVisible()
+
+  const darkButtonStyles = await getStyles(darkButton)
+  const resetButton2Styles = await getStyles(resetButton2)
+
+  // The buttons should have different background colors
+  // Dark button should have dark theme, reset button should have light theme
+  expect(darkButtonStyles.backgroundColor).not.toBe(resetButton2Styles.backgroundColor)
+})

package/tests/ThemeShallow.test.tsx

@@ -0,0 +1,95 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+import { TEST_IDS } from '../src/constants/test-ids'
+
+/**
+ * Tests for themeShallow prop DOM structure stability
+ *
+ * The themeShallow prop should NOT affect DOM structure (span wrapping).
+ * It only affects whether grandchildren inherit the theme change.
+ *
+ * This test verifies that themeShallow doesn't cause unexpected DOM changes.
+ */
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'ThemeShallowCase', type: 'useCase' })
+})
+
+test('themeShallow does not add extra wrapper elements compared to normal theme', async ({
+  page,
+}) => {
+  const normalContainer = page.locator(`#${TEST_IDS.themeShallowNormal}`)
+  const shallowContainer = page.locator(`#${TEST_IDS.themeShallowEnabled}`)
+
+  await expect(normalContainer).toBeVisible()
+  await expect(shallowContainer).toBeVisible()
+
+  // Get the DOM structure depth for both containers
+  // Count the number of wrapper elements between the container and its text content
+  const normalDepth = await normalContainer.evaluate((el) => {
+    let depth = 0
+    let current = el.querySelector('[class*="is_Theme"]')
+    while (current && current !== el) {
+      depth++
+      current = current.parentElement
+    }
+    return depth
+  })
+
+  const shallowDepth = await shallowContainer.evaluate((el) => {
+    let depth = 0
+    let current = el.querySelector('[class*="is_Theme"]')
+    while (current && current !== el) {
+      depth++
+      current = current.parentElement
+    }
+    return depth
+  })
+
+  // The DOM structure depth should be the same regardless of themeShallow
+  // themeShallow only affects theme context propagation, not DOM structure
+  expect(shallowDepth).toBe(normalDepth)
+})
+
+test('themeShallow container has consistent DOM structure', async ({ page }) => {
+  const container = page.locator(`#${TEST_IDS.themeShallowContainer}`)
+  const inner = page.locator(`#${TEST_IDS.themeShallowInner}`)
+
+  await expect(container).toBeVisible()
+  await expect(inner).toBeVisible()
+
+  // Snapshot the inner HTML structure to catch any regressions
+  const innerHtml = await inner.evaluate((el) => {
+    // Normalize the HTML by removing dynamic attributes like data-* IDs
+    const clone = el.cloneNode(true) as HTMLElement
+    clone.querySelectorAll('*').forEach((node) => {
+      // Remove dynamic attributes that change between runs
+      Array.from(node.attributes).forEach((attr) => {
+        if (
+          attr.name.startsWith('data-') &&
+          !attr.name.startsWith('data-test') &&
+          !attr.name.startsWith('data-disable')
+        ) {
+          node.removeAttribute(attr.name)
+        }
+      })
+    })
+    return clone.innerHTML
+  })
+
+  // The inner container should have text content wrapped appropriately
+  expect(innerHtml).toContain('Inner content')
+
+  // Verify Theme wrapper spans are present (theme always wraps in span on web)
+  const themeSpans = await container.locator('span.is_Theme').count()
+  expect(themeSpans).toBeGreaterThan(0)
+})
+
+test('themeShallow prop does not change element tag type', async ({ page }) => {
+  const shallowContainer = page.locator(`#${TEST_IDS.themeShallowEnabled}`)
+  await expect(shallowContainer).toBeVisible()
+
+  // The container itself should be a div (Stack renders as div)
+  const tagName = await shallowContainer.evaluate((el) => el.tagName.toLowerCase())
+  expect(tagName).toBe('div')
+})

package/tests/Toast.test.tsx

@@ -0,0 +1,106 @@
+import type { Page } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'ToastCase', type: 'useCase' })
+})
+
+async function buttonIsFocused(page: Page, identifier: number) {
+  await expect(page.getByTestId(`toast-button-${identifier}`)).toBeFocused()
+}
+
+async function toastIsFocused(page: Page, identifier: number) {
+  await expect(page.getByTestId(`toast-${identifier}`)).toBeFocused()
+}
+
+test.describe('given zero toasts', () => {
+  test('should not interrupt natural tab order in the document', async ({ page }) => {
+    await page.getByTestId('button-before').focus()
+
+    await page.keyboard.press('Tab')
+
+    await expect(page.getByTestId('button-after')).toBeFocused()
+
+    await page.keyboard.press('Shift+Tab')
+
+    await expect(page.getByTestId('button-before')).toBeFocused()
+  })
+})
+
+test.describe('given multiple toasts', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.getByTestId('button-add-toast').click()
+    await page.getByTestId('button-add-toast').click()
+    await new Promise((res) => setTimeout(res, 1000))
+  })
+
+  test('should reverse tab order from most recent to least', async ({ page }) => {
+    await page.getByTestId('button-before').focus()
+
+    await page.keyboard.press('Tab')
+    await toastIsFocused(page, 2)
+
+    // Forward tab
+    await page.keyboard.press('Tab')
+    await buttonIsFocused(page, 2.1)
+
+    await page.keyboard.press('Tab')
+    await buttonIsFocused(page, 2.2)
+
+    await page.keyboard.press('Tab')
+    await toastIsFocused(page, 1)
+
+    await page.keyboard.press('Tab')
+    await buttonIsFocused(page, 1.1)
+
+    await page.keyboard.press('Tab')
+    await buttonIsFocused(page, 1.2)
+
+    // End of viewport
+    await page.keyboard.press('Tab')
+    await expect(page.getByTestId('button-after')).toBeFocused()
+
+    // Backwards tab
+    await page.keyboard.press('Shift+Tab')
+    await buttonIsFocused(page, 1.2)
+
+    await page.keyboard.press('Shift+Tab')
+    await buttonIsFocused(page, 1.1)
+
+    await page.keyboard.press('Shift+Tab')
+    await toastIsFocused(page, 1)
+
+    await page.keyboard.press('Shift+Tab')
+    await buttonIsFocused(page, 2.2)
+
+    await page.keyboard.press('Shift+Tab')
+    await buttonIsFocused(page, 2.1)
+
+    await page.keyboard.press('Shift+Tab')
+    await toastIsFocused(page, 2)
+
+    // Start of viewport
+    await page.keyboard.press('Shift+Tab')
+    await expect(page.getByTestId('button-before')).toBeFocused()
+  })
+
+  test('should tab forwards from viewport to latest toast or backwards into the document', async ({
+    page,
+  }) => {
+    // Focus viewport directly instead of using F8
+    const viewport = page.locator('[role="region"][aria-label="Notifications (F8)"]')
+    await viewport.focus()
+    await expect(viewport).toBeFocused()
+
+    // Tab forward from viewport
+    await page.keyboard.press('Tab')
+    await toastIsFocused(page, 2)
+
+    // Tab backward from viewport - focus viewport again
+    await viewport.focus()
+    await page.keyboard.press('Shift+Tab')
+    await expect(page.getByTestId('button-before')).toBeFocused()
+  })
+})