From d160edd883883734f30f3436f8eaad1a6d80f139 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
Date: Mon, 2 Mar 2026 17:17:47 -0300
Subject: [PATCH 1/2] fix(draw): replace aria-pressed with role=tab and
 aria-selected on signature type tabs

NcButton elements inside role="tablist" were using aria-pressed which
causes screen readers to announce them as toggle buttons instead of tabs.
Screen readers rely on role="tab" + aria-selected to announce tab position
(e.g. "Draw, tab 1 of 3") and to enable arrow-key navigation between tabs.

Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
---
 src/components/Draw/Draw.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Draw/Draw.vue b/src/components/Draw/Draw.vue
index ac2c8b173b..5a046dd00d 100644
--- a/src/components/Draw/Draw.vue
+++ b/src/components/Draw/Draw.vue
@@ -12,10 +12,11 @@
 			<NcButton
 				v-for="tab in availableTabs"
 				:key="tab.id"
+				role="tab"
 				class="draw-signature__tab"
 				:class="{ 'draw-signature__tab--active': activeTab === tab.id }"
 				variant="tertiary"
-				:aria-pressed="activeTab === tab.id"
+				:aria-selected="activeTab === tab.id"
 				@click="activeTab = tab.id">
 				<NcIconSvgWrapper :path="tab.icon" :size="18" />
 				<span class="draw-signature__tab-label">{{ tab.label }}</span>

From c708c53e7f53736e5c195095a376a594ab0b0ba4 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
Date: Mon, 2 Mar 2026 17:17:47 -0300
Subject: [PATCH 2/2] 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>
---
 .../sign-herself-with-drawn-signature.spec.ts  | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/playwright/e2e/sign-herself-with-drawn-signature.spec.ts b/playwright/e2e/sign-herself-with-drawn-signature.spec.ts
index fe6b0d412f..0c9df2d003 100644
--- a/playwright/e2e/sign-herself-with-drawn-signature.spec.ts
+++ b/playwright/e2e/sign-herself-with-drawn-signature.spec.ts
@@ -87,7 +87,23 @@ test('sign herself with drawn signature', async ({ page }) => {
 
 	await page.getByRole('button', { name: 'Define your signature.' }).click();
 
-	await page.getByRole('dialog', { name: 'Customize your signatures' }).locator('canvas').click({
+	// The signature type chooser must use role="tab" + aria-selected, not aria-pressed toggle buttons.
+	// Screen readers announce role="tab" as "tab, 1 of 3" which lets blind users understand the widget.
+	// With aria-pressed buttons they only hear "toggle button, pressed" with no tab count context.
+	const signatureDialog = page.getByRole('dialog', { name: 'Customize your signatures' })
+	await expect(signatureDialog.getByRole('tab', { name: 'Draw' })).toBeVisible()
+	await expect(signatureDialog.getByRole('tab', { name: 'Text' })).toBeVisible()
+	await expect(signatureDialog.getByRole('tab', { name: 'Upload' })).toBeVisible()
+	await expect(signatureDialog.getByRole('tab', { name: 'Draw' })).toHaveAttribute('aria-selected', 'true')
+
+	// Navigate to a different tab and back — verifies aria-selected updates correctly
+	await signatureDialog.getByRole('tab', { name: 'Text' }).click()
+	await expect(signatureDialog.getByRole('tab', { name: 'Text' })).toHaveAttribute('aria-selected', 'true')
+	await expect(signatureDialog.getByRole('tab', { name: 'Draw' })).toHaveAttribute('aria-selected', 'false')
+	await signatureDialog.getByRole('tab', { name: 'Draw' }).click()
+	await expect(signatureDialog.getByRole('tab', { name: 'Draw' })).toHaveAttribute('aria-selected', 'true')
+
+	await signatureDialog.locator('canvas').click({
 		position: {
 			x: 156,
 			y: 132