@consilioweb/payload-support 4.0.0 → 6.0.0

package/src/components/TicketConversation/components/ActionPanels.tsx

@@ -26,12 +26,13 @@ export function MergePanel({
       <div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '8px' }}>
         <input
           type="text"
+          aria-label="Numero du ticket cible"
           value={mergeTarget}
           onChange={(e) => { setMergeTarget(e.target.value); setMergeTargetInfo(null); setMergeError('') }}
           placeholder="TK-0001"
           style={{ ...s.input, width: '130px' }}
         />
-        <button onClick={handleMergeLookup} style={{ ...s.outlineBtn('#ec4899'), fontSize: '12px', padding: '6px 14px' }}>
+        <button type="button" onClick={handleMergeLookup} style={{ ...s.outlineBtn('#ec4899'), fontSize: '12px', padding: '6px 14px' }}>
           Rechercher
         </button>
         {mergeError && <span style={{ fontSize: '12px', color: '#be185d', fontWeight: 600 }}>{mergeError}</span>}
@@ -41,7 +42,7 @@ export function MergePanel({
           <span style={{ fontSize: '13px', fontWeight: 600 }}>
             {mergeTargetInfo.ticketNumber} — {mergeTargetInfo.subject}
           </span>
-          <button onClick={handleMerge} disabled={merging} style={{ ...s.btn('#ec4899', merging), color: '#fff', fontSize: '12px', padding: '6px 14px' }}>
+          <button type="button" onClick={handleMerge} disabled={merging} style={{ ...s.btn('#ec4899', merging), color: '#fff', fontSize: '12px', padding: '6px 14px' }}>
             {merging ? 'Fusion...' : 'Confirmer la fusion'}
           </button>
         </div>
@@ -76,6 +77,7 @@ export function ExtMessagePanel({
     <div style={{ padding: '14px 18px', borderRadius: '8px', backgroundColor: '#eef2ff', border: '1px solid #c7d2fe', marginBottom: '14px' }}>
       <h4 style={{ fontSize: '13px', fontWeight: 600, marginBottom: '10px', color: '#312e81' }}>Ajouter un message reçu (email, SMS, WhatsApp...)</h4>
       <textarea
+        aria-label="Contenu du message recu"
         value={extMsgBody}
         onChange={(e) => setExtMsgBody(e.target.value)}
         placeholder="Coller le contenu du message reçu..."
@@ -83,17 +85,18 @@ export function ExtMessagePanel({
         style={{ ...s.input, width: '100%', resize: 'vertical', marginBottom: '10px' }}
       />
       <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap', marginBottom: '10px' }}>
-        <select value={extMsgAuthor} onChange={(e) => setExtMsgAuthor(e.target.value as 'client' | 'admin')} style={{ ...s.input, fontSize: '12px' }}>
+        <select aria-label="Auteur du message recu" value={extMsgAuthor} onChange={(e) => setExtMsgAuthor(e.target.value as 'client' | 'admin')} style={{ ...s.input, fontSize: '12px' }}>
           <option value="client">Envoyé par le client</option>
           <option value="admin">Envoyé par le support</option>
         </select>
         <input
           type="datetime-local"
+          aria-label="Date du message recu"
           value={extMsgDate}
           onChange={(e) => setExtMsgDate(e.target.value)}
           style={{ ...s.input, fontSize: '12px' }}
         />
-        <input ref={extFileInputRef} type="file" multiple onChange={handleExtFileChange} style={{ display: 'none' }} accept="image/*,.pdf,.doc,.docx,.txt,.zip" />
+        <input ref={extFileInputRef} type="file" multiple aria-label="Joindre des fichiers au message recu" onChange={handleExtFileChange} style={{ display: 'none' }} accept="image/*,.pdf,.doc,.docx,.txt,.zip" />
         <button type="button" onClick={() => extFileInputRef.current?.click()} style={{ ...s.ghostBtn('#6b7280'), fontSize: '12px', padding: '6px 12px' }}>
           + PJ
         </button>
@@ -108,7 +111,7 @@ export function ExtMessagePanel({
           ))}
         </div>
       )}
-      <button onClick={handleSendExtMsg} disabled={sendingExtMsg || !extMsgBody.trim()} style={s.btn('#1d2b4d', sendingExtMsg || !extMsgBody.trim())}>
+      <button type="button" onClick={handleSendExtMsg} disabled={sendingExtMsg || !extMsgBody.trim()} style={s.btn('#1d2b4d', sendingExtMsg || !extMsgBody.trim())}>
         {sendingExtMsg ? 'Ajout...' : 'Ajouter (sans notification)'}
       </button>
     </div>
@@ -186,6 +189,7 @@ export function ReminderPanel({
       )}
 
       <button
+        type="button"
         onClick={handleSendReminder}
         disabled={reminderSending || !clientEmail}
         style={{ ...s.btn(C.orange, reminderSending || !clientEmail), color: '#fff', fontSize: '13px', padding: '8px 18px' }}
@@ -207,11 +211,12 @@ export function SnoozePanel({ snoozeSaving, handleSnooze }: SnoozePanelProps) {
     <div style={{ padding: '14px 18px', borderRadius: '8px', backgroundColor: '#eef8f7', border: '1px solid #b8dcda', marginBottom: '14px' }}>
       <h4 style={{ fontSize: '13px', fontWeight: 600, marginBottom: '10px', color: '#5b21b6' }}>Snooze — masquer temporairement</h4>
       <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' }}>
-        <button onClick={() => handleSnooze(1)} disabled={snoozeSaving} style={{ ...s.outlineBtn('#17807c', snoozeSaving), fontSize: '12px' }}>1 jour</button>
-        <button onClick={() => handleSnooze(3)} disabled={snoozeSaving} style={{ ...s.outlineBtn('#17807c', snoozeSaving), fontSize: '12px' }}>3 jours</button>
-        <button onClick={() => handleSnooze(7)} disabled={snoozeSaving} style={{ ...s.outlineBtn('#17807c', snoozeSaving), fontSize: '12px' }}>1 semaine</button>
+        <button type="button" onClick={() => handleSnooze(1)} disabled={snoozeSaving} style={{ ...s.outlineBtn('#17807c', snoozeSaving), fontSize: '12px' }}>1 jour</button>
+        <button type="button" onClick={() => handleSnooze(3)} disabled={snoozeSaving} style={{ ...s.outlineBtn('#17807c', snoozeSaving), fontSize: '12px' }}>3 jours</button>
+        <button type="button" onClick={() => handleSnooze(7)} disabled={snoozeSaving} style={{ ...s.outlineBtn('#17807c', snoozeSaving), fontSize: '12px' }}>1 semaine</button>
         <input
           type="datetime-local"
+          aria-label="Snoozer jusqu'a une date precise"
           onChange={(e) => { if (e.target.value) handleSnooze(null, e.target.value) }}
           style={{ ...s.input, fontSize: '12px' }}
         />

package/src/components/TicketConversation/components/ClientHistory.tsx

@@ -96,6 +96,7 @@ export function ClientHistory({
           {/* Notes */}
           <h5 style={{ fontSize: '12px', fontWeight: 600, color: C.textSecondary, marginBottom: '8px' }}>Notes internes</h5>
           <textarea
+            aria-label="Notes internes sur le client"
             value={clientNotes}
             onChange={(e) => onNotesChange(e.target.value)}
             rows={3}

package/src/components/TicketConversation/components/CodeBlock.tsx

@@ -90,6 +90,7 @@ function SingleCodeBlock({ lang, code }: { lang: string; code: string }) {
           </span>
         </div>
         <button
+          type="button"
           onClick={handleCopy}
           style={{
             background: 'none',

package/src/components/TicketConversation/components/CodeBlockInserter.tsx

@@ -109,6 +109,7 @@ export function CodeBlockInserter({ onInsert, className, style }: CodeBlockInser
             <input
               ref={inputRef}
               type="text"
+              aria-label="Rechercher un langage"
               value={filter}
               onChange={(e) => setFilter(e.target.value)}
               onKeyDown={(e) => {
@@ -124,7 +125,6 @@ export function CodeBlockInserter({ onInsert, className, style }: CodeBlockInser
                 border: '1px solid #334155',
                 borderRadius: 6,
                 color: '#e2e8f0',
-                outline: 'none',
                 boxSizing: 'border-box',
               }}
             />

package/src/components/TicketConversation/components/QuickActions.tsx

@@ -48,6 +48,7 @@ export function QuickActions({
       <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '16px', alignItems: 'center' }}>
         {statusTransitions.map((a) => (
           <button
+            type="button"
             key={a.status}
             onClick={() => onStatusChange(a.status)}
             disabled={statusUpdating}
@@ -57,22 +58,22 @@ export function QuickActions({
           </button>
         ))}
         {snoozeUntil && new Date(snoozeUntil) > new Date() && (
-          <button onClick={onCancelSnooze} disabled={snoozeSaving} style={{ ...s.ghostBtn('#17807c', snoozeSaving), fontSize: '12px', padding: '5px 10px' }}>
+          <button type="button" onClick={onCancelSnooze} disabled={snoozeSaving} style={{ ...s.ghostBtn('#17807c', snoozeSaving), fontSize: '12px', padding: '5px 10px' }}>
             Annuler snooze
           </button>
         )}
         <span style={{ borderLeft: `1px solid ${C.border}`, height: '20px', margin: '0 4px' }} />
-        <button onClick={onToggleMerge} style={s.ghostBtn('#be185d')}>Fusionner</button>
-        <button onClick={onToggleExtMsg} style={s.ghostBtn('#4f46e5')}>+ Message reçu</button>
-        <button onClick={onToggleSnooze} style={s.ghostBtn('#17807c')}>Snooze</button>
+        <button type="button" onClick={onToggleMerge} style={s.ghostBtn('#be185d')}>Fusionner</button>
+        <button type="button" onClick={onToggleExtMsg} style={s.ghostBtn('#4f46e5')}>+ Message reçu</button>
+        <button type="button" onClick={onToggleSnooze} style={s.ghostBtn('#17807c')}>Snooze</button>
         {showReminderButton && (
-          <button onClick={onToggleReminder} style={s.ghostBtn('#ea580c')}>{'⏰'} Relancer</button>
+          <button type="button" onClick={onToggleReminder} style={s.ghostBtn('#ea580c')}>{'⏰'} Relancer</button>
         )}
-        <button onClick={onNextTicket} style={s.ghostBtn('#16a34a')}>Ticket suivant</button>
+        <button type="button" onClick={onNextTicket} style={s.ghostBtn('#16a34a')}>Ticket suivant</button>
         {scheduledClose && (
           <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', padding: '5px 10px', borderRadius: '6px', backgroundColor: '#fff7ed', border: '1px solid #fed7aa', fontSize: '12px', color: '#9a3412', fontWeight: 600 }}>
             {'⏰'} Fermeture auto le {scheduledClose}
-            <button onClick={onCancelScheduledClose} disabled={cancelingClose} style={{ border: 'none', background: 'none', color: '#b91c1c', cursor: cancelingClose ? 'not-allowed' : 'pointer', fontWeight: 700, fontSize: '12px', textDecoration: 'underline', padding: 0, opacity: cancelingClose ? 0.5 : 1 }}>
+            <button type="button" onClick={onCancelScheduledClose} disabled={cancelingClose} style={{ border: 'none', background: 'none', color: '#b91c1c', cursor: cancelingClose ? 'not-allowed' : 'pointer', fontWeight: 700, fontSize: '12px', textDecoration: 'underline', padding: 0, opacity: cancelingClose ? 0.5 : 1 }}>
               {cancelingClose ? '...' : 'Annuler'}
             </button>
           </span>
@@ -90,6 +91,7 @@ export function QuickActions({
                 Ticket suivant : <strong>{nextTicketInfo}</strong>
               </span>
               <button
+                type="button"
                 onClick={() => { window.location.href = `/admin/support/ticket?id=${nextTicketId}` }}
                 style={{ ...s.btn(C.statusResolved), color: C.white, fontSize: '12px', padding: '5px 14px' }}
               >
@@ -99,7 +101,7 @@ export function QuickActions({
           ) : (
             <span style={{ fontSize: '13px', color: '#166534', fontWeight: 700 }}>{nextTicketInfo}</span>
           )}
-          <button onClick={onCloseNextTicket} style={{ border: 'none', background: 'none', color: C.textMuted, cursor: 'pointer', fontSize: '16px', fontWeight: 700, marginLeft: '8px' }}>&times;</button>
+          <button type="button" onClick={onCloseNextTicket} style={{ border: 'none', background: 'none', color: C.textMuted, cursor: 'pointer', fontSize: '16px', fontWeight: 700, marginLeft: '8px' }}>&times;</button>
         </div>
       )}
     </>

package/src/components/TicketConversation/components/TicketHeader.tsx

@@ -71,6 +71,7 @@ export function TicketHeader({
       )}
       <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
         <button
+          type="button"
           onClick={() => onCopyLink('admin')}
           title="Copier le lien admin"
           style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '13px', opacity: copiedLink === 'admin' ? 1 : 0.5, padding: '2px 4px' }}
@@ -78,6 +79,7 @@ export function TicketHeader({
           {copiedLink === 'admin' ? '\u2705' : '\uD83D\uDCCB'}
         </button>
         <button
+          type="button"
           onClick={() => onCopyLink('client')}
           title="Copier le lien client"
           style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '13px', opacity: copiedLink === 'client' ? 1 : 0.5, padding: '2px 4px' }}

package/src/components/TicketConversation/components/TimeTrackingPanel.tsx

@@ -34,6 +34,11 @@ export function TimeTrackingPanel({
   duration, setDuration, timeDescription, setTimeDescription,
   handleAddTime, addingTime, timeSuccess,
 }: TimeTrackingPanelProps) {
+  // The two `<label>`s of the manual entry row exist but were not associated
+  // with anything. useId, never a literal: the panel is one per ticket screen
+  // but the pattern has to hold if it is ever mounted twice.
+  const minutesId = React.useId()
+  const workDescriptionId = React.useId()
   const totalH = Math.floor(totalMinutes / 60)
   const totalM = totalMinutes % 60
 
@@ -63,6 +68,7 @@ export function TimeTrackingPanel({
           <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
             {[-5, -1, 1, 5, 15, 30].map((m) => (
               <button
+                type="button"
                 key={m}
                 onClick={() => setTimerSeconds((p) => Math.max(0, p + m * 60))}
                 style={{ width: Math.abs(m) >= 15 ? '32px' : '28px', height: '28px', borderRadius: '6px', border: '1px solid #e2e8f0', background: 'white', cursor: 'pointer', fontSize: Math.abs(m) >= 15 ? '12px' : '14px', fontWeight: 700, color: '#64748b' }}
@@ -75,28 +81,30 @@ export function TimeTrackingPanel({
         )}
 
         {!timerRunning && timerSeconds === 0 && (
-          <button onClick={() => handleTimerStart(true)} style={{ ...s.btn('#dc2626', false), fontSize: '12px', padding: '6px 16px', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <button type="button" onClick={() => handleTimerStart(true)} style={{ ...s.btn('#dc2626', false), fontSize: '12px', padding: '6px 16px', display: 'flex', alignItems: 'center', gap: '6px' }}>
             &#9654; Démarrer
           </button>
         )}
         {timerRunning && (
-          <button onClick={handleTimerStop} style={{ ...s.btn('#374151', false), fontSize: '12px', padding: '6px 16px', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <button type="button" onClick={handleTimerStop} style={{ ...s.btn('#374151', false), fontSize: '12px', padding: '6px 16px', display: 'flex', alignItems: 'center', gap: '6px' }}>
             &#9208; Pause
           </button>
         )}
         {!timerRunning && timerSeconds > 0 && (
           <>
-            <button onClick={() => handleTimerStart(false)} style={{ ...s.btn('#dc2626', false), fontSize: '12px', padding: '6px 14px' }}>
+            <button type="button" onClick={() => handleTimerStart(false)} style={{ ...s.btn('#dc2626', false), fontSize: '12px', padding: '6px 14px' }}>
               &#9654; Reprendre
             </button>
             <input
               type="text"
+              aria-label="Description du temps en cours"
               value={timerDescription}
               onChange={(e) => setTimerDescription(e.target.value)}
               placeholder="Description..."
               style={{ ...s.input, fontSize: '12px', flex: 1, minWidth: '120px' }}
             />
             <button
+              type="button"
               onClick={handleTimerSave}
               disabled={addingTime || timerSeconds < 60}
               style={{ ...s.btn('#16a34a', addingTime || timerSeconds < 60), fontSize: '12px', padding: '6px 14px' }}
@@ -104,7 +112,7 @@ export function TimeTrackingPanel({
             >
               &#128190; {Math.round(timerSeconds / 60)} min
             </button>
-            <button onClick={handleTimerDiscard} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '14px', color: '#94a3b8', padding: '4px' }} title="Annuler">
+            <button type="button" onClick={handleTimerDiscard} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '14px', color: '#94a3b8', padding: '4px' }} title="Annuler">
               &#10005;
             </button>
           </>
@@ -119,14 +127,14 @@ export function TimeTrackingPanel({
       {/* Manual time entry */}
       <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end', flexWrap: 'wrap', marginBottom: '14px' }}>
         <div>
-          <label style={{ display: 'block', fontSize: '11px', color: C.textSecondary, marginBottom: '3px', fontWeight: 600 }}>Min</label>
-          <input type="number" min="1" value={duration} onChange={(e) => setDuration(e.target.value)} placeholder="30" style={{ ...s.input, width: '80px' }} />
+          <label htmlFor={minutesId} style={{ display: 'block', fontSize: '11px', color: C.textSecondary, marginBottom: '3px', fontWeight: 600 }}>Min</label>
+          <input id={minutesId} type="number" min="1" value={duration} onChange={(e) => setDuration(e.target.value)} placeholder="30" style={{ ...s.input, width: '80px' }} />
         </div>
         <div style={{ flex: 1 }}>
-          <label style={{ display: 'block', fontSize: '11px', color: C.textSecondary, marginBottom: '3px', fontWeight: 600 }}>Description</label>
-          <input type="text" value={timeDescription} onChange={(e) => setTimeDescription(e.target.value)} placeholder="Travail effectué..." style={{ ...s.input, width: '100%' }} />
+          <label htmlFor={workDescriptionId} style={{ display: 'block', fontSize: '11px', color: C.textSecondary, marginBottom: '3px', fontWeight: 600 }}>Description</label>
+          <input id={workDescriptionId} type="text" value={timeDescription} onChange={(e) => setTimeDescription(e.target.value)} placeholder="Travail effectué..." style={{ ...s.input, width: '100%' }} />
         </div>
-        <button onClick={handleAddTime} disabled={addingTime || !duration} style={s.btn(C.amber, addingTime || !duration)}>
+        <button type="button" onClick={handleAddTime} disabled={addingTime || !duration} style={s.btn(C.amber, addingTime || !duration)}>
           {addingTime ? '...' : '+ Temps'}
         </button>
         {timeSuccess && <span style={{ fontSize: '12px', color: '#16a34a', fontWeight: 600 }}>{timeSuccess}</span>}

package/src/components/TicketConversation/index.tsx

@@ -24,9 +24,10 @@ import { useDocumentIdFromUrl } from './hooks/useDocumentIdFromUrl'
 import { useFeatures } from './hooks/useFeatures'
 import { SkeletonText } from './SkeletonText'
 import { RewriteDropdown } from './RewriteDropdown'
+import { AdminErrorBoundary } from '../../views/shared/ErrorBoundary'
 import '../../styles/theme.css'
 
-const TicketConversation: React.FC = () => {
+const TicketConversationInner: React.FC = () => {
   const { id } = useDocumentIdFromUrl()
   const { features } = useFeatures()
   const [messages, setMessages] = useState<Message[]>([])
@@ -416,6 +417,7 @@ const TicketConversation: React.FC = () => {
         <div style={{ flex: 1 }}>
           <input
             type="text"
+            aria-label="Rechercher dans la conversation"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             placeholder="Rechercher..."
@@ -442,6 +444,7 @@ const TicketConversation: React.FC = () => {
               <>
                 {showCollapse && hiddenCount > 0 && (
                   <button
+                    type="button"
                     onClick={() => setMessagesCollapsed(false)}
                     style={{
                       background: 'none', border: `1px dashed ${C.border}`, borderRadius: '6px',
@@ -454,6 +457,7 @@ const TicketConversation: React.FC = () => {
                 )}
                 {!messagesCollapsed && filtered.length > 1 && !isSearching && (
                   <button
+                    type="button"
                     onClick={() => setMessagesCollapsed(true)}
                     style={{
                       background: 'none', border: `1px dashed ${C.border}`, borderRadius: '6px',
@@ -501,6 +505,7 @@ const TicketConversation: React.FC = () => {
                                 <span style={s.badge(C.emailBg, C.orange)}>Email</span>
                               ) : (
                                 <select
+                                  aria-label="Auteur du message"
                                   value={msg.authorType}
                                   onChange={(e) => handleToggleAuthor(msg.id, e.target.value === 'admin' ? 'client' : 'admin')}
                                   disabled={togglingAuthor === msg.id}
@@ -537,6 +542,7 @@ const TicketConversation: React.FC = () => {
                               {/* Split button */}
                               {!msg.isInternal && !(msg as unknown as { deletedAt?: string }).deletedAt && (
                                 <button
+                                  type="button"
                                   onClick={() => handleSplitMessage(msg.id, ticketSubject)}
                                   style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '10px', color: '#6b7280', padding: 0 }}
                                   title="Extraire en nouveau ticket"
@@ -579,16 +585,17 @@ const TicketConversation: React.FC = () => {
                           {editingMsg === msg.id ? (
                             <div style={{ marginTop: '6px' }}>
                               <textarea
+                                aria-label="Editer le message"
                                 value={editBody}
                                 onChange={(e) => { setEditBody(e.target.value); setEditHtml(e.target.value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br />')) }}
                                 rows={4}
                                 style={{ ...s.input, width: '100%', resize: 'vertical', fontSize: '13px' }}
                               />
                               <div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
-                                <button onClick={() => handleEditSave(msg.id)} disabled={savingEdit || (!editBody.trim() && !editHtml)} style={{ ...s.btn(C.blue, savingEdit), fontSize: '11px', padding: '5px 12px' }}>
+                                <button type="button" onClick={() => handleEditSave(msg.id)} disabled={savingEdit || (!editBody.trim() && !editHtml)} style={{ ...s.btn(C.blue, savingEdit), fontSize: '11px', padding: '5px 12px' }}>
                                   {savingEdit ? '...' : 'Enregistrer'}
                                 </button>
-                                <button onClick={handleEditCancel} style={{ ...s.ghostBtn('#6b7280'), fontSize: '11px', padding: '5px 12px' }}>
+                                <button type="button" onClick={handleEditCancel} style={{ ...s.ghostBtn('#6b7280'), fontSize: '11px', padding: '5px 12px' }}>
                                   Annuler
                                 </button>
                               </div>
@@ -775,6 +782,7 @@ const TicketConversation: React.FC = () => {
           ))}
           {features.ai && (
             <button
+              type="button"
               onClick={handleAiSuggestReply}
               disabled={aiReplying || messages.length === 0}
               style={{ ...s.outlineBtn('#17807c', aiReplying || messages.length === 0), fontSize: '11px', padding: '3px 10px', borderRadius: '14px' }}
@@ -800,7 +808,7 @@ const TicketConversation: React.FC = () => {
           />
 {features.canned && cannedResponses.length > 0 && (
             <>
-              <select onChange={handleCannedSelect} style={{ ...s.input, fontSize: '11px', padding: '3px 8px', fontWeight: 600 }}>
+              <select aria-label="Reponse rapide" onChange={handleCannedSelect} style={{ ...s.input, fontSize: '11px', padding: '3px 8px', fontWeight: 600 }}>
                 <option value="">Réponse rapide...</option>
                 {cannedResponses.map((cr) => (
                   <option key={cr.id} value={String(cr.id)}>{cr.title}</option>
@@ -818,6 +826,7 @@ const TicketConversation: React.FC = () => {
         {/* Reply textarea (replacing RichTextEditor) */}
         <div style={{ border: `1px solid ${C.border}`, borderRadius: '8px', overflow: 'hidden' }}>
           <textarea
+            aria-label="Reponse au client"
             value={replyBody}
             onChange={(e) => {
               const text = e.target.value
@@ -831,7 +840,6 @@ const TicketConversation: React.FC = () => {
               minHeight: '120px',
               padding: '12px',
               border: 'none',
-              outline: 'none',
               fontSize: '14px',
               lineHeight: 1.5,
               resize: 'vertical',
@@ -848,6 +856,7 @@ const TicketConversation: React.FC = () => {
             ref={fileInputRef}
             type="file"
             multiple
+            aria-label="Joindre des fichiers"
             onChange={handleReplyFileChange}
             style={{ display: 'none' }}
             accept="image/*,.pdf,.doc,.docx,.txt,.zip"
@@ -866,6 +875,7 @@ const TicketConversation: React.FC = () => {
                   {'\uD83D\uDCCE'} {file.name}
                   <button
                     type="button"
+                    aria-label={`Retirer la piece jointe ${file.name}`}
                     onClick={() => setReplyFiles((prev) => prev.filter((_, idx) => idx !== i))}
                     style={{ border: 'none', background: 'none', color: '#ef4444', fontWeight: 700, cursor: 'pointer', fontSize: '14px', lineHeight: 1 }}
                   >
@@ -879,6 +889,7 @@ const TicketConversation: React.FC = () => {
         {/* Send row */}
         <div style={{ display: 'flex', alignItems: 'center', gap: '10px', flexWrap: 'wrap', marginTop: '8px' }}>
           <select
+            aria-label="Envoyer en tant que"
             value={sendAsClient ? 'client' : 'admin'}
             onChange={(e) => setSendAsClient(e.target.value === 'client')}
             style={{ ...s.input, fontSize: '12px', padding: '6px 8px', fontWeight: 600 }}
@@ -896,11 +907,12 @@ const TicketConversation: React.FC = () => {
               Envoyer au client
             </label>
           )}
-          <button data-action="send-reply" onClick={handleSendReply} disabled={sending || (!replyBody.trim() && !replyHtml)} style={{ ...s.btn(isInternal ? C.amber : notifyClient ? '#16a34a' : C.blue, sending || (!replyBody.trim() && !replyHtml)), fontSize: '13px', padding: '8px 20px', marginLeft: 'auto' }}>
+          <button type="button" data-action="send-reply" onClick={handleSendReply} disabled={sending || (!replyBody.trim() && !replyHtml)} style={{ ...s.btn(isInternal ? C.amber : notifyClient ? '#16a34a' : C.blue, sending || (!replyBody.trim() && !replyHtml)), fontSize: '13px', padding: '8px 20px', marginLeft: 'auto' }}>
             {sending ? 'Envoi...' : isInternal ? 'Ajouter note' : notifyClient ? 'Envoyer + Notifier' : 'Sauvegarder'}
           </button>
           {!isInternal && (
             <button
+              type="button"
               onClick={() => setShowSchedule(!showSchedule)}
               disabled={!replyBody.trim() && !replyHtml}
               style={{ ...s.outlineBtn('#17807c', !replyBody.trim() && !replyHtml), fontSize: '12px', padding: '8px 12px' }}
@@ -915,19 +927,21 @@ const TicketConversation: React.FC = () => {
             <span style={{ fontSize: '12px', fontWeight: 600, color: '#17807c' }}>Programmer pour :</span>
             <input
               type="datetime-local"
+              aria-label="Date et heure d'envoi programme"
               value={scheduleDate}
               onChange={(e) => setScheduleDate(e.target.value)}
               min={new Date().toISOString().slice(0, 16)}
               style={{ ...s.input, fontSize: '12px', width: 'auto' }}
             />
             <button
+              type="button"
               onClick={handleScheduleReply}
               disabled={sending || !scheduleDate || (!replyBody.trim() && !replyHtml)}
               style={{ ...s.btn('#17807c', sending || !scheduleDate || (!replyBody.trim() && !replyHtml)), fontSize: '12px', padding: '6px 14px' }}
             >
               {sending ? '...' : '\u23F0 Programmer'}
             </button>
-            <button onClick={() => setShowSchedule(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#94a3b8', fontSize: '14px' }}>{'\u2715'}</button>
+            <button type="button" aria-label="Annuler la programmation" onClick={() => setShowSchedule(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#94a3b8', fontSize: '14px' }}>{'\u2715'}</button>
           </div>
         )}
         <div style={{ fontSize: '11px', color: C.textMuted, marginTop: '4px', textAlign: 'right' }}>
@@ -1088,4 +1102,24 @@ const TicketConversation: React.FC = () => {
 
 
 
+/**
+ * Payload mounts this component straight from the import map as the `ui` field
+ * of the Tickets edit view, so the plugin never gets to render an ancestor for
+ * it: the boundary has to live inside the module itself. Without it a single
+ * render error in any of the twelve sub-components blanks the whole ticket
+ * screen.
+ *
+ * The document id is used as a reset key so that navigating from a ticket that
+ * broke to another one clears the error on its own.
+ */
+const TicketConversation: React.FC = () => {
+  const { id } = useDocumentIdFromUrl()
+
+  return (
+    <AdminErrorBoundary viewName="TicketConversation" resetKeys={[id]}>
+      <TicketConversationInner />
+    </AdminErrorBoundary>
+  )
+}
+
 export default TicketConversation

package/src/endpoints/auth-2fa.ts

@@ -4,7 +4,7 @@ import crypto, { createHmac } from 'crypto'
 import { RateLimiter, type RateLimitStore } from '../utils/rateLimiter'
 import { escapeHtml } from '../utils/emailTemplate'
 import { dbFind, dbUpdate } from '../utils/db'
-import { verifyTwoFactorChallenge } from '../utils/twoFactorChallenge'
+import { issueTwoFactorChallenge, normalizeEmail, verifyTwoFactorChallenge } from '../utils/twoFactorChallenge'
 
 function generateSecureCode(): string {
   const buf = crypto.randomBytes(4)
@@ -46,7 +46,35 @@ export function createAuth2faEndpoint(slugs: CollectionSlugs, store?: RateLimitS
           return Response.json({ error: 'Paramètres manquants' }, { status: 400 })
         }
 
-        const genericSendResponse = { success: true, message: 'Si un compte existe, un code a été envoyé.' }
+        // Both limiters are keyed on the SAME normalized address the challenge is
+        // signed over. Keyed on the raw input, one challenge bought one budget per
+        // casing variant of the address it was minted for.
+        const limiterKey = normalizeEmail(email)
+
+        /**
+         * A challenge is a 10-minute proof that the password step succeeded. It
+         * is refreshed on every accepted `send` so it outlives exactly as long as
+         * the code that send just minted: without this, a resend late in the
+         * window produced a code whose challenge expired before the user could
+         * type it, and `verify` answered 401 on a perfectly valid code.
+         *
+         * Returned on EVERY `send` reply, including the throttled and the
+         * unknown-address ones, so the response shape never tells the caller
+         * whether the account exists.
+         */
+        const sendResponse = (): Response => {
+          let refreshed: string | undefined
+          try {
+            refreshed = issueTwoFactorChallenge(email)
+          } catch {
+            // PAYLOAD_SECRET vanished mid-flight: answer without a challenge.
+          }
+          return Response.json({
+            success: true,
+            message: 'Si un compte existe, un code a été envoyé.',
+            ...(refreshed ? { challenge: refreshed } : {}),
+          })
+        }
 
         if (action === 'send') {
           // The challenge is checked BEFORE the limiter on purpose: the limiter
@@ -60,8 +88,8 @@ export function createAuth2faEndpoint(slugs: CollectionSlugs, store?: RateLimitS
             )
           }
 
-          if (await sendLimiter.check(email, req)) {
-            return Response.json(genericSendResponse)
+          if (await sendLimiter.check(limiterKey, req)) {
+            return sendResponse()
           }
 
           const clients = await dbFind(payload, slugs.supportClients, {
@@ -72,7 +100,7 @@ export function createAuth2faEndpoint(slugs: CollectionSlugs, store?: RateLimitS
           })
 
           if (clients.docs.length === 0) {
-            return Response.json(genericSendResponse)
+            return sendResponse()
           }
 
           const client = clients.docs[0] as any
@@ -101,15 +129,29 @@ export function createAuth2faEndpoint(slugs: CollectionSlugs, store?: RateLimitS
             </div>`,
           })
 
-          return Response.json(genericSendResponse)
+          return sendResponse()
         }
 
         if (action === 'verify') {
+          // Same proof, same reason, same position as `send` above: the limiter
+          // below is keyed on the VICTIM's email, so an unauthenticated caller
+          // able to reach it could burn the 5 attempts and leave the victim —
+          // holding the right password AND the right code — locked out of the
+          // only route that clears the 2FA gate, renewably, every 15 minutes.
+          // Only `send` got this guard in the previous pass; `verify` is the
+          // other half of the same door.
+          if (!verifyTwoFactorChallenge(email, challenge)) {
+            return Response.json(
+              { error: 'Authentification requise avant la vérification d\'un code.' },
+              { status: 401 },
+            )
+          }
+
           if (!code) {
             return Response.json({ error: 'Code manquant' }, { status: 400 })
           }
 
-          if (await verifyLimiter.check(email, req)) {
+          if (await verifyLimiter.check(limiterKey, req)) {
             return Response.json(
               { error: 'Trop de tentatives. Réessayez dans 15 minutes.' },
               { status: 429 },
@@ -159,7 +201,10 @@ export function createAuth2faEndpoint(slugs: CollectionSlugs, store?: RateLimitS
             overrideAccess: true,
           })
 
-          verifyLimiter.reset(email)
+          // `req` is REQUIRED here: PayloadRateLimitStore throws without it, and
+          // this reset runs after the marker was written — a throw turned a
+          // successful verification into a 500 for the caller.
+          await verifyLimiter.reset(limiterKey, req)
 
           return Response.json({ success: true, verified: true })
         }

package/src/endpoints/capabilities.ts

@@ -1,7 +1,7 @@
 import type { Endpoint, Where } from 'payload'
 import type { SupportCapabilities } from '../types'
 import type { CollectionSlugs } from '../utils/slugs'
-import { principalRateKey, RateLimiter, type RateLimitStore } from '../utils/rateLimiter'
+import { clientIpRateKey, principalRateKey, RateLimiter, type RateLimitStore } from '../utils/rateLimiter'
 import {
   validateInboundEmailPayload,
   verifySecret,
@@ -21,9 +21,7 @@ export function createInboundEmailEndpoint(
       if (!verifySecret(req.headers.get(secretHeader), capability.secret)) {
         return Response.json({ error: 'Unauthorized' }, { status: 401 })
       }
-      const ip = req.headers.get('x-forwarded-for')?.split(',')[0]?.trim()
-        || req.headers.get('x-real-ip')
-        || 'unknown'
+      const ip = clientIpRateKey(req)
       if (await limiter.check(ip, req)) {
         return Response.json({ error: 'Rate limit exceeded' }, { status: 429 })
       }

package/src/endpoints/chatbot.ts

@@ -1,6 +1,6 @@
 import type { Endpoint } from 'payload'
 import type { CollectionSlugs } from '../utils/slugs'
-import { RateLimiter, type RateLimitStore } from '../utils/rateLimiter'
+import { clientIpRateKey, RateLimiter, type RateLimitStore } from '../utils/rateLimiter'
 import { dbFind } from '../utils/db'
 
 
@@ -41,7 +41,7 @@ export function createChatbotEndpoint(
     method: 'post',
     handler: async (req) => {
       try {
-        const ip = req.headers.get('x-forwarded-for')?.split(',')[0]?.trim() || req.headers.get('x-real-ip') || 'unknown'
+        const ip = clientIpRateKey(req)
         if (await chatbotLimiter.check(ip, req)) {
           return Response.json({ error: 'Too many requests. Please wait a moment.' }, { status: 429 })
         }