@consilioweb/payload-support 5.0.0 → 6.0.0

package/dist/styles/TicketDetail.module.scss

@@ -52,7 +52,7 @@
   font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
   font-size: 12px;
   font-weight: 400;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -64,7 +64,7 @@
 
   > .ticketNumberCat,
   > .ticketNumberSource {
-    color: var(--theme-text-tertiary, var(--theme-elevation-500));
+    color: var(--theme-text-tertiary, var(--theme-elevation-650));
     display: inline-flex;
     align-items: center;
     gap: 4px;
@@ -194,7 +194,7 @@
   text-transform: uppercase;
   letter-spacing: 0.08em;
   line-height: 1.3;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   margin: 0 0 12px;
   display: flex;
   justify-content: space-between;
@@ -353,7 +353,7 @@
   font-size: 11px;
   font-weight: 500;
   line-height: 1.3;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   white-space: nowrap;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -450,7 +450,7 @@
   font-size: 11px;
   font-weight: 500;
   line-height: 1.3;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
 }
 
 // Pills "Interne" / "Solution" — pill style, 22px height
@@ -499,7 +499,7 @@
   margin-top: 4px;
   font-size: 11px;
   font-weight: 500;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   opacity: 0;
   transition: opacity 80ms ease;
 }
@@ -514,7 +514,7 @@
   font-size: 11px;
   font-weight: 500;
   line-height: 1.3;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   display: inline-flex;
   align-items: center;
   height: auto;
@@ -749,7 +749,7 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   font-size: 11px;
   font-weight: 500;
   margin-left: auto;
@@ -910,7 +910,7 @@
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   font-size: 13px;
   font-weight: 600;
   padding: 0;
@@ -941,7 +941,7 @@
 
 .activityContent { flex: 1; min-width: 0; }
 .activityText { font-weight: 500; color: var(--theme-text); font-size: 12px; }
-.activityTime { font-size: 11px; color: var(--theme-elevation-500); margin-top: 1px; }
+.activityTime { font-size: 11px; color: var(--theme-elevation-650); margin-top: 1px; }
 
 // ─── DROPDOWN ───
 .dropdown { position: relative; display: inline-block; }
@@ -1055,7 +1055,7 @@
 
 .splitPreview {
   font-size: 12px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin: 0 0 16px;
   line-height: 1.5;
   max-height: 80px;
@@ -1092,7 +1092,7 @@
   background: none;
   font-size: 13px;
   font-weight: 600;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   cursor: pointer;
   &:hover { background: var(--theme-elevation-100); }
 }
@@ -1145,7 +1145,7 @@
   cursor: pointer;
   font-size: 11px;
   line-height: 1;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   padding: 0;
   display: inline-flex;
   align-items: center;
@@ -1166,7 +1166,7 @@
   font-size: 11px;
   font-weight: 500;
   line-height: 1;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   cursor: pointer;
   transition: border-color 80ms ease, color 80ms ease;
   &:hover {
@@ -1607,7 +1607,7 @@
   align-items: center;
   gap: 6px;
   font-size: 10px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
 }
 
 .previousTicketsStatus {
@@ -1755,7 +1755,7 @@
   text-transform: uppercase;
   letter-spacing: 0.08em;
   line-height: 1.3;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   margin: 12px 0 8px;
 }
 .aiCardNextActions {
@@ -1805,13 +1805,13 @@
 }
 .aiCardNextLabelDone {
   text-decoration: line-through;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
 }
 .aiCardNextWhen {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.3;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   flex-shrink: 0;
 }
 
@@ -1856,12 +1856,12 @@
   margin: 0 2px;
 }
 .ticketNumberCat {
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
   font-weight: 400;
 }
 .ticketNumberSource {
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
   display: inline-flex;
   align-items: center;

package/dist/styles/TicketInbox.module.scss

@@ -26,7 +26,7 @@
 
 .subtitle {
   font-size: 13px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin: 2px 0 0;
 }
 
@@ -125,7 +125,7 @@
   padding: 0 12px;
   font-size: 13px;
   font-weight: 500;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   background: none;
   border: none;
   border-radius: 6px;
@@ -155,7 +155,7 @@
   padding: 0 6px;
   font-size: 11px;
   font-weight: 600;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   background: var(--theme-elevation-200);
   border-radius: 999px;
 }
@@ -179,7 +179,7 @@
 .sortSelect {
   font-size: 12px;
   font-weight: 600;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   background: none;
   border: none;
   cursor: pointer;
@@ -268,7 +268,7 @@
 
 .client {
   font-size: 12px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -333,7 +333,7 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   font-size: 11px;
   font-weight: 500;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   display: flex;
   gap: 12px;
   z-index: 10;

package/dist/styles/TicketingSettings.module.scss

@@ -15,7 +15,7 @@ $green: #16a34a;
 
 .intro {
   font-size: 13px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin: 0 0 24px;
   line-height: 1.6;
 }
@@ -59,7 +59,7 @@ $green: #16a34a;
 
 .sectionChevron {
   font-size: 16px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   transition: transform 150ms;
 
   &.open {
@@ -73,7 +73,7 @@ $green: #16a34a;
 
 .sectionDescription {
   font-size: 12px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin: 0 0 16px;
   line-height: 1.5;
 }
@@ -97,7 +97,7 @@ $green: #16a34a;
 
 .fieldDescription {
   font-size: 11px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   font-weight: 400;
   margin-top: 2px;
 }
@@ -131,7 +131,7 @@ $green: #16a34a;
   border-radius: 6px;
   border: 1px solid var(--theme-elevation-300);
   font-size: 13px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   background-color: var(--theme-elevation-100);
   width: 100%;
   max-width: 400px;
@@ -179,7 +179,7 @@ $green: #16a34a;
 
 .inlineDesc {
   font-size: 12px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
 }
 
 // ─── BADGE ───
@@ -251,7 +251,7 @@ $green: #16a34a;
 
 .featureDesc {
   font-size: 12px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   line-height: 1.4;
 }
 
@@ -271,7 +271,7 @@ $green: #16a34a;
 
 .aiToggleDesc {
   font-size: 12px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin-left: 8px;
 }
 
@@ -290,7 +290,7 @@ $green: #16a34a;
   background-color: transparent;
   cursor: pointer;
   font-size: 12px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   white-space: nowrap;
 }
 
@@ -303,7 +303,7 @@ $green: #16a34a;
 
 .slaHint {
   font-size: 12px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
 }
 
 // ─── AI SUB FEATURES LABEL ───

package/dist/styles/TimeDashboard.module.scss

@@ -28,7 +28,7 @@
 }
 
 .subtitle {
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin: 4px 0 0;
   font-size: 14px;
 }
@@ -80,7 +80,7 @@
 .label {
   font-size: 11px;
   font-weight: 700;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin-bottom: 3px;
 }
 
@@ -146,7 +146,7 @@
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
 }
 
 .kpiValue {
@@ -201,7 +201,7 @@
   border: 1px solid var(--theme-elevation-300);
   border-radius: 8px;
   background: var(--theme-elevation-100);
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   font-size: 14px;
 }
 
@@ -257,13 +257,13 @@
 
 .tdSubject {
   padding: 6px 8px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   font-size: 12px;
 }
 
 .tdDescription {
   padding: 6px 8px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   font-size: 12px;
 }
 

package/dist/styles/_tokens.scss

@@ -1,6 +1,8 @@
 // Design tokens — based on Payload CMS CSS variables
 $text: var(--theme-text);
-$text-secondary: var(--theme-elevation-500);
+// elevation-650, not 500: Payload's dark theme skips the 500 step, leaving it
+// at rgb(128,128,128) — 3.62:1 light / 4.03:1 dark, below WCAG AA in both.
+$text-secondary: var(--theme-elevation-650);
 $text-muted: var(--theme-elevation-400);
 $bg: var(--theme-elevation-50);
 $bg-card: var(--theme-elevation-100);

package/dist/views/BillingView/client.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useState, useCallback } from 'react';
+import React, { useId, useState, useCallback } from 'react';
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation.js';
 import { DATE_LOCALE } from '../shared/dateLocale.js';
 import styles from '../../styles/BillingView.module.scss';
@@ -42,6 +42,10 @@ function getQuarterRange(offset) {
 }
 const BillingClient = () => {
   const { t } = useTranslation();
+  const fromId = useId();
+  const toId = useId();
+  const projectFilterId = useId();
+  const rateId = useId();
   const [from, setFrom] = useState(() => getMonthRange(0).from);
   const [to, setTo] = useState(() => getMonthRange(0).to);
   const [projectId, setProjectId] = useState("");
@@ -218,26 +222,27 @@ const BillingClient = () => {
       ] }),
       /* @__PURE__ */ jsxs("div", { className: styles.filterRow, children: [
         /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
-          /* @__PURE__ */ jsx("label", { className: styles.label, children: t("billing.filters.from") }),
-          /* @__PURE__ */ jsx("input", { type: "date", value: from, onChange: (e) => setFrom(e.target.value), className: styles.input })
+          /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: fromId, children: t("billing.filters.from") }),
+          /* @__PURE__ */ jsx("input", { id: fromId, type: "date", value: from, onChange: (e) => setFrom(e.target.value), className: styles.input })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
-          /* @__PURE__ */ jsx("label", { className: styles.label, children: t("billing.filters.to") }),
-          /* @__PURE__ */ jsx("input", { type: "date", value: to, onChange: (e) => setTo(e.target.value), className: styles.input })
+          /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: toId, children: t("billing.filters.to") }),
+          /* @__PURE__ */ jsx("input", { id: toId, type: "date", value: to, onChange: (e) => setTo(e.target.value), className: styles.input })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
-          /* @__PURE__ */ jsx("label", { className: styles.label, children: t("billing.filters.project") }),
-          /* @__PURE__ */ jsxs("select", { value: projectId, onChange: (e) => setProjectId(e.target.value), className: styles.select, children: [
+          /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: projectFilterId, children: t("billing.filters.project") }),
+          /* @__PURE__ */ jsxs("select", { id: projectFilterId, value: projectId, onChange: (e) => setProjectId(e.target.value), className: styles.select, children: [
             /* @__PURE__ */ jsx("option", { value: "", children: t("ticket.allProjects") }),
             projects.map((p) => /* @__PURE__ */ jsx("option", { value: p.id, children: p.name }, p.id))
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
-          /* @__PURE__ */ jsx("label", { className: styles.label, children: t("billing.filters.hourlyRate") }),
+          /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: rateId, children: t("billing.filters.hourlyRate") }),
           /* @__PURE__ */ jsxs("div", { className: styles.rateRow, children: [
             /* @__PURE__ */ jsx(
               "input",
               {
+                id: rateId,
                 type: "number",
                 value: rate,
                 onChange: (e) => setRate(Number(e.target.value)),
@@ -293,6 +298,7 @@ const BillingClient = () => {
                 "input",
                 {
                   type: "checkbox",
+                  "aria-label": t("billing.tableCheckboxTitle"),
                   checked: group.tickets.every((t2) => billedTickets.has(t2.id)),
                   onChange: () => {
                     const ids = group.tickets.map((t2) => t2.id);
@@ -326,6 +332,7 @@ const BillingClient = () => {
                   "input",
                   {
                     type: "checkbox",
+                    "aria-label": isBilled ? t("billing.markUnbilledTitle") : t("billing.markBilledTitle"),
                     checked: isBilled,
                     onChange: () => toggleBilled(ticket.id),
                     className: styles.checkbox,

package/dist/views/ChatView/client.js

@@ -252,6 +252,7 @@ const ChatViewClient = () => {
           cannedResponses.length > 0 && /* @__PURE__ */ jsxs(
             "select",
             {
+              "aria-label": t("chat.quickReply"),
               onChange: (e) => {
                 const cr = cannedResponses.find((c) => String(c.id) === e.target.value);
                 if (cr) setInput(cr.body);
@@ -269,6 +270,7 @@ const ChatViewClient = () => {
               "input",
               {
                 type: "text",
+                "aria-label": t("chat.inputPlaceholder"),
                 value: input,
                 onChange: (e) => setInput(e.target.value),
                 placeholder: t("chat.inputPlaceholder"),

package/dist/views/CrmView/client.js

@@ -211,6 +211,7 @@ Cette action est irr\xE9versible.`)) return;
           "input",
           {
             type: "text",
+            "aria-label": t("crm.searchLabel"),
             placeholder: t("crm.searchPlaceholder"),
             value: search,
             onChange: (e) => setSearch(e.target.value),
@@ -295,6 +296,7 @@ Cette action est irr\xE9versible.`)) return;
             "input",
             {
               type: "text",
+              "aria-label": t("crm.mergeTitle"),
               value: mergeSearch,
               onChange: (e) => setMergeSearch(e.target.value),
               placeholder: t("crm.mergeSearchPlaceholder"),

package/dist/views/EmailTrackingView/client.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useState, useCallback, useEffect } from 'react';
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation.js';
+import { V } from '../shared/adminTokens.js';
 import { DATE_LOCALE } from '../shared/dateLocale.js';
 import s from '../../styles/EmailTracking.module.scss';
 
@@ -107,7 +108,7 @@ const EmailTrackingClient = () => {
         v,
         "j"
       ] }, v)) }),
-      /* @__PURE__ */ jsx("input", { type: "text", className: s.searchInput, placeholder: t("emailTracking.searchPlaceholder"), value: search, onChange: (e) => setSearch(e.target.value) })
+      /* @__PURE__ */ jsx("input", { type: "text", className: s.searchInput, "aria-label": t("emailTracking.searchLabel"), placeholder: t("emailTracking.searchPlaceholder"), value: search, onChange: (e) => setSearch(e.target.value) })
     ] }),
     logs.length === 0 ? /* @__PURE__ */ jsx("div", { className: s.empty, children: t("emailTracking.noLogs") }) : /* @__PURE__ */ jsxs("table", { className: s.table, children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
@@ -120,7 +121,7 @@ const EmailTrackingClient = () => {
         /* @__PURE__ */ jsx("th", { style: { textAlign: "right" }, children: t("emailTracking.tableHeaders.time") })
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: logs.map((log) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-        /* @__PURE__ */ jsxs("tr", { onClick: () => log.status === "error" && log.errorMessage ? setExpandedRow(expandedRow === log.id ? null : log.id) : null, style: { cursor: log.status === "error" && log.errorMessage ? "pointer" : "default" }, children: [
+        /* @__PURE__ */ jsxs("tr", { children: [
           /* @__PURE__ */ jsx("td", { style: { fontSize: 12, whiteSpace: "nowrap" }, children: fmtDate(log.createdAt) }),
           /* @__PURE__ */ jsx("td", { style: { maxWidth: 200, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, title: log.recipientEmail, children: log.recipientEmail || "\u2014" }),
           /* @__PURE__ */ jsx("td", { style: { maxWidth: 250, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, title: log.subject, children: log.subject || "\u2014" }),
@@ -132,14 +133,25 @@ const EmailTrackingClient = () => {
               log.processingTimeMs,
               "ms"
             ] }) : "\u2014",
-            log.status === "error" && log.errorMessage && /* @__PURE__ */ jsx("button", { className: s.expandBtn, onClick: (e) => {
-              e.stopPropagation();
-              setExpandedRow(expandedRow === log.id ? null : log.id);
-            }, children: expandedRow === log.id ? "\u25B4" : "\u25BE" })
+            log.status === "error" && log.errorMessage && /* 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. */
+            /* @__PURE__ */ jsx(
+              "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),
+                children: expandedRow === log.id ? "\u25B4" : "\u25BE"
+              }
+            )
           ] })
         ] }),
-        expandedRow === log.id && log.errorMessage && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxs("div", { className: s.errorDetail, children: [
-          "Erreur",
+        expandedRow === log.id && log.errorMessage && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxs("div", { className: s.errorDetail, id: `email-error-${log.id}`, children: [
+          t("emailTracking.errorLabel"),
           log.httpStatus ? ` (HTTP ${log.httpStatus})` : "",
           ": ",
           log.errorMessage
@@ -147,8 +159,8 @@ const EmailTrackingClient = () => {
       ] }, log.id)) })
     ] }),
     totalDocs > 0 && /* @__PURE__ */ jsxs("div", { className: s.pagination, children: [
-      /* @__PURE__ */ jsx("button", { className: s.pageBtn, onClick: () => setPage((p) => Math.max(1, p - 1)), disabled: page <= 1, children: t("common.previous") }),
-      /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--theme-elevation-500)", alignSelf: "center" }, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: s.pageBtn, onClick: () => setPage((p) => Math.max(1, p - 1)), disabled: page <= 1, children: t("common.previous") }),
+      /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: V.textSecondary, alignSelf: "center" }, children: [
         t("common.page"),
         " ",
         page,
@@ -157,7 +169,7 @@ const EmailTrackingClient = () => {
         " ",
         t("common.results")
       ] }),
-      /* @__PURE__ */ jsx("button", { className: s.pageBtn, onClick: () => setPage((p) => p + 1), disabled: !hasMore, children: t("common.next") })
+      /* @__PURE__ */ jsx("button", { type: "button", className: s.pageBtn, onClick: () => setPage((p) => p + 1), disabled: !hasMore, children: t("common.next") })
     ] })
   ] });
 };

package/dist/views/ImportConversationView/client.js

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

package/dist/views/LogsView/client.js

@@ -99,7 +99,7 @@ const LogsClient = () => {
         }, children: log.status === "success" ? t("logs.statusSuccess") : log.status === "error" ? t("logs.statusError") : t("logs.statusIgnored") }) }),
         /* @__PURE__ */ jsx("td", { className: s.truncate, title: log.recipientEmail, children: log.recipientEmail || "\u2014" }),
         /* @__PURE__ */ jsx("td", { className: s.truncate, title: log.subject, children: log.subject || "\u2014" }),
-        /* @__PURE__ */ jsx("td", { style: { fontSize: 12, color: "var(--theme-elevation-500)" }, children: log.action || "\u2014" }),
+        /* @__PURE__ */ jsx("td", { style: { fontSize: 12, color: "var(--theme-elevation-650)" }, children: log.action || "\u2014" }),
         /* @__PURE__ */ jsx("td", { style: { textAlign: "right" }, children: log.processingTimeMs != null ? /* @__PURE__ */ jsxs("span", { className: s.mono, style: { color: log.processingTimeMs > 2e3 ? "#dc2626" : log.processingTimeMs > 500 ? "#d97706" : "#16a34a" }, children: [
           log.processingTimeMs,
           "ms"

package/dist/views/NewTicketView/client.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useId, useState, useEffect } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation.js';
@@ -22,6 +22,12 @@ const PRIORITY_KEYS = [
 ];
 const NewTicketClient = () => {
   const { t } = useTranslation();
+  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("");
@@ -121,7 +127,7 @@ const NewTicketClient = () => {
     error && /* @__PURE__ */ jsx("div", { className: s.error, children: error }),
     /* @__PURE__ */ jsxs("form", { className: s.form, onSubmit: handleSubmit, children: [
       /* @__PURE__ */ jsxs("div", { className: s.fieldGroup, children: [
-        /* @__PURE__ */ jsxs("label", { className: s.label, children: [
+        /* @__PURE__ */ jsxs("label", { className: s.label, htmlFor: clientSearchId, children: [
           t("newTicket.clientLabel"),
           " ",
           /* @__PURE__ */ jsx("span", { className: s.required, children: "*" })
@@ -134,7 +140,7 @@ const NewTicketClient = () => {
             " \u2014 ",
             selectedClient.company
           ] }),
-          /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--theme-elevation-500)" }, children: selectedClient.email }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--theme-elevation-650)" }, children: selectedClient.email }),
           /* @__PURE__ */ jsx("button", { type: "button", onClick: () => {
             setSelectedClient(null);
             setClientId(null);
@@ -144,6 +150,7 @@ const NewTicketClient = () => {
           /* @__PURE__ */ jsx(
             "input",
             {
+              id: clientSearchId,
               type: "text",
               className: s.input,
               placeholder: t("newTicket.clientSearchPlaceholder"),
@@ -171,33 +178,33 @@ const NewTicketClient = () => {
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: s.fieldGroup, children: [
-        /* @__PURE__ */ jsxs("label", { className: s.label, children: [
+        /* @__PURE__ */ jsxs("label", { className: s.label, htmlFor: subjectId, children: [
           t("newTicket.subjectLabel"),
           " ",
           /* @__PURE__ */ jsx("span", { className: s.required, children: "*" })
         ] }),
-        /* @__PURE__ */ jsx("input", { type: "text", className: s.input, placeholder: t("newTicket.subjectPlaceholder"), value: subject, onChange: (e) => setSubject(e.target.value) })
+        /* @__PURE__ */ jsx("input", { id: subjectId, type: "text", className: s.input, placeholder: t("newTicket.subjectPlaceholder"), value: subject, onChange: (e) => setSubject(e.target.value) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: s.row3, children: [
         /* @__PURE__ */ jsxs("div", { className: s.fieldGroup, children: [
-          /* @__PURE__ */ jsx("label", { className: s.label, children: t("newTicket.categoryLabel") }),
-          /* @__PURE__ */ jsx("select", { className: s.select, value: category, onChange: (e) => setCategory(e.target.value), children: CATEGORY_KEYS.map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: t(c.key) }, c.value)) })
+          /* @__PURE__ */ jsx("label", { className: s.label, htmlFor: categoryId, children: t("newTicket.categoryLabel") }),
+          /* @__PURE__ */ jsx("select", { id: categoryId, className: s.select, value: category, onChange: (e) => setCategory(e.target.value), children: CATEGORY_KEYS.map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: t(c.key) }, c.value)) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: s.fieldGroup, children: [
-          /* @__PURE__ */ jsx("label", { className: s.label, children: t("newTicket.priorityLabel") }),
-          /* @__PURE__ */ jsx("select", { className: s.select, value: priority, onChange: (e) => setPriority(e.target.value), children: PRIORITY_KEYS.map((p) => /* @__PURE__ */ jsx("option", { value: p.value, children: t(p.key) }, p.value)) })
+          /* @__PURE__ */ jsx("label", { className: s.label, htmlFor: priorityId, children: t("newTicket.priorityLabel") }),
+          /* @__PURE__ */ jsx("select", { id: priorityId, className: s.select, value: priority, onChange: (e) => setPriority(e.target.value), children: PRIORITY_KEYS.map((p) => /* @__PURE__ */ jsx("option", { value: p.value, children: t(p.key) }, p.value)) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: s.fieldGroup, children: [
-          /* @__PURE__ */ jsx("label", { className: s.label, children: t("newTicket.projectLabel") }),
-          /* @__PURE__ */ jsxs("select", { className: s.select, value: projectId || "", onChange: (e) => setProjectId(e.target.value ? Number(e.target.value) : null), children: [
+          /* @__PURE__ */ jsx("label", { className: s.label, htmlFor: projectId_, children: t("newTicket.projectLabel") }),
+          /* @__PURE__ */ jsxs("select", { id: projectId_, className: s.select, value: projectId || "", onChange: (e) => setProjectId(e.target.value ? Number(e.target.value) : null), children: [
             /* @__PURE__ */ jsx("option", { value: "", children: t("newTicket.noProject") }),
             projects.map((p) => /* @__PURE__ */ jsx("option", { value: p.id, children: p.name }, p.id))
           ] })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: s.fieldGroup, children: [
-        /* @__PURE__ */ jsx("label", { className: s.label, children: t("newTicket.descriptionLabel") }),
-        /* @__PURE__ */ jsx("textarea", { className: s.textarea, placeholder: t("newTicket.descriptionPlaceholder"), value: description, onChange: (e) => setDescription(e.target.value) })
+        /* @__PURE__ */ jsx("label", { className: s.label, htmlFor: descriptionId, children: t("newTicket.descriptionLabel") }),
+        /* @__PURE__ */ jsx("textarea", { id: descriptionId, className: s.textarea, placeholder: t("newTicket.descriptionPlaceholder"), value: description, onChange: (e) => setDescription(e.target.value) })
       ] }),
       /* @__PURE__ */ jsx("button", { type: "submit", className: s.submitBtn, disabled: submitting, children: submitting ? t("newTicket.submitting") : t("newTicket.submitButton") })
     ] })