@consilioweb/payload-support 5.0.0 → 6.0.0

package/src/components/RichTextEditor/index.tsx

@@ -287,7 +287,6 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, Props>(function R
             fontSize: '14px',
             lineHeight: 1.6,
             color: '#1f2937',
-            outline: 'none',
             overflowY: 'auto',
           }}
         />
@@ -300,6 +299,7 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, Props>(function R
           type="file"
           accept="image/*"
           multiple
+          aria-label="Inserer une image"
           onChange={handleFileChange}
           style={{ display: 'none' }}
         />

package/src/components/TicketConversation/RewriteDropdown.tsx

@@ -76,7 +76,7 @@ export const RewriteDropdown: React.FC<{
               onMouseLeave={(e) => { (e.target as HTMLElement).style.background = 'transparent' }}
             >
               <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--theme-text, #111)' }}>{style.label}</span>
-              <span style={{ fontSize: 10, color: 'var(--theme-elevation-500, #6b7280)' }}>{style.desc}</span>
+              <span style={{ fontSize: 10, color: 'var(--theme-elevation-650, #6b7280)' }}>{style.desc}</span>
             </button>
           ))}
         </div>

package/src/components/TicketConversation/components/AISummaryPanel.tsx

@@ -39,6 +39,7 @@ export function AISummaryPanel({
   return (
     <div style={{ marginBottom: '14px' }}>
       <button
+        type="button"
         onClick={() => { setShowAiSummary(!showAiSummary); if (!showAiSummary && !aiSummary) handleAiGenerate() }}
         style={{
           ...s.ghostBtn('#17807c', false),
@@ -61,6 +62,7 @@ export function AISummaryPanel({
             </h4>
             <div style={{ display: 'flex', gap: '6px' }}>
               <button
+                type="button"
                 onClick={handleAiGenerate}
                 disabled={aiGenerating}
                 style={{ ...s.outlineBtn('#17807c', aiGenerating), fontSize: '11px', padding: '4px 10px' }}
@@ -69,6 +71,7 @@ export function AISummaryPanel({
               </button>
               {aiSummary && !aiGenerating && (
                 <button
+                  type="button"
                   onClick={handleAiSave}
                   disabled={aiSaving || aiSaved}
                   style={{ ...s.btn(aiSaved ? '#16a34a' : '#2563eb', aiSaving), fontSize: '11px', padding: '4px 10px' }}

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