@consilioweb/payload-support 5.0.0 → 6.0.0

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>

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 ─────────────────────────────────