@consilioweb/payload-support 5.0.0 → 6.0.1

package/src/utils/retention.ts

@@ -0,0 +1,111 @@
+import type { Payload, PayloadRequest } from 'payload'
+import type { CollectionSlugs } from './slugs'
+import { dbDelete } from './db'
+
+/**
+ * How long the two journals are kept, in days.
+ *
+ * Defaults follow the CNIL guidance the README documents: six months would be
+ * the floor for connection logs, a year is the ceiling usually accepted, and
+ * these two values sit inside that range while staying long enough to
+ * investigate an intrusion. Set a value to 0 to disable the automatic purge of
+ * that journal — never to mean "delete everything", which is what `days=0`
+ * means on the manual endpoint.
+ */
+export interface RetentionConfig {
+  /** Retention of `auth-logs` in days. `0` disables the scheduled purge. */
+  authLogsDays?: number
+  /** Retention of `email-logs` in days. `0` disables the scheduled purge. */
+  emailLogsDays?: number
+  /**
+   * Cron for the scheduled purge. Payload's cron takes an optional leading
+   * seconds field. Default: every day at 03:30.
+   */
+  cron?: string
+  /** Queue the scheduled job is pushed to. Default: `default`. */
+  queue?: string
+}
+
+export const DEFAULT_RETENTION = {
+  authLogsDays: 180,
+  emailLogsDays: 365,
+  cron: '0 30 3 * * *',
+  queue: 'default',
+} as const
+
+export const PURGE_LOGS_TASK_SLUG = 'support-purge-logs'
+
+/** Journals the purge is allowed to touch, keyed by their public name. */
+export function purgeableCollections(slugs: CollectionSlugs): Record<string, string> {
+  return {
+    'email-logs': slugs.emailLogs,
+    'auth-logs': slugs.authLogs,
+  }
+}
+
+/**
+ * Delete rows of `slug` created more than `days` days ago.
+ *
+ * `days <= 0` means "everything" and is only reachable from the manual
+ * admin-only endpoint. The scheduled task refuses it: a misconfigured cron
+ * that wipes the whole security journal every night is a far worse outcome
+ * than a journal that grows.
+ */
+export async function purgeOlderThan(
+  payload: Payload,
+  slug: string,
+  days: number,
+  req?: PayloadRequest,
+): Promise<number> {
+  const cutoff = days > 0 ? new Date(Date.now() - days * 86400000).toISOString() : null
+
+  const result = await dbDelete(payload, slug, {
+    where: cutoff
+      ? { createdAt: { less_than: cutoff } }
+      : { id: { exists: true } },
+    overrideAccess: true,
+    ...(req ? { req } : {}),
+  })
+
+  return Array.isArray(result?.docs) ? result.docs.length : 0
+}
+
+export interface ScheduledPurgeResult {
+  purged: Record<string, number>
+  skipped: string[]
+}
+
+/**
+ * The scheduled half of the purge. Never accepts `days <= 0`, and silently
+ * skips a journal whose collection is not registered (its feature flag is off).
+ */
+export async function runScheduledPurge(
+  payload: Payload,
+  slugs: CollectionSlugs,
+  retention: RetentionConfig | false | undefined,
+  req?: PayloadRequest,
+): Promise<ScheduledPurgeResult> {
+  if (retention === false) return { purged: {}, skipped: ['auth-logs', 'email-logs'] }
+
+  const plan: Array<[string, string, number]> = [
+    ['auth-logs', slugs.authLogs, retention?.authLogsDays ?? DEFAULT_RETENTION.authLogsDays],
+    ['email-logs', slugs.emailLogs, retention?.emailLogsDays ?? DEFAULT_RETENTION.emailLogsDays],
+  ]
+
+  const purged: Record<string, number> = {}
+  const skipped: string[] = []
+
+  for (const [name, slug, days] of plan) {
+    if (!Number.isFinite(days) || days <= 0) {
+      skipped.push(name)
+      continue
+    }
+    if (!(payload.collections as Record<string, unknown> | undefined)?.[slug]) {
+      skipped.push(name)
+      continue
+    }
+    purged[name] = await purgeOlderThan(payload, slug, days, req)
+  }
+
+  return { purged, skipped }
+}

package/src/utils/slugs.ts

@@ -58,6 +58,21 @@ export const DEFAULT_SLUGS: CollectionSlugs = {
   media: 'media',
 }
 
+/**
+ * Collections the plugin registers under a FIXED slug.
+ *
+ * Unlike everything in `CollectionSlugs`, these three hardcode their `slug`
+ * (ClientSummaries.ts, TicketCollaborators.ts, TicketFeedback.ts), so any code
+ * that reads or deletes their rows must use these literals rather than a
+ * configurable slug — otherwise an app that overrides `collectionSlugs` would
+ * address a collection that does not exist.
+ */
+export const FIXED_SLUGS = {
+  clientSummaries: 'client-summaries',
+  ticketCollaborators: 'ticket-collaborators',
+  ticketFeedback: 'ticket-feedback',
+} as const
+
 /**
  * Resolve collection slugs merging user overrides with defaults.
  */

package/src/views/BillingView/client.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useId } from 'react'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
 import { DATE_LOCALE } from '../shared/dateLocale'
 import styles from '../../styles/BillingView.module.scss'
@@ -86,6 +86,12 @@ function getQuarterRange(offset: number): { from: string; to: string } {
 
 export const BillingClient: React.FC = () => {
   const { t } = useTranslation()
+  // The `<label>`s in the filter row already carry the translated text; they
+  // just were not associated with their control.
+  const fromId = useId()
+  const toId = useId()
+  const projectFilterId = useId()
+  const rateId = useId()
   const [from, setFrom] = useState(() => getMonthRange(0).from)
   const [to, setTo] = useState(() => getMonthRange(0).to)
   const [projectId, setProjectId] = useState('')
@@ -287,16 +293,16 @@ export const BillingClient: React.FC = () => {
 
         <div className={styles.filterRow}>
           <div className={styles.fieldGroup}>
-            <label className={styles.label}>{t('billing.filters.from')}</label>
-            <input type="date" value={from} onChange={(e) => setFrom(e.target.value)} className={styles.input} />
+            <label className={styles.label} htmlFor={fromId}>{t('billing.filters.from')}</label>
+            <input id={fromId} type="date" value={from} onChange={(e) => setFrom(e.target.value)} className={styles.input} />
           </div>
           <div className={styles.fieldGroup}>
-            <label className={styles.label}>{t('billing.filters.to')}</label>
-            <input type="date" value={to} onChange={(e) => setTo(e.target.value)} className={styles.input} />
+            <label className={styles.label} htmlFor={toId}>{t('billing.filters.to')}</label>
+            <input id={toId} type="date" value={to} onChange={(e) => setTo(e.target.value)} className={styles.input} />
           </div>
           <div className={styles.fieldGroup}>
-            <label className={styles.label}>{t('billing.filters.project')}</label>
-            <select value={projectId} onChange={(e) => setProjectId(e.target.value)} className={styles.select}>
+            <label className={styles.label} htmlFor={projectFilterId}>{t('billing.filters.project')}</label>
+            <select id={projectFilterId} value={projectId} onChange={(e) => setProjectId(e.target.value)} className={styles.select}>
               <option value="">{t('ticket.allProjects')}</option>
               {projects.map((p) => (
                 <option key={p.id} value={p.id}>{p.name}</option>
@@ -304,9 +310,10 @@ export const BillingClient: React.FC = () => {
             </select>
           </div>
           <div className={styles.fieldGroup}>
-            <label className={styles.label}>{t('billing.filters.hourlyRate')}</label>
+            <label className={styles.label} htmlFor={rateId}>{t('billing.filters.hourlyRate')}</label>
             <div className={styles.rateRow}>
               <input
+                id={rateId}
                 type="number"
                 value={rate}
                 onChange={(e) => setRate(Number(e.target.value))}
@@ -370,6 +377,7 @@ export const BillingClient: React.FC = () => {
                         <th className={styles.thCheckbox}>
                           <input
                             type="checkbox"
+                            aria-label={t('billing.tableCheckboxTitle')}
                             checked={group.tickets.every((t) => billedTickets.has(t.id))}
                             onChange={() => {
                               const ids = group.tickets.map((t) => t.id)
@@ -405,6 +413,7 @@ export const BillingClient: React.FC = () => {
                             <td className={styles.td} rowSpan={rowSpan} style={{ verticalAlign: 'middle' }}>
                               <input
                                 type="checkbox"
+                                aria-label={isBilled ? t('billing.markUnbilledTitle') : t('billing.markBilledTitle')}
                                 checked={isBilled}
                                 onChange={() => toggleBilled(ticket.id)}
                                 className={styles.checkbox}

package/src/views/ChatView/client.tsx

@@ -343,6 +343,7 @@ export const ChatViewClient: React.FC = () => {
               <form onSubmit={sendMessage} className={styles.composer}>
                 {cannedResponses.length > 0 && (
                   <select
+                    aria-label={t('chat.quickReply')}
                     onChange={(e) => {
                       const cr = cannedResponses.find((c) => String(c.id) === e.target.value)
                       if (cr) setInput(cr.body)
@@ -359,6 +360,7 @@ export const ChatViewClient: React.FC = () => {
                 <div className={styles.composerRow}>
                   <input
                     type="text"
+                    aria-label={t('chat.inputPlaceholder')}
                     value={input}
                     onChange={(e) => setInput(e.target.value)}
                     placeholder={t('chat.inputPlaceholder')}

package/src/views/CrmView/client.tsx

@@ -275,6 +275,7 @@ export const CrmClient: React.FC = () => {
           <div className={styles.sidebarSearch}>
             <input
               type="text"
+              aria-label={t('crm.searchLabel')}
               placeholder={t('crm.searchPlaceholder')}
               value={search}
               onChange={(e) => setSearch(e.target.value)}
@@ -379,6 +380,7 @@ export const CrmClient: React.FC = () => {
                   </p>
                   <input
                     type="text"
+                    aria-label={t('crm.mergeTitle')}
                     value={mergeSearch}
                     onChange={(e) => setMergeSearch(e.target.value)}
                     placeholder={t('crm.mergeSearchPlaceholder')}

package/src/views/EmailTrackingView/client.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect, useCallback } from 'react'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
+import { V } from '../shared/adminTokens'
 import { DATE_LOCALE } from '../shared/dateLocale'
 import s from '../../styles/EmailTracking.module.scss'
 
@@ -111,7 +112,7 @@ export const EmailTrackingClient: React.FC = () => {
             <button key={v} className={`${s.dateRangeBtn} ${dateRange === v ? s.dateRangeActive : ''}`} onClick={() => setDateRange(v)}>{v}j</button>
           ))}
         </div>
-        <input type="text" className={s.searchInput} placeholder={t('emailTracking.searchPlaceholder')} value={search} onChange={(e) => setSearch(e.target.value)} />
+        <input type="text" className={s.searchInput} aria-label={t('emailTracking.searchLabel')} placeholder={t('emailTracking.searchPlaceholder')} value={search} onChange={(e) => setSearch(e.target.value)} />
       </div>
 
       {/* Table */}
@@ -125,7 +126,7 @@ export const EmailTrackingClient: React.FC = () => {
           <tbody>
             {logs.map((log) => (
               <React.Fragment key={log.id}>
-                <tr onClick={() => log.status === 'error' && log.errorMessage ? setExpandedRow(expandedRow === log.id ? null : log.id) : null} style={{ cursor: log.status === 'error' && log.errorMessage ? 'pointer' : 'default' }}>
+                <tr>
                   <td style={{ fontSize: 12, whiteSpace: 'nowrap' }}>{fmtDate(log.createdAt)}</td>
                   <td style={{ maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={log.recipientEmail}>{log.recipientEmail || '—'}</td>
                   <td style={{ maxWidth: 250, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={log.subject}>{log.subject || '—'}</td>
@@ -137,14 +138,24 @@ export const EmailTrackingClient: React.FC = () => {
                       <span className={`${s.processingTime} ${log.processingTimeMs > 2000 ? s.timeSlow : log.processingTimeMs > 500 ? s.timeMedium : s.timeFast}`}>{log.processingTimeMs}ms</span>
                     ) : '—'}
                     {log.status === 'error' && log.errorMessage && (
-                      <button className={s.expandBtn} onClick={(e) => { e.stopPropagation(); setExpandedRow(expandedRow === log.id ? null : log.id) }}>
+                      /* The row itself carries no handler: a `<tr onClick>` is
+                       * unreachable by keyboard and role="button" on a row would
+                       * destroy the table semantics. This button is the control. */
+                      <button
+                        type="button"
+                        className={s.expandBtn}
+                        aria-expanded={expandedRow === log.id}
+                        aria-controls={`email-error-${log.id}`}
+                        aria-label={t('emailTracking.toggleError')}
+                        onClick={() => setExpandedRow(expandedRow === log.id ? null : log.id)}
+                      >
                         {expandedRow === log.id ? '▴' : '▾'}
                       </button>
                     )}
                   </td>
                 </tr>
                 {expandedRow === log.id && log.errorMessage && (
-                  <tr><td colSpan={7}><div className={s.errorDetail}>Erreur{log.httpStatus ? ` (HTTP ${log.httpStatus})` : ''}: {log.errorMessage}</div></td></tr>
+                  <tr><td colSpan={7}><div className={s.errorDetail} id={`email-error-${log.id}`}>{t('emailTracking.errorLabel')}{log.httpStatus ? ` (HTTP ${log.httpStatus})` : ''}: {log.errorMessage}</div></td></tr>
                 )}
               </React.Fragment>
             ))}
@@ -155,9 +166,9 @@ export const EmailTrackingClient: React.FC = () => {
       {/* Pagination */}
       {totalDocs > 0 && (
         <div className={s.pagination}>
-          <button className={s.pageBtn} onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>{t('common.previous')}</button>
-          <span style={{ fontSize: 12, color: 'var(--theme-elevation-500)', alignSelf: 'center' }}>{t('common.page')} {page} — {totalDocs} {t('common.results')}</span>
-          <button className={s.pageBtn} onClick={() => setPage((p) => p + 1)} disabled={!hasMore}>{t('common.next')}</button>
+          <button type="button" className={s.pageBtn} onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>{t('common.previous')}</button>
+          <span style={{ fontSize: 12, color: V.textSecondary, alignSelf: 'center' }}>{t('common.page')} {page} — {totalDocs} {t('common.results')}</span>
+          <button type="button" className={s.pageBtn} onClick={() => setPage((p) => p + 1)} disabled={!hasMore}>{t('common.next')}</button>
         </div>
       )}
     </div>

package/src/views/ImportConversationView/client.tsx

@@ -192,6 +192,7 @@ export function ImportConversationClient() {
             ref={fileRef}
             type="file"
             accept=".md,.txt"
+            aria-label={t('import.acceptedFormats')}
             onChange={onFileChange}
             style={{ display: 'none' }}
           />

package/src/views/LogsView/client.tsx

@@ -131,7 +131,7 @@ export const LogsClient: React.FC = () => {
                 </td>
                 <td className={s.truncate} title={log.recipientEmail}>{log.recipientEmail || '—'}</td>
                 <td className={s.truncate} title={log.subject}>{log.subject || '—'}</td>
-                <td style={{ fontSize: 12, color: 'var(--theme-elevation-500)' }}>{log.action || '—'}</td>
+                <td style={{ fontSize: 12, color: 'var(--theme-elevation-650)' }}>{log.action || '—'}</td>
                 <td style={{ textAlign: 'right' }}>
                   {log.processingTimeMs != null ? (
                     <span className={s.mono} style={{ color: log.processingTimeMs > 2000 ? '#dc2626' : log.processingTimeMs > 500 ? '#d97706' : '#16a34a' }}>

package/src/views/NewTicketView/client.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useId } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
@@ -27,6 +27,14 @@ const PRIORITY_KEYS = [
 
 export const NewTicketClient: React.FC = () => {
   const { t } = useTranslation()
+  // Each `<label>` below already carries the right, already-translated text;
+  // it just was not associated with anything. useId, never a literal.
+  const clientSearchId = useId()
+  const subjectId = useId()
+  const categoryId = useId()
+  const priorityId = useId()
+  const projectId_ = useId()
+  const descriptionId = useId()
   const router = useRouter()
   const [subject, setSubject] = useState('')
   const [description, setDescription] = useState('')
@@ -130,18 +138,19 @@ export const NewTicketClient: React.FC = () => {
       <form className={s.form} onSubmit={handleSubmit}>
         {/* Client search */}
         <div className={s.fieldGroup}>
-          <label className={s.label}>{t('newTicket.clientLabel')} <span className={s.required}>*</span></label>
+          <label className={s.label} htmlFor={clientSearchId}>{t('newTicket.clientLabel')} <span className={s.required}>*</span></label>
           {selectedClient ? (
             <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px', borderRadius: 10, border: '1px solid var(--theme-elevation-200)', background: 'var(--theme-elevation-50)' }}>
               <span style={{ fontWeight: 600, fontSize: 13, color: 'var(--theme-text)' }}>
                 {selectedClient.firstName} {selectedClient.lastName} — {selectedClient.company}
               </span>
-              <span style={{ fontSize: 12, color: 'var(--theme-elevation-500)' }}>{selectedClient.email}</span>
+              <span style={{ fontSize: 12, color: 'var(--theme-elevation-650)' }}>{selectedClient.email}</span>
               <button type="button" onClick={() => { setSelectedClient(null); setClientId(null); setClientSearch('') }} style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--theme-elevation-400)', fontSize: 16 }}>&times;</button>
             </div>
           ) : (
             <div className={s.searchWrap}>
               <input
+                id={clientSearchId}
                 type="text"
                 className={s.input}
                 placeholder={t('newTicket.clientSearchPlaceholder')}
@@ -169,27 +178,27 @@ export const NewTicketClient: React.FC = () => {
 
         {/* Subject */}
         <div className={s.fieldGroup}>
-          <label className={s.label}>{t('newTicket.subjectLabel')} <span className={s.required}>*</span></label>
-          <input type="text" className={s.input} placeholder={t('newTicket.subjectPlaceholder')} value={subject} onChange={(e) => setSubject(e.target.value)} />
+          <label className={s.label} htmlFor={subjectId}>{t('newTicket.subjectLabel')} <span className={s.required}>*</span></label>
+          <input id={subjectId} type="text" className={s.input} placeholder={t('newTicket.subjectPlaceholder')} value={subject} onChange={(e) => setSubject(e.target.value)} />
         </div>
 
         {/* Category + Priority + Project */}
         <div className={s.row3}>
           <div className={s.fieldGroup}>
-            <label className={s.label}>{t('newTicket.categoryLabel')}</label>
-            <select className={s.select} value={category} onChange={(e) => setCategory(e.target.value)}>
+            <label className={s.label} htmlFor={categoryId}>{t('newTicket.categoryLabel')}</label>
+            <select id={categoryId} className={s.select} value={category} onChange={(e) => setCategory(e.target.value)}>
               {CATEGORY_KEYS.map((c) => <option key={c.value} value={c.value}>{t(c.key)}</option>)}
             </select>
           </div>
           <div className={s.fieldGroup}>
-            <label className={s.label}>{t('newTicket.priorityLabel')}</label>
-            <select className={s.select} value={priority} onChange={(e) => setPriority(e.target.value)}>
+            <label className={s.label} htmlFor={priorityId}>{t('newTicket.priorityLabel')}</label>
+            <select id={priorityId} className={s.select} value={priority} onChange={(e) => setPriority(e.target.value)}>
               {PRIORITY_KEYS.map((p) => <option key={p.value} value={p.value}>{t(p.key)}</option>)}
             </select>
           </div>
           <div className={s.fieldGroup}>
-            <label className={s.label}>{t('newTicket.projectLabel')}</label>
-            <select className={s.select} value={projectId || ''} onChange={(e) => setProjectId(e.target.value ? Number(e.target.value) : null)}>
+            <label className={s.label} htmlFor={projectId_}>{t('newTicket.projectLabel')}</label>
+            <select id={projectId_} className={s.select} value={projectId || ''} onChange={(e) => setProjectId(e.target.value ? Number(e.target.value) : null)}>
               <option value="">{t('newTicket.noProject')}</option>
               {projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
             </select>
@@ -198,8 +207,8 @@ export const NewTicketClient: React.FC = () => {
 
         {/* Description */}
         <div className={s.fieldGroup}>
-          <label className={s.label}>{t('newTicket.descriptionLabel')}</label>
-          <textarea className={s.textarea} placeholder={t('newTicket.descriptionPlaceholder')} value={description} onChange={(e) => setDescription(e.target.value)} />
+          <label className={s.label} htmlFor={descriptionId}>{t('newTicket.descriptionLabel')}</label>
+          <textarea id={descriptionId} className={s.textarea} placeholder={t('newTicket.descriptionPlaceholder')} value={description} onChange={(e) => setDescription(e.target.value)} />
         </div>
 
         <button type="submit" className={s.submitBtn} disabled={submitting}>

package/src/views/PendingEmailsView/client.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useState, useEffect, useCallback } from 'react'
-import { Inbox, Plus, Link2, X, Search, ChevronDown, ChevronUp, Paperclip } from 'lucide-react'
+import { Inbox, Plus, Link2, X, Search, ChevronDown, ChevronUp, Paperclip } from '../shared/icons'
 import { SkeletonDashboard } from '../shared/Skeleton'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
 import styles from '../../styles/PendingEmails.module.scss'
@@ -86,7 +86,7 @@ function TicketSearchModal({
       <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
         <div className={styles.modalHeader}>
           <h3 className={styles.modalTitle}>Rattacher a un ticket</h3>
-          <button onClick={onClose} className={styles.modalClose}>
+          <button type="button" aria-label="Fermer" onClick={onClose} className={styles.modalClose}>
             <X size={20} />
           </button>
         </div>
@@ -112,6 +112,7 @@ function TicketSearchModal({
           <Search size={16} className={styles.searchIcon} />
           <input
             type="text"
+            aria-label="Rechercher un ticket"
             placeholder="Rechercher un ticket (TK-0042, sujet...)..."
             value={search}
             onChange={(e) => setSearch(e.target.value)}
@@ -225,7 +226,7 @@ function ClientPickerModal({
       <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
         <div className={styles.modalHeader}>
           <h3 className={styles.modalTitle}>Choisir un client</h3>
-          <button onClick={onClose} className={styles.modalClose}>
+          <button type="button" aria-label="Fermer" onClick={onClose} className={styles.modalClose}>
             <X size={20} />
           </button>
         </div>
@@ -251,6 +252,7 @@ function ClientPickerModal({
           <Search size={16} className={styles.searchIcon} />
           <input
             type="text"
+            aria-label="Rechercher un client"
             placeholder="Rechercher un client (nom, email, entreprise)..."
             value={search}
             onChange={(e) => setSearch(e.target.value)}
@@ -287,6 +289,7 @@ function ClientPickerModal({
             <div className={styles.createFormRow}>
               <input
                 type="text"
+                aria-label="Prenom"
                 placeholder="Prenom *"
                 value={newClient.firstName}
                 onChange={(e) => setNewClient((p) => ({ ...p, firstName: e.target.value }))}
@@ -294,6 +297,7 @@ function ClientPickerModal({
               />
               <input
                 type="text"
+                aria-label="Nom"
                 placeholder="Nom"
                 value={newClient.lastName}
                 onChange={(e) => setNewClient((p) => ({ ...p, lastName: e.target.value }))}
@@ -302,6 +306,7 @@ function ClientPickerModal({
             </div>
             <input
               type="email"
+              aria-label="Email"
               placeholder="Email *"
               value={newClient.email}
               onChange={(e) => setNewClient((p) => ({ ...p, email: e.target.value }))}
@@ -309,6 +314,7 @@ function ClientPickerModal({
             />
             <input
               type="text"
+              aria-label="Entreprise"
               placeholder="Entreprise *"
               value={newClient.company}
               onChange={(e) => setNewClient((p) => ({ ...p, company: e.target.value }))}

package/src/views/SupportDashboardView/client.tsx

@@ -511,15 +511,21 @@ export const SupportDashboardClient: React.FC = () => {
               </thead>
               <tbody>
                 {tickets.map((tk) => (
-                  <tr
-                    key={tk.id}
-                    onClick={() => { window.location.href = `/admin/support/ticket?id=${tk.id}` }}
-                  >
+                  /*
+                   * The row is not the control: a `<tr onClick>` is invisible to
+                   * the keyboard, and turning it into role="button" would cost
+                   * the table semantics. The link lives in the subject cell.
+                   */
+                  <tr key={tk.id}>
                     <td>
                       <span className={`${styles.statusDot} ${getStatusDotClass(tk.status)}`} />
                     </td>
                     <td className={styles.ticketNum}>#{tk.ticketNumber}</td>
-                    <td className={styles.ticketSubject}>{tk.subject}</td>
+                    <td className={styles.ticketSubject}>
+                      <a className={styles.ticketLink} href={`/admin/support/ticket?id=${tk.id}`}>
+                        {tk.subject}
+                      </a>
+                    </td>
                     <td className={styles.ticketClient}>{getClientName(tk)}</td>
                     <td className={styles.ticketTime}>{timeAgo(tk.updatedAt)}</td>
                     <td className={styles.ticketArrow}>&rarr;</td>