Skip to content

Commit c708c53

Browse files
test(e2e): assert signature type tabs use role=tab and aria-selected
Before signing, verify the three tabs (Draw, Text, Upload) are reachable by role="tab", that the active tab has aria-selected="true" and the inactive ones have aria-selected="false", and that switching tabs updates the selected state correctly. Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
1 parent d160edd commit c708c53

1 file changed

Lines changed: 17 additions & 1 deletion

File tree

playwright/e2e/sign-herself-with-drawn-signature.spec.ts

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,23 @@ test('sign herself with drawn signature', async ({ page }) => {
8787

8888
await page.getByRole('button', { name: 'Define your signature.' }).click();
8989

90-
await page.getByRole('dialog', { name: 'Customize your signatures' }).locator('canvas').click({
90+
// The signature type chooser must use role="tab" + aria-selected, not aria-pressed toggle buttons.
91+
// Screen readers announce role="tab" as "tab, 1 of 3" which lets blind users understand the widget.
92+
// With aria-pressed buttons they only hear "toggle button, pressed" with no tab count context.
93+
const signatureDialog = page.getByRole('dialog', { name: 'Customize your signatures' })
94+
await expect(signatureDialog.getByRole('tab', { name: 'Draw' })).toBeVisible()
95+
await expect(signatureDialog.getByRole('tab', { name: 'Text' })).toBeVisible()
96+
await expect(signatureDialog.getByRole('tab', { name: 'Upload' })).toBeVisible()
97+
await expect(signatureDialog.getByRole('tab', { name: 'Draw' })).toHaveAttribute('aria-selected', 'true')
98+
99+
// Navigate to a different tab and back — verifies aria-selected updates correctly
100+
await signatureDialog.getByRole('tab', { name: 'Text' }).click()
101+
await expect(signatureDialog.getByRole('tab', { name: 'Text' })).toHaveAttribute('aria-selected', 'true')
102+
await expect(signatureDialog.getByRole('tab', { name: 'Draw' })).toHaveAttribute('aria-selected', 'false')
103+
await signatureDialog.getByRole('tab', { name: 'Draw' }).click()
104+
await expect(signatureDialog.getByRole('tab', { name: 'Draw' })).toHaveAttribute('aria-selected', 'true')
105+
106+
await signatureDialog.locator('canvas').click({
91107
position: {
92108
x: 156,
93109
y: 132

0 commit comments

Comments
 (0)