diff --git a/tests/package-manager-tabs.spec.ts b/tests/package-manager-tabs.spec.ts new file mode 100644 index 0000000000..ab25880bc6 --- /dev/null +++ b/tests/package-manager-tabs.spec.ts @@ -0,0 +1,35 @@ +import { expect, test } from '@nuxt/test-utils/playwright' + +test.describe('Package Page', () => { + test('/vue → package manager tabs use roving tabindex', async ({ page, goto }) => { + await goto('/vue', { waitUntil: 'domcontentloaded' }) + + const tablist = page.locator('[role="tablist"]').first() + await expect(tablist).toBeVisible() + + const tabs = tablist.locator('[role="tab"]') + const tabCount = await tabs.count() + expect(tabCount).toBeGreaterThan(1) + + const firstTab = tabs.first() + await firstTab.focus() + await expect(firstTab).toBeFocused() + + await page.keyboard.press('ArrowRight') + + const secondTab = tabs.nth(1) + await expect(secondTab).toBeFocused() + await expect(secondTab).toHaveAttribute('aria-selected', 'true') + await expect(secondTab).toHaveAttribute('tabindex', '0') + await expect(firstTab).toHaveAttribute('tabindex', '-1') + + const tabpanel = page.locator('[role="tabpanel"]').first() + const controls = await secondTab.getAttribute('aria-controls') + const panelId = await tabpanel.getAttribute('id') + expect(controls).toBe(panelId) + + const labelledBy = await tabpanel.getAttribute('aria-labelledby') + const tabId = await secondTab.getAttribute('id') + expect(labelledBy).toBe(tabId) + }) +})