test(playwright-ct): test keyboard navigation for tabbing into edit b…

…uttons This will test that we can use Tab to get to the edit toolbar buttons for annotations and inline objects in the PT-input.
sanity-io · Oct 24, 2023 · 517727f · 517727f
1 parent 301a283
commit 517727f
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
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
@@ -41,9 +41,17 @@ test.describe('Portable Text Input', () => {
 
       // Expect the editor to have focus after closing the popover
       await expect($pte).toBeFocused()
-
       // Assertion: the annotation toolbar popover should be visible
       await expect(page.getByTestId('annotation-toolbar-popover')).toBeVisible()
+
+      // Assertion: tab works to get to the toolbar popover buttons
+      await page.keyboard.press('Tab')
+      await expect(page.getByAltText('Edit annotation')).toBeFocused()
+      await page.keyboard.press('Tab')
+      await expect(page.getByAltText('Remove annotation')).toBeFocused()
+      await page.keyboard.press('Escape')
+      // Assertion: escape closes the toolbar popover
+      await expect(page.getByTestId('annotation-toolbar-popover')).not.toBeVisible()
     })
   })
 })
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
@@ -31,6 +31,29 @@ 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(<ObjectBlockStory />)
+      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-object-dialog')
+      // Assertion: Object edit dialog should be visible
+      await expect($locatorDialog).toBeVisible()
+      await page.keyboard.press('Enter')
+      // 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.getByAltText('Edit object')).toBeFocused()
+      await page.keyboard.press('Tab')
+      await expect(page.getByAltText('Remove object')).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(<ObjectBlockStory />)