test(e2e): aggiunge audit a11y + 2FA TOTP + lockout + sessioni; fissa label htmlFor e role=tablist

- a11y.spec.ts: nuovo audit WCAG 2.1 AA con @axe-core/playwright (filtro impact serious/critical) su homepage/support/self-care, login/register, /account autenticato

- two-factor.spec.ts: attivazione 2FA con TOTP (otpauth) e login successivo con codice

- lockout.spec.ts: dopo 5 tentativi falliti il login viene bloccato temporaneamente

- sessions.spec.ts: la sessione corrente compare in /account

- helpers.ts: aggiunge loginViaUi

- LoginPage/RegisterPage/AccountPage: label con htmlFor+id per ogni input (fix violazioni axe 'Form elements must have labels')

- SupportPage: role=tablist sostituito con role=group (i chip sono toggle, non tab)

Author: AndreaPrestia

frontend/e2e/a11y.spec.ts

@@ -0,0 +1,64 @@
+import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+import { newUser, registerViaUi } from './helpers';
+
+/**
+ * Smoke a11y audit on the most-used pages.
+ * We check for "serious" and "critical" WCAG 2.1 A/AA violations only — the
+ * project doesn't aim for full AAA conformance yet, so noisy minor findings are
+ * filtered out to keep the gate practical.
+ */
+async function runAudit(page: import('@playwright/test').Page, label: string) {
+  const results = await new AxeBuilder({ page })
+    .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+    .analyze();
+
+  const blockers = results.violations.filter(
+    (v) => v.impact === 'critical' || v.impact === 'serious'
+  );
+
+  if (blockers.length > 0) {
+    const summary = blockers
+      .map(
+        (v) =>
+          `- [${v.impact}] ${v.id}: ${v.help}\n    ${v.nodes
+            .slice(0, 3)
+            .map((n) => n.target.join(' '))
+            .join('\n    ')}`
+      )
+      .join('\n');
+    throw new Error(`a11y blockers on ${label}:\n${summary}`);
+  }
+  expect(blockers).toEqual([]);
+}
+
+test.describe('Audit accessibilità WCAG 2.1 AA', () => {
+  test('homepage e pagine pubbliche non hanno violazioni serious/critical', async ({ page }) => {
+    await page.goto('/');
+    await runAudit(page, '/');
+
+    await page.goto('/support');
+    await expect(page.getByRole('heading', { name: /trov[ai] supporto/i })).toBeVisible();
+    await runAudit(page, '/support');
+
+    await page.goto('/self-care');
+    await expect(page.getByRole('heading', { name: /cura di te/i })).toBeVisible();
+    await runAudit(page, '/self-care');
+  });
+
+  test('login e register non hanno violazioni serious/critical', async ({ page }) => {
+    await page.goto('/login');
+    await runAudit(page, '/login');
+
+    await page.goto('/register');
+    await runAudit(page, '/register');
+  });
+
+  test('/account autenticato non ha violazioni serious/critical', async ({ page }) => {
+    const user = newUser('a11y');
+    await registerViaUi(page, user);
+    await page.goto('/account');
+    await expect(page.getByRole('heading', { name: /come stai oggi/i })).toBeVisible();
+    await runAudit(page, '/account');
+  });
+});

frontend/e2e/helpers.ts

@@ -33,3 +33,11 @@ export async function registerViaUi(page: Page, user: TestUser) {
   await page.getByRole('button', { name: 'Crea il mio spazio' }).click();
   await expect(page).not.toHaveURL(/\/register/);
 }
+
+export async function loginViaUi(page: Page, email: string, password: string) {
+  await page.goto('/login');
+  const inputs = page.locator('input.input');
+  await inputs.nth(0).fill(email);
+  await inputs.nth(1).fill(password);
+  await page.getByRole('button', { name: /accedi|entra/i }).click();
+}

frontend/e2e/lockout.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test';
+import { newUser, registerViaUi, loginViaUi } from './helpers';
+
+test('dopo 5 tentativi falliti consecutivi il login viene temporaneamente bloccato', async ({ browser }) => {
+  // Register a real user in one context.
+  const owner = newUser('lockout');
+  const ownerCtx = await browser.newContext();
+  const ownerPage = await ownerCtx.newPage();
+  await registerViaUi(ownerPage, owner);
+  await ownerCtx.close();
+
+  // From a fresh anonymous context, fail the login 5 times.
+  const attackerCtx = await browser.newContext();
+  const attackerPage = await attackerCtx.newPage();
+
+  for (let i = 0; i < 4; i++) {
+    await loginViaUi(attackerPage, owner.email, 'WrongPassword!!!');
+    // Generic credenziali non valide message (not lockout yet).
+    await expect(attackerPage).toHaveURL(/\/login/);
+    // Wait for the error region to appear (any red text).
+    await expect(attackerPage.locator('div.text-red-700').first()).toBeVisible();
+  }
+
+  // 5th wrong attempt should trigger the lockout message.
+  await loginViaUi(attackerPage, owner.email, 'WrongPassword!!!');
+  await expect(attackerPage.locator('div.text-red-700').first()).toContainText(/bloccat/i);
+
+  // Even a correct password is refused while locked out.
+  await loginViaUi(attackerPage, owner.email, owner.password);
+  await expect(attackerPage).toHaveURL(/\/login/);
+  await expect(attackerPage.locator('div.text-red-700').first()).toContainText(/bloccat/i);
+
+  await attackerCtx.close();
+});

frontend/e2e/sessions.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+import { newUser, registerViaUi } from './helpers';
+
+test('la sessione corrente è visibile nello storico sessioni di /account', async ({ page }) => {
+  const user = newUser('sessions');
+  await registerViaUi(page, user);
+
+  await page.goto('/account');
+  await expect(page.getByRole('heading', { name: /sessioni attive/i })).toBeVisible();
+
+  // The session list should contain at least one row with the "questa sessione" badge.
+  await expect(page.getByText(/questa sessione/i)).toBeVisible();
+});

frontend/e2e/two-factor.spec.ts

@@ -0,0 +1,66 @@
+import { test, expect } from '@playwright/test';
+import { TOTP } from 'otpauth';
+import { newUser, registerViaUi, loginViaUi } from './helpers';
+
+/**
+ * Builds a TOTP code from a base32 secret using the same defaults as the backend
+ * (SHA1, 6 digits, 30s window).
+ */
+function totp(secret: string): string {
+  return new TOTP({
+    secret: secret.replace(/\s+/g, ''),
+    algorithm: 'SHA1',
+    digits: 6,
+    period: 30
+  }).generate();
+}
+
+test('un caregiver può attivare la 2FA e poi accedere usando il codice TOTP', async ({ browser }) => {
+  const setupCtx = await browser.newContext();
+  const setupPage = await setupCtx.newPage();
+
+  const user = newUser('twofa');
+  await registerViaUi(setupPage, user);
+
+  await setupPage.goto('/account');
+  await expect(setupPage.getByRole('heading', { name: /autenticazione a due fattori/i })).toBeVisible();
+
+  // Start setup
+  await setupPage.getByRole('button', { name: /attiva 2fa/i }).click();
+
+  // The secret is rendered inside a <code> element; read it back.
+  const secretLocator = setupPage.locator('code').first();
+  await expect(secretLocator).toBeVisible();
+  const secret = (await secretLocator.textContent())?.trim() ?? '';
+  expect(secret.length).toBeGreaterThan(8);
+
+  // Generate the current TOTP code and confirm.
+  // The setup form lacks htmlFor on its label, so target the one-time-code input directly.
+  const code = totp(secret);
+  await setupPage.locator('input[autocomplete="one-time-code"]').fill(code);
+  await setupPage.getByRole('button', { name: /conferma e attiva/i }).click();
+
+  // Recovery codes block appears + status flips to "enabled".
+  await expect(setupPage.getByText(/salva i codici di recupero/i)).toBeVisible();
+  await expect(setupPage.getByText(/autenticazione a due fattori attiva/i)).toBeVisible();
+
+  await setupCtx.close();
+
+  // Now log in from a clean context to confirm the 2FA challenge.
+  const loginCtx = await browser.newContext();
+  const loginPage = await loginCtx.newPage();
+
+  await loginViaUi(loginPage, user.email, user.password);
+
+  // Should land on the second-factor screen, not on home.
+  await expect(loginPage.getByRole('heading', { name: /verifica in due passaggi/i })).toBeVisible();
+
+  const challengeCode = totp(secret);
+  await loginPage.locator('input.input').first().fill(challengeCode);
+  await loginPage.getByRole('button', { name: /verifica|conferma|entra/i }).click();
+
+  // Successful sign-in leaves /login.
+  await expect(loginPage).not.toHaveURL(/\/login/);
+
+  await loginCtx.close();
+});

frontend/package-lock.json

@@ -23,11 +23,13 @@
     "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.11.3",
     "@playwright/test": "^1.60.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
+    "otpauth": "^9.5.1",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.16",
     "typescript": "^5.7.2",

frontend/package.json

@@ -127,8 +127,9 @@ export default function AccountPage() {
         <h2 className="text-base font-semibold text-accanto-900">{t('account.changePassword')}</h2>
         <form onSubmit={submitPassword} className="space-y-3">
           <div>
-            <label className="block text-sm text-accanto-700 mb-1">{t('account.currentPassword')}</label>
+            <label className="block text-sm text-accanto-700 mb-1" htmlFor="account-current-pwd">{t('account.currentPassword')}</label>
             <input
+              id="account-current-pwd"
               type="password"
               value={currentPwd}
               onChange={(e) => setCurrentPwd(e.target.value)}
@@ -138,8 +139,9 @@ export default function AccountPage() {
             />
           </div>
           <div>
-            <label className="block text-sm text-accanto-700 mb-1">{t('account.newPassword')}</label>
+            <label className="block text-sm text-accanto-700 mb-1" htmlFor="account-new-pwd">{t('account.newPassword')}</label>
             <input
+              id="account-new-pwd"
               type="password"
               value={newPwd}
               onChange={(e) => setNewPwd(e.target.value)}
@@ -151,8 +153,9 @@ export default function AccountPage() {
             <p className="text-xs text-accanto-500 mt-1">{t('account.passwordHint')}</p>
           </div>
           <div>
-            <label className="block text-sm text-accanto-700 mb-1">{t('account.confirmNewPassword')}</label>
+            <label className="block text-sm text-accanto-700 mb-1" htmlFor="account-new-pwd-confirm">{t('account.confirmNewPassword')}</label>
             <input
+              id="account-new-pwd-confirm"
               type="password"
               value={newPwd2}
               onChange={(e) => setNewPwd2(e.target.value)}
@@ -207,8 +210,9 @@ export default function AccountPage() {
         </p>
         <form onSubmit={submitDelete} className="space-y-3">
           <div>
-            <label className="block text-sm text-accanto-700 mb-1">{t('account.deleteConfirmLabel')}</label>
+            <label className="block text-sm text-accanto-700 mb-1" htmlFor="account-delete-pwd">{t('account.deleteConfirmLabel')}</label>
             <input
+              id="account-delete-pwd"
               type="password"
               value={deletePwd}
               onChange={(e) => setDeletePwd(e.target.value)}

frontend/src/pages/AccountPage.tsx

@@ -69,8 +69,9 @@ export default function LoginPage() {
         <form onSubmit={submitTwoFactor} className="space-y-4">
           {!useRecovery ? (
             <div>
-              <label className="label">{t('auth.twoFactorCode')}</label>
+              <label className="label" htmlFor="login-2fa-code">{t('auth.twoFactorCode')}</label>
               <input
+                id="login-2fa-code"
                 className="input"
                 inputMode="numeric"
                 autoComplete="one-time-code"
@@ -84,8 +85,9 @@ export default function LoginPage() {
             </div>
           ) : (
             <div>
-              <label className="label">{t('auth.twoFactorRecoveryCode')}</label>
+              <label className="label" htmlFor="login-2fa-recovery">{t('auth.twoFactorRecoveryCode')}</label>
               <input
+                id="login-2fa-recovery"
                 className="input"
                 autoComplete="off"
                 required
@@ -115,12 +117,12 @@ export default function LoginPage() {
       <p className="text-accanto-500 mb-6">{t('auth.loginSubtitle')}</p>
       <form onSubmit={submit} className="space-y-4">
         <div>
-          <label className="label">{t('auth.email')}</label>
-          <input className="input" type="email" autoComplete="email" required value={email} onChange={(e) => setEmail(e.target.value)} />
+          <label className="label" htmlFor="login-email">{t('auth.email')}</label>
+          <input id="login-email" className="input" type="email" autoComplete="email" required value={email} onChange={(e) => setEmail(e.target.value)} />
         </div>
         <div>
-          <label className="label">{t('auth.password')}</label>
-          <input className="input" type="password" autoComplete="current-password" required value={password} onChange={(e) => setPassword(e.target.value)} />
+          <label className="label" htmlFor="login-password">{t('auth.password')}</label>
+          <input id="login-password" className="input" type="password" autoComplete="current-password" required value={password} onChange={(e) => setPassword(e.target.value)} />
         </div>
         {error && <div className="text-sm text-red-700 bg-red-50 border border-red-200 rounded-md px-3 py-2">{error}</div>}
         <button className="btn-primary w-full" disabled={busy}>{busy ? t('auth.loggingIn') : t('auth.loginCta')}</button>