diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Annotations.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Annotations.spec.tsx index db8b32138c9..88eb32c1290 100644 --- a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Annotations.spec.tsx +++ b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Annotations.spec.tsx @@ -48,8 +48,25 @@ test.describe('Portable Text Input', () => { // Expect the editor to have focus after closing the popover await expect($pte).toBeFocused() + const $toolbarPopover = page.getByTestId('annotation-toolbar-popover') + // Assertion: the annotation toolbar popover should be visible await expect(page.getByTestId('annotation-toolbar-popover')).toBeVisible() + await expect($toolbarPopover).toBeVisible() + + // Assertion: tab works to get to the toolbar popover buttons + await page.keyboard.press('Tab') + await expect(page.getByTestId('edit-annotation-button')).toBeFocused() + await page.keyboard.press('Tab') + await expect(page.getByTestId('remove-annotation-button')).toBeFocused() + await page.keyboard.press('Escape') + await expect($pte).toBeFocused() + await expect($toolbarPopover).toBeVisible() + await page.waitForTimeout(100) + await page.keyboard.press('Escape') + await page.waitForTimeout(100) + // Assertion: escape closes the toolbar popover + await expect($toolbarPopover).not.toBeVisible() }) test('Can create, and then open the existing annotation again for editing', async ({ diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/FocusTracking.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/FocusTracking.spec.tsx index 600c8313ee3..1831c08102a 100644 --- a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/FocusTracking.spec.tsx +++ b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/FocusTracking.spec.tsx @@ -117,6 +117,7 @@ test.describe('Portable Text Input', () => { const $portableTextInput = component.getByTestId('field-body') const $pteTextbox = $portableTextInput.getByRole('textbox') await expect($pteTextbox).not.toBeFocused() + await page.keyboard.press('Tab+Tab') const blockObjectInput = page.getByTestId('objectBlockInputField').getByRole('textbox') await expect(blockObjectInput).toBeFocused() }) diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ObjectBlock.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ObjectBlock.spec.tsx index c1c42a264d4..37687944204 100644 --- a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ObjectBlock.spec.tsx +++ b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ObjectBlock.spec.tsx @@ -30,6 +30,32 @@ test.describe('Portable Text Input', () => { await expect($pte.getByText('Custom preview block:')).toBeVisible() }) + test('Inline object toolbars works as expected', async ({mount, page}) => { + const {getFocusedPortableTextEditor} = testHelpers({page}) + await mount() + const $pte = await getFocusedPortableTextEditor('field-body') + await page.getByRole('button', {name: 'Insert Inline Object (inline)'}).click() + // Assertion: the annotation toolbar popover should not be visible + await expect(page.getByTestId('inline-object-toolbar-popover')).not.toBeVisible() + const $locatorDialog = page.getByTestId('popover-edit-dialog') + // Assertion: Object edit dialog should be visible + await expect($locatorDialog).toBeVisible() + await page.keyboard.press('Escape') + // Assertion: the annotation toolbar popover should be visible + await expect(page.getByTestId('inline-object-toolbar-popover')).toBeVisible() + // Assertion: tab works to get to the toolbar popover buttons + await page.keyboard.press('Tab') + await expect(page.getByTestId('edit-inline-object-button')).toBeFocused() + await page.keyboard.press('Tab') + await expect(page.getByTestId('remove-inline-object-button')).toBeFocused() + await page.keyboard.press('Escape') + await expect(page.getByTestId('edit-inline-object-button')).toBeVisible() + await expect($pte).toBeFocused() + await page.keyboard.press('Escape') + // Assertion: escape closes the toolbar popover + await expect(page.getByTestId('inline-object-toolbar-popover')).not.toBeVisible() + }) + test('Double-clicking opens a block', async ({mount, page}) => { const {getFocusedPortableTextEditor} = testHelpers({page}) await mount()