@consilioweb/payload-support 5.0.0 → 6.0.1

package/src/views/TicketDetailView/client.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState, useEffect, useCallback, useRef } from 'react'
+import React, { useState, useEffect, useCallback, useId, useRef } from 'react'
 import { useSearchParams } from 'next/navigation'
 import Link from 'next/link'
 import { RichTextEditor, type RichTextEditorHandle } from '../../components/RichTextEditor/index'
@@ -26,6 +26,13 @@ export const TicketDetailClient: React.FC = () => {
   const threadEndRef = useRef<HTMLDivElement>(null)
   const dropdownRef = useRef<HTMLDivElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
+  // Generated ids so every control below carries the name of the text next to
+  // it. useId, never a literal: this view can be mounted more than once.
+  const manualTimeId = useId()
+  const billingTypeId = useId()
+  const flatAmountId = useId()
+  const billedAmountId = useId()
+  const paymentStatusId = useId()
 
   const [ticket, setTicket] = useState<Record<string, unknown> | null>(null)
   const [messages, setMessages] = useState<Message[]>([])
@@ -721,7 +728,7 @@ const [clientTyping, setClientTyping] = useState(false)
                             const file = typeof att.file === 'object' ? att.file : null
                             if (!file) return null
                             return (file.mimeType || '').startsWith('image/')
-                              ? <a key={i} href={file.url || '#'} target="_blank" rel="noopener noreferrer"><img src={file.url || ''} alt="" className={s.attachmentImg} /></a>
+                              ? <a key={i} href={file.url || '#'} target="_blank" rel="noopener noreferrer"><img src={file.url || ''} alt={file.filename || t('detail.file')} className={s.attachmentImg} /></a>
                               : <a key={i} href={file.url || '#'} target="_blank" rel="noopener noreferrer" className={s.attachmentFile}>PJ {file.filename || 'Fichier'}</a>
                           })}
                         </div>
@@ -810,7 +817,7 @@ const [clientTyping, setClientTyping] = useState(false)
               />
               {/* #5 — File upload button */}
               <button className={s.toolbarBtn} data-tooltip={t('detail.file')} aria-label={t('detail.file')} onClick={() => fileInputRef.current?.click()} style={{ fontSize: 11, fontWeight: 700, padding: '4px 10px', width: 'auto' }}>📎 {t('detail.file')}</button>
-              <input ref={fileInputRef} type="file" multiple className={s.hiddenFileInput} onChange={(e) => handleFileSelect(e.target.files)} />
+              <input ref={fileInputRef} type="file" multiple aria-label={t('detail.file')} className={s.hiddenFileInput} onChange={(e) => handleFileSelect(e.target.files)} />
               {macros.length > 0 && (
                 <select
                   className={s.cannedSelect}
@@ -871,6 +878,7 @@ const [clientTyping, setClientTyping] = useState(false)
             <div className={s.composerFooter}>
               <div className={s.composerOptions}>
                 <select
+                  aria-label={t('detail.sendAs')}
                   value={sendAsClient ? 'client' : 'admin'}
                   onChange={(e) => {
                     const asClient = e.target.value === 'client'
@@ -1089,9 +1097,9 @@ const [clientTyping, setClientTyping] = useState(false)
               </div>
               {/* Manual time entry */}
               <div style={{ display: 'flex', gap: 6, marginTop: 8, alignItems: 'center' }}>
-                <input type="number" min="1" placeholder="min" style={{ width: 60, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' }} id="manual-time-input" />
+                <input type="number" min="1" placeholder="min" aria-label={t('detail.manualMinutes')} style={{ width: 60, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' }} id={manualTimeId} />
                 <button className={`${s.timerBtn} ${s.timerBtnGhost}`} onClick={async () => {
-                  const input = document.getElementById('manual-time-input') as HTMLInputElement
+                  const input = document.getElementById(manualTimeId) as HTMLInputElement
                   const mins = Number(input?.value)
                   if (!mins || mins < 1 || !ticketId) return
                   try {
@@ -1102,7 +1110,7 @@ const [clientTyping, setClientTyping] = useState(false)
                 }} style={{ fontSize: 11 }}>{t('detail.addTime')}</button>
               </div>
               {/* Billing info */}
-              <div style={{ marginTop: 8, fontSize: 11, color: 'var(--theme-elevation-500)' }}>
+              <div style={{ marginTop: 8, fontSize: 11, color: 'var(--theme-elevation-650)' }}>
                 <div style={{ display: 'flex', justifyContent: 'space-between', padding: '2px 0', alignItems: 'center' }}>
                   <span>{t('detail.billing.billable')}</span>
                   <button
@@ -1126,7 +1134,7 @@ const [clientTyping, setClientTyping] = useState(false)
               {timeEntries.length > 0 && (
                 <div style={{ marginTop: 8, fontSize: 11 }}>
                   {timeEntries.slice(0, 6).map((e) => (
-                    <div key={e.id} style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0', color: 'var(--theme-elevation-500)' }}>
+                    <div key={e.id} style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0', color: 'var(--theme-elevation-650)' }}>
                       <span>{new Date(e.date).toLocaleDateString(DATE_LOCALE, { day: 'numeric', month: 'short' })}</span>
                       <span title={e.description} style={{ fontWeight: 600, cursor: e.description ? 'help' : 'default' }}>{e.duration}min</span>
                     </div>
@@ -1149,6 +1157,7 @@ const [clientTyping, setClientTyping] = useState(false)
               {addingTag ? (
                 <input
                   className={s.tagInput}
+                  aria-label={t('detail.addTag')}
                   value={newTagValue}
                   onChange={(e) => setNewTagValue(e.target.value)}
                   onKeyDown={(e) => { if (e.key === 'Enter') handleAddTag(); if (e.key === 'Escape') { setAddingTag(false); setNewTagValue('') } }}
@@ -1167,8 +1176,9 @@ const [clientTyping, setClientTyping] = useState(false)
             <div className={s.sideSectionTitle}>{t('detail.billing.title')}</div>
             <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
               <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                <span style={{ fontSize: 12 }}>{t('detail.billing.type')}</span>
+                <label style={{ fontSize: 12 }} htmlFor={billingTypeId}>{t('detail.billing.type')}</label>
                 <select
+                  id={billingTypeId}
                   value={(ticket as any)?.billingType || 'hourly'}
                   onChange={async (e) => {
                     try {
@@ -1188,9 +1198,10 @@ const [clientTyping, setClientTyping] = useState(false)
               </div>
               {(ticket as any)?.billingType === 'flat' && (
                 <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                  <span style={{ fontSize: 12 }}>{t('detail.billing.flatAmount')}</span>
+                  <label style={{ fontSize: 12 }} htmlFor={flatAmountId}>{t('detail.billing.flatAmount')}</label>
                   <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                     <input
+                      id={flatAmountId}
                       type="number"
                       defaultValue={(ticket as any)?.flatRateAmount ?? ''}
                       placeholder="0"
@@ -1212,9 +1223,10 @@ const [clientTyping, setClientTyping] = useState(false)
                 </div>
               )}
               <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                <span style={{ fontSize: 12 }}>{t('detail.billing.billedAmount')}</span>
+                <label style={{ fontSize: 12 }} htmlFor={billedAmountId}>{t('detail.billing.billedAmount')}</label>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                   <input
+                    id={billedAmountId}
                     type="number"
                     defaultValue={(ticket as any)?.billedAmount ?? ''}
                     placeholder="0"
@@ -1235,8 +1247,9 @@ const [clientTyping, setClientTyping] = useState(false)
                 </div>
               </div>
               <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                <span style={{ fontSize: 12 }}>{t('detail.billing.payment')}</span>
+                <label style={{ fontSize: 12 }} htmlFor={paymentStatusId}>{t('detail.billing.payment')}</label>
                 <select
+                  id={paymentStatusId}
                   value={(ticket as any)?.paymentStatus || 'unpaid'}
                   onChange={async (e) => {
                     try {
@@ -1358,6 +1371,7 @@ const [clientTyping, setClientTyping] = useState(false)
             <div className={s.splitPreview}>{splitModal.preview}</div>
             <input
               className={s.splitInput}
+              aria-label={t('detail.split.subjectLabel')}
               value={splitSubject}
               onChange={(e) => setSplitSubject(e.target.value)}
               onKeyDown={(e) => { if (e.key === 'Enter') handleSplitConfirm() }}

package/src/views/TicketInboxView/client.tsx

@@ -31,6 +31,9 @@ interface Ticket {
 
 type Tab = 'all' | 'open' | 'waiting_client' | 'resolved' | 'sla_breach'
 
+// Single id: this view is a full admin route, mounted once.
+const INBOX_TABPANEL_ID = 'inbox-tabpanel'
+
 const PRIORITY_COLORS: Record<string, string> = {
   urgent: 'var(--theme-error-500)',
   high: 'var(--theme-warning-500)',
@@ -239,6 +242,7 @@ export const TicketInboxClient: React.FC = () => {
             <input
               type="text"
               className={s.searchInput}
+              aria-label={t('inbox.searchLabel')}
               placeholder={t('inbox.searchPlaceholder')}
               value={search}
               onChange={(e) => setSearch(e.target.value)}
@@ -250,14 +254,48 @@ export const TicketInboxClient: React.FC = () => {
       </div>
 
       {/* Tabs */}
-      <div className={s.tabs} role="tablist">
+      {/*
+        A tablist is ONE tab stop: the inactive tabs carry `tabIndex={-1}` and
+        the arrow keys move between them. That is the ARIA pattern, but the
+        roving tabIndex is only half of it — without this handler the four
+        inactive tabs are simply unreachable from the keyboard, which is worse
+        than the plain tab order it replaced.
+      */}
+      <div
+        className={s.tabs}
+        role="tablist"
+        aria-label={t('inbox.tabsLabel')}
+        onKeyDown={(e) => {
+          const keys = ['ArrowLeft', 'ArrowRight', 'Home', 'End']
+          if (!keys.includes(e.key)) return
+          e.preventDefault()
+          const i = tabs.findIndex((tk) => tk.key === tab)
+          const next =
+            e.key === 'Home' ? 0
+            : e.key === 'End' ? tabs.length - 1
+            : e.key === 'ArrowLeft' ? (i - 1 + tabs.length) % tabs.length
+            : (i + 1) % tabs.length
+          const target = tabs[next]
+          if (!target) return
+          setTab(target.key)
+          setSelectedIdx(-1)
+          // Focus follows selection, as the pattern expects for an
+          // automatically-activated tablist.
+          document.getElementById(`inbox-tab-${target.key}`)?.focus()
+        }}
+      >
         {tabs.map((tk) => {
           const isAlert = tk.alert && tk.count > 0
           return (
             <button
               key={tk.key}
+              type="button"
               role="tab"
+              id={`inbox-tab-${tk.key}`}
               aria-selected={tab === tk.key}
+              aria-controls={INBOX_TABPANEL_ID}
+              // Roving tabindex: a tablist is one tab stop, arrows move inside.
+              tabIndex={tab === tk.key ? 0 : -1}
               className={`${s.tab} ${tab === tk.key ? s.tabActive : ''} ${isAlert ? s.tabAlert : ''}`}
               onClick={() => { setTab(tk.key); setSelectedIdx(-1) }}
             >
@@ -273,17 +311,17 @@ export const TicketInboxClient: React.FC = () => {
         {checkedIds.size > 0 ? (
           <div style={{ display: 'flex', gap: 8, alignItems: 'center', flex: 1 }}>
             <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--theme-text)' }}>{checkedIds.size > 1 ? t('inbox.selectedPlural', { count: String(checkedIds.size) }) : t('inbox.selected', { count: String(checkedIds.size) })}</span>
-            <button className={s.sortSelect} onClick={() => handleBulkAction('close')} disabled={bulkProcessing}>{t('inbox.closeAction')}</button>
-            <button className={s.sortSelect} onClick={() => handleBulkAction('reopen')} disabled={bulkProcessing}>{t('inbox.reopenAction')}</button>
-            <select className={s.sortSelect} value={bulkAction} onChange={(e) => { if (e.target.value) handleBulkAction(e.target.value); setBulkAction('') }}>
+            <button type="button" className={s.sortSelect} onClick={() => handleBulkAction('close')} disabled={bulkProcessing}>{t('inbox.closeAction')}</button>
+            <button type="button" className={s.sortSelect} onClick={() => handleBulkAction('reopen')} disabled={bulkProcessing}>{t('inbox.reopenAction')}</button>
+            <select className={s.sortSelect} aria-label={t('inbox.moreActions')} value={bulkAction} onChange={(e) => { if (e.target.value) handleBulkAction(e.target.value); setBulkAction('') }}>
               <option value="">{t('inbox.moreActions')}</option>
               <option value="set_priority">{t('inbox.changePriority')}</option>
               <option value="delete">{t('inbox.deleteAction')}</option>
             </select>
-            <button className={s.sortSelect} onClick={() => setCheckedIds(new Set())} style={{ marginLeft: 'auto' }}>{t('inbox.deselect')}</button>
+            <button type="button" className={s.sortSelect} onClick={() => setCheckedIds(new Set())} style={{ marginLeft: 'auto' }}>{t('inbox.deselect')}</button>
           </div>
         ) : (
-          <select className={s.sortSelect} value={sort} onChange={(e) => setSort(e.target.value)}>
+          <select className={s.sortSelect} aria-label={t('inbox.sortLabel')} value={sort} onChange={(e) => setSort(e.target.value)}>
             <option value="-updatedAt">{t('inbox.sort.newest')}</option>
             <option value="updatedAt">{t('inbox.sort.oldest')}</option>
             <option value="-createdAt">{t('inbox.sort.created')}</option>
@@ -292,7 +330,8 @@ export const TicketInboxClient: React.FC = () => {
         )}
       </div>
 
-      {/* List */}
+      {/* List — the panel the tablist above controls */}
+      <div role="tabpanel" id={INBOX_TABPANEL_ID} aria-labelledby={`inbox-tab-${tab}`}>
       {loading ? (
         <div className={s.loading}>{t('common.loading')}</div>
       ) : tickets.length === 0 ? (
@@ -361,6 +400,7 @@ export const TicketInboxClient: React.FC = () => {
           })}
         </div>
       )}
+      </div>
 
       {/* Keyboard hints */}
       <div className={s.keyboardHints}>

package/src/views/TicketingSettingsView/TicketingSettings.module.scss

@@ -70,7 +70,7 @@
 
 .sectionDescription {
   font-size: 0.8125rem;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin: 0 0 1rem;
   line-height: 1.5;
 }
@@ -143,7 +143,7 @@
 
 .featureDesc {
   font-size: 0.75rem;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin-top: 0.125rem;
 }
 
@@ -166,7 +166,7 @@
 
 .fieldDescription {
   font-size: 0.75rem;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   font-weight: 400;
   margin-top: 0.125rem;
 }
@@ -194,7 +194,7 @@
 .inputReadonly {
   composes: input;
   background: var(--theme-elevation-50);
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   cursor: not-allowed;
 }
 
@@ -230,7 +230,7 @@
 
 .inlineDesc {
   font-size: 0.75rem;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin-top: 0.125rem;
 }
 
@@ -244,7 +244,7 @@
 
 .slaHint {
   font-size: 0.75rem;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
 }
 
 // ── API Key ───────────────────────────────────
@@ -290,7 +290,7 @@
 .aiToggleDesc {
   display: block;
   font-size: 0.6875rem;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
 }
 
 // ── Signature ─────────────────────────────────