Merge pull request #7059 from LibreSign/backport/7058/stable33

[stable33] fix: draw signature tab accessibility

Author: vitormattos

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

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>