origam 2.18.4 → 2.18.6

package/dist/src/assets/css/tokens/dark.css

@@ -2064,7 +2064,7 @@
   --origam-picker---z-index: var(--origam-zIndex---dropdown);
   --origam-picker---transition-duration: var(--origam-motion__duration---medium);
   --origam-picker---transition-timing-function: var(--origam-motion__easing---standard);
-  --origam-picker-title---color: var(--origam-color__text---secondary);
+  --origam-picker-title---color: currentColor;
   --origam-picker-title---font-size: 0.75rem;
   --origam-picker-title---font-weight: 400;
   --origam-picker-title---letter-spacing: 0.1667em;
@@ -2833,11 +2833,11 @@
   --origam-chart-range-selector__btn---font-size: var(--origam-font__size---sm);
   --origam-chart-range-selector__btn--hover---background-color: rgba(0, 0, 0, 0.06);
   --origam-chart-range-selector__btn--hover---color: #111827;
-  --origam-chart-range-selector__btn--active---background-color: #3b82f6;
+  --origam-chart-range-selector__btn--active---background-color: var(--origam-color__action--primary---bg);
   --origam-chart-range-selector__btn--active---border-color: rgba(0, 0, 0, 0);
-  --origam-chart-range-selector__btn--active---color: var(--origam-color---white);
-  --origam-chart-range-selector__btn--active--hover---background-color: #2563eb;
-  --origam-chart-range-selector__btn--active--hover---color: var(--origam-color---white);
+  --origam-chart-range-selector__btn--active---color: var(--origam-color__action--primary---fg);
+  --origam-chart-range-selector__btn--active--hover---background-color: var(--origam-color__action--primary---bgHover);
+  --origam-chart-range-selector__btn--active--hover---color: var(--origam-color__action--primary---fg);
   --origam-chart-sparkline__bar---border-radius: 1;
   --origam-chart-sparkline__marker-min---stroke: rgba(0, 0, 0, 0);
   --origam-chart-sparkline__marker-max---stroke: rgba(0, 0, 0, 0);
@@ -4800,7 +4800,7 @@
     --origam-picker---z-index: var(--origam-zIndex---dropdown);
     --origam-picker---transition-duration: var(--origam-motion__duration---medium);
     --origam-picker---transition-timing-function: var(--origam-motion__easing---standard);
-    --origam-picker-title---color: var(--origam-color__text---secondary);
+    --origam-picker-title---color: currentColor;
     --origam-picker-title---font-size: 0.75rem;
     --origam-picker-title---font-weight: 400;
     --origam-picker-title---letter-spacing: 0.1667em;
@@ -5569,11 +5569,11 @@
     --origam-chart-range-selector__btn---font-size: var(--origam-font__size---sm);
     --origam-chart-range-selector__btn--hover---background-color: rgba(0, 0, 0, 0.06);
     --origam-chart-range-selector__btn--hover---color: #111827;
-    --origam-chart-range-selector__btn--active---background-color: #3b82f6;
+    --origam-chart-range-selector__btn--active---background-color: var(--origam-color__action--primary---bg);
     --origam-chart-range-selector__btn--active---border-color: rgba(0, 0, 0, 0);
-    --origam-chart-range-selector__btn--active---color: var(--origam-color---white);
-    --origam-chart-range-selector__btn--active--hover---background-color: #2563eb;
-    --origam-chart-range-selector__btn--active--hover---color: var(--origam-color---white);
+    --origam-chart-range-selector__btn--active---color: var(--origam-color__action--primary---fg);
+    --origam-chart-range-selector__btn--active--hover---background-color: var(--origam-color__action--primary---bgHover);
+    --origam-chart-range-selector__btn--active--hover---color: var(--origam-color__action--primary---fg);
     --origam-chart-sparkline__bar---border-radius: 1;
     --origam-chart-sparkline__marker-min---stroke: rgba(0, 0, 0, 0);
     --origam-chart-sparkline__marker-max---stroke: rgba(0, 0, 0, 0);

package/dist/src/assets/css/tokens/light.css

@@ -1968,7 +1968,7 @@
   --origam-picker---z-index: var(--origam-zIndex---dropdown);
   --origam-picker---transition-duration: var(--origam-motion__duration---medium);
   --origam-picker---transition-timing-function: var(--origam-motion__easing---standard);
-  --origam-picker-title---color: var(--origam-color__text---secondary);
+  --origam-picker-title---color: currentColor;
   --origam-picker-title---font-size: 0.75rem;
   --origam-picker-title---font-weight: 400;
   --origam-picker-title---letter-spacing: 0.1667em;
@@ -2737,11 +2737,11 @@
   --origam-chart-range-selector__btn---font-size: var(--origam-font__size---sm);
   --origam-chart-range-selector__btn--hover---background-color: rgba(0, 0, 0, 0.06);
   --origam-chart-range-selector__btn--hover---color: #111827;
-  --origam-chart-range-selector__btn--active---background-color: #3b82f6;
+  --origam-chart-range-selector__btn--active---background-color: var(--origam-color__action--primary---bg);
   --origam-chart-range-selector__btn--active---border-color: rgba(0, 0, 0, 0);
-  --origam-chart-range-selector__btn--active---color: var(--origam-color---white);
-  --origam-chart-range-selector__btn--active--hover---background-color: #2563eb;
-  --origam-chart-range-selector__btn--active--hover---color: var(--origam-color---white);
+  --origam-chart-range-selector__btn--active---color: var(--origam-color__action--primary---fg);
+  --origam-chart-range-selector__btn--active--hover---background-color: var(--origam-color__action--primary---bgHover);
+  --origam-chart-range-selector__btn--active--hover---color: var(--origam-color__action--primary---fg);
   --origam-chart-sparkline__bar---border-radius: 1;
   --origam-chart-sparkline__marker-min---stroke: rgba(0, 0, 0, 0);
   --origam-chart-sparkline__marker-max---stroke: rgba(0, 0, 0, 0);

package/dist/src/assets/css/tokens/origam-utilities.css

@@ -23,22 +23,40 @@
 /* import below the component layer.                         */
 
 /* ── Foreground color (intent) ───────────────────────────────── */
-.origam--color-primary { color: var(--origam-color__action--primary---fg); }
+/*                                                                */
+/* The intent's own colour, AS TEXT, on a neutral surface. These  */
+/* MUST mirror `tokenForegroundForIntent()`                       */
+/* (utils/Commons/color.util.ts) — that helper is what the inline */
+/* `color:` declaration uses for the very same `color="{intent}"` */
+/* prop, and an inline declaration outranks this class. Reading   */
+/* `---fg` here made the two channels disagree on 5 of 7 intents: */
+/* `---fg` is the on-intent foreground (white), legible only ON   */
+/* the saturated `---bg`, so a standalone `.origam--color-primary` */
+/* painted white-on-white. Pair it with `.origam--bg-*` below     */
+/* when you want the on-intent foreground instead. See #818.      */
+.origam--color-primary { color: var(--origam-color__action--primary---fgSubtle); }
 .origam--color-secondary { color: var(--origam-color__action--secondary---fg); }
-.origam--color-success { color: var(--origam-color__feedback--success---fg); }
-.origam--color-warning { color: var(--origam-color__feedback--warning---fg); }
-.origam--color-danger { color: var(--origam-color__feedback--danger---fg); }
-.origam--color-info { color: var(--origam-color__feedback--info---fg); }
+.origam--color-success { color: var(--origam-color__feedback--success---fgSubtle); }
+.origam--color-warning { color: var(--origam-color__feedback--warning---fgSubtle); }
+.origam--color-danger { color: var(--origam-color__feedback--danger---fgSubtle); }
+.origam--color-info { color: var(--origam-color__feedback--info---fgSubtle); }
 .origam--color-neutral { color: var(--origam-color__text---primary); }
 
 /* ── Background color (intent) ───────────────────────────────── */
-.origam--bg-primary { background-color: var(--origam-color__action--primary---bg); }
-.origam--bg-secondary { background-color: var(--origam-color__action--secondary---bg); }
-.origam--bg-success { background-color: var(--origam-color__feedback--success---bg); }
-.origam--bg-warning { background-color: var(--origam-color__feedback--warning---bg); }
-.origam--bg-danger { background-color: var(--origam-color__feedback--danger---bg); }
-.origam--bg-info { background-color: var(--origam-color__feedback--info---bg); }
-.origam--bg-neutral { background-color: var(--origam-color__surface---default); }
+/*                                                                */
+/* Each intent surface carries its PAIRED on-intent foreground,   */
+/* the same auto-pairing `useColor()` already performs on the     */
+/* inline channel ("lets `bgColor=primary` alone auto-pair the    */
+/* right text colour"). Without it, `.origam--bg-primary` on bare */
+/* markup inherited the page's dark ink onto a saturated surface. */
+/* Every pair below is >= 4.5:1 in the light token set. See #818. */
+.origam--bg-primary { background-color: var(--origam-color__action--primary---bg); color: var(--origam-color__action--primary---fg); }
+.origam--bg-secondary { background-color: var(--origam-color__action--secondary---bg); color: var(--origam-color__action--secondary---fg); }
+.origam--bg-success { background-color: var(--origam-color__feedback--success---bg); color: var(--origam-color__feedback--success---fg); }
+.origam--bg-warning { background-color: var(--origam-color__feedback--warning---bg); color: var(--origam-color__feedback--warning---fg); }
+.origam--bg-danger { background-color: var(--origam-color__feedback--danger---bg); color: var(--origam-color__feedback--danger---fg); }
+.origam--bg-info { background-color: var(--origam-color__feedback--info---bg); color: var(--origam-color__feedback--info---fg); }
+.origam--bg-neutral { background-color: var(--origam-color__surface---default); color: var(--origam-color__text---primary); }
 
 /* ── Elevation (box-shadow) ───────────────────────────────── */
 .origam--shadow-none { box-shadow: var(--origam-shadow---none); }

package/dist/src/assets/locales/en.json

@@ -51,6 +51,11 @@
         "placeholder": "Enter date"
       }
     },
+    "date_picker_controls": {
+      "prev": "Previous",
+      "next": "Next",
+      "toggle_year": "Toggle year selection"
+    },
     "no_data_text": "No data available",
     "bracket": {
       "aria_label": "Tournament bracket",
@@ -199,6 +204,10 @@
       "expand_row": "Expand row",
       "collapse_row": "Collapse row"
     },
+    "data_table_group_header_row": {
+      "expand_group": "Expand group",
+      "collapse_group": "Collapse group"
+    },
     "rating": {
       "aria_label": {
         "item": "Rating {0} of {1}"

package/dist/src/assets/locales/fr.json

@@ -51,6 +51,11 @@
         "placeholder": "Entrer une date"
       }
     },
+    "date_picker_controls": {
+      "prev": "Précédent",
+      "next": "Suivant",
+      "toggle_year": "Basculer la sélection de l'année"
+    },
     "no_data_text": "Aucune donnée disponible",
     "bracket": {
       "aria_label": "Tableau du tournoi",
@@ -199,6 +204,10 @@
       "expand_row": "Développer la ligne",
       "collapse_row": "Réduire la ligne"
     },
+    "data_table_group_header_row": {
+      "expand_group": "Développer le groupe",
+      "collapse_group": "Réduire le groupe"
+    },
     "rating": {
       "aria_label": {
         "item": "Note de {0} sur {1}"

package/dist/src/assets/scss/tokens/_dark.scss

@@ -2064,7 +2064,7 @@
   --origam-picker---z-index: var(--origam-zIndex---dropdown);
   --origam-picker---transition-duration: var(--origam-motion__duration---medium);
   --origam-picker---transition-timing-function: var(--origam-motion__easing---standard);
-  --origam-picker-title---color: var(--origam-color__text---secondary);
+  --origam-picker-title---color: currentColor;
   --origam-picker-title---font-size: 0.75rem;
   --origam-picker-title---font-weight: 400;
   --origam-picker-title---letter-spacing: 0.1667em;
@@ -2833,11 +2833,11 @@
   --origam-chart-range-selector__btn---font-size: var(--origam-font__size---sm);
   --origam-chart-range-selector__btn--hover---background-color: rgba(0, 0, 0, 0.06);
   --origam-chart-range-selector__btn--hover---color: #111827;
-  --origam-chart-range-selector__btn--active---background-color: #3b82f6;
+  --origam-chart-range-selector__btn--active---background-color: var(--origam-color__action--primary---bg);
   --origam-chart-range-selector__btn--active---border-color: rgba(0, 0, 0, 0);
-  --origam-chart-range-selector__btn--active---color: var(--origam-color---white);
-  --origam-chart-range-selector__btn--active--hover---background-color: #2563eb;
-  --origam-chart-range-selector__btn--active--hover---color: var(--origam-color---white);
+  --origam-chart-range-selector__btn--active---color: var(--origam-color__action--primary---fg);
+  --origam-chart-range-selector__btn--active--hover---background-color: var(--origam-color__action--primary---bgHover);
+  --origam-chart-range-selector__btn--active--hover---color: var(--origam-color__action--primary---fg);
   --origam-chart-sparkline__bar---border-radius: 1;
   --origam-chart-sparkline__marker-min---stroke: rgba(0, 0, 0, 0);
   --origam-chart-sparkline__marker-max---stroke: rgba(0, 0, 0, 0);
@@ -4800,7 +4800,7 @@
     --origam-picker---z-index: var(--origam-zIndex---dropdown);
     --origam-picker---transition-duration: var(--origam-motion__duration---medium);
     --origam-picker---transition-timing-function: var(--origam-motion__easing---standard);
-    --origam-picker-title---color: var(--origam-color__text---secondary);
+    --origam-picker-title---color: currentColor;
     --origam-picker-title---font-size: 0.75rem;
     --origam-picker-title---font-weight: 400;
     --origam-picker-title---letter-spacing: 0.1667em;
@@ -5569,11 +5569,11 @@
     --origam-chart-range-selector__btn---font-size: var(--origam-font__size---sm);
     --origam-chart-range-selector__btn--hover---background-color: rgba(0, 0, 0, 0.06);
     --origam-chart-range-selector__btn--hover---color: #111827;
-    --origam-chart-range-selector__btn--active---background-color: #3b82f6;
+    --origam-chart-range-selector__btn--active---background-color: var(--origam-color__action--primary---bg);
     --origam-chart-range-selector__btn--active---border-color: rgba(0, 0, 0, 0);
-    --origam-chart-range-selector__btn--active---color: var(--origam-color---white);
-    --origam-chart-range-selector__btn--active--hover---background-color: #2563eb;
-    --origam-chart-range-selector__btn--active--hover---color: var(--origam-color---white);
+    --origam-chart-range-selector__btn--active---color: var(--origam-color__action--primary---fg);
+    --origam-chart-range-selector__btn--active--hover---background-color: var(--origam-color__action--primary---bgHover);
+    --origam-chart-range-selector__btn--active--hover---color: var(--origam-color__action--primary---fg);
     --origam-chart-sparkline__bar---border-radius: 1;
     --origam-chart-sparkline__marker-min---stroke: rgba(0, 0, 0, 0);
     --origam-chart-sparkline__marker-max---stroke: rgba(0, 0, 0, 0);

package/dist/src/assets/scss/tokens/_light.scss

@@ -1968,7 +1968,7 @@
   --origam-picker---z-index: var(--origam-zIndex---dropdown);
   --origam-picker---transition-duration: var(--origam-motion__duration---medium);
   --origam-picker---transition-timing-function: var(--origam-motion__easing---standard);
-  --origam-picker-title---color: var(--origam-color__text---secondary);
+  --origam-picker-title---color: currentColor;
   --origam-picker-title---font-size: 0.75rem;
   --origam-picker-title---font-weight: 400;
   --origam-picker-title---letter-spacing: 0.1667em;
@@ -2737,11 +2737,11 @@
   --origam-chart-range-selector__btn---font-size: var(--origam-font__size---sm);
   --origam-chart-range-selector__btn--hover---background-color: rgba(0, 0, 0, 0.06);
   --origam-chart-range-selector__btn--hover---color: #111827;
-  --origam-chart-range-selector__btn--active---background-color: #3b82f6;
+  --origam-chart-range-selector__btn--active---background-color: var(--origam-color__action--primary---bg);
   --origam-chart-range-selector__btn--active---border-color: rgba(0, 0, 0, 0);
-  --origam-chart-range-selector__btn--active---color: var(--origam-color---white);
-  --origam-chart-range-selector__btn--active--hover---background-color: #2563eb;
-  --origam-chart-range-selector__btn--active--hover---color: var(--origam-color---white);
+  --origam-chart-range-selector__btn--active---color: var(--origam-color__action--primary---fg);
+  --origam-chart-range-selector__btn--active--hover---background-color: var(--origam-color__action--primary---bgHover);
+  --origam-chart-range-selector__btn--active--hover---color: var(--origam-color__action--primary---fg);
   --origam-chart-sparkline__bar---border-radius: 1;
   --origam-chart-sparkline__marker-min---stroke: rgba(0, 0, 0, 0);
   --origam-chart-sparkline__marker-max---stroke: rgba(0, 0, 0, 0);

package/dist/src/assets/scss/tokens/_origam-utilities.scss

@@ -23,22 +23,40 @@
 /* import below the component layer.                         */
 
 /* ── Foreground color (intent) ───────────────────────────────── */
-.origam--color-primary { color: var(--origam-color__action--primary---fg); }
+/*                                                                */
+/* The intent's own colour, AS TEXT, on a neutral surface. These  */
+/* MUST mirror `tokenForegroundForIntent()`                       */
+/* (utils/Commons/color.util.ts) — that helper is what the inline */
+/* `color:` declaration uses for the very same `color="{intent}"` */
+/* prop, and an inline declaration outranks this class. Reading   */
+/* `---fg` here made the two channels disagree on 5 of 7 intents: */
+/* `---fg` is the on-intent foreground (white), legible only ON   */
+/* the saturated `---bg`, so a standalone `.origam--color-primary` */
+/* painted white-on-white. Pair it with `.origam--bg-*` below     */
+/* when you want the on-intent foreground instead. See #818.      */
+.origam--color-primary { color: var(--origam-color__action--primary---fgSubtle); }
 .origam--color-secondary { color: var(--origam-color__action--secondary---fg); }
-.origam--color-success { color: var(--origam-color__feedback--success---fg); }
-.origam--color-warning { color: var(--origam-color__feedback--warning---fg); }
-.origam--color-danger { color: var(--origam-color__feedback--danger---fg); }
-.origam--color-info { color: var(--origam-color__feedback--info---fg); }
+.origam--color-success { color: var(--origam-color__feedback--success---fgSubtle); }
+.origam--color-warning { color: var(--origam-color__feedback--warning---fgSubtle); }
+.origam--color-danger { color: var(--origam-color__feedback--danger---fgSubtle); }
+.origam--color-info { color: var(--origam-color__feedback--info---fgSubtle); }
 .origam--color-neutral { color: var(--origam-color__text---primary); }
 
 /* ── Background color (intent) ───────────────────────────────── */
-.origam--bg-primary { background-color: var(--origam-color__action--primary---bg); }
-.origam--bg-secondary { background-color: var(--origam-color__action--secondary---bg); }
-.origam--bg-success { background-color: var(--origam-color__feedback--success---bg); }
-.origam--bg-warning { background-color: var(--origam-color__feedback--warning---bg); }
-.origam--bg-danger { background-color: var(--origam-color__feedback--danger---bg); }
-.origam--bg-info { background-color: var(--origam-color__feedback--info---bg); }
-.origam--bg-neutral { background-color: var(--origam-color__surface---default); }
+/*                                                                */
+/* Each intent surface carries its PAIRED on-intent foreground,   */
+/* the same auto-pairing `useColor()` already performs on the     */
+/* inline channel ("lets `bgColor=primary` alone auto-pair the    */
+/* right text colour"). Without it, `.origam--bg-primary` on bare */
+/* markup inherited the page's dark ink onto a saturated surface. */
+/* Every pair below is >= 4.5:1 in the light token set. See #818. */
+.origam--bg-primary { background-color: var(--origam-color__action--primary---bg); color: var(--origam-color__action--primary---fg); }
+.origam--bg-secondary { background-color: var(--origam-color__action--secondary---bg); color: var(--origam-color__action--secondary---fg); }
+.origam--bg-success { background-color: var(--origam-color__feedback--success---bg); color: var(--origam-color__feedback--success---fg); }
+.origam--bg-warning { background-color: var(--origam-color__feedback--warning---bg); color: var(--origam-color__feedback--warning---fg); }
+.origam--bg-danger { background-color: var(--origam-color__feedback--danger---bg); color: var(--origam-color__feedback--danger---fg); }
+.origam--bg-info { background-color: var(--origam-color__feedback--info---bg); color: var(--origam-color__feedback--info---fg); }
+.origam--bg-neutral { background-color: var(--origam-color__surface---default); color: var(--origam-color__text---primary); }
 
 /* ── Elevation (box-shadow) ───────────────────────────────── */
 .origam--shadow-none { box-shadow: var(--origam-shadow---none); }

package/dist/src/components/Calendar/OrigamCalendar.vue

@@ -88,6 +88,8 @@
     <div
       v-if="resolvedView === CALENDAR_VIEW.MONTH"
       class="origam-calendar__body origam-calendar__body--month"
+      role="grid"
+      :aria-label="ariaMonthLabel"
       data-cy="origam-calendar-body-month"
     >
       <div
@@ -110,8 +112,6 @@
       </div>
       <div
         class="origam-calendar__month-grid"
-        role="grid"
-        :aria-label="ariaMonthLabel"
       >
         <div
           v-for="(weekRow, rowIndex) in monthGrid"

package/dist/src/components/Chart/OrigamChartMap.vue

@@ -83,7 +83,7 @@
 							:data-cy="`origam-chart-map-country-${ country.code }`"
 							:tabindex="country.hasData ? 0 : -1"
 							:role="country.hasData ? 'button' : undefined"
-							:aria-label="countryAriaLabel(country)"
+							:aria-label="country.hasData ? countryAriaLabel(country) : undefined"
 							@click="onCountryActivate(country, $event)"
 							@keydown.enter.prevent="onCountryActivate(country, $event)"
 							@keydown.space.prevent="onCountryActivate(country, $event)"

package/dist/src/components/DataTable/OrigamDataTable.vue

@@ -422,7 +422,24 @@ defineExpose({
 		}
 
 		&--loading {
-			&:deep(.origam-data-table-cell) {
+			/*********************************************************
+			 * #818 — le voile de chargement epargne les EN-TETES
+			 *
+			 * @description
+			 * Un libelle de colonne n'est pas la donnee en cours de
+			 * rafraichissement : c'est la structure du tableau, elle
+			 * reste lisible pendant le chargement. Le voile s'applique
+			 * donc au corps, pas a l'en-tete.
+			 *
+			 * @description
+			 * Mesure axe-core (Chromium, theme origam clair) : l'en-tete
+			 * peint `--origam-color__action--primary---fgSubtle`
+			 * (#6d28d9) ; a 0.5 sur blanc il composite en #b694ec, soit
+			 * 2.38:1 — tres sous les 4.5:1 de l'AA. Remonter l'opacite ne
+			 * sauve pas la regle : il faudrait >= 0.82 pour repasser AA,
+			 * et un voile a 0.82 n'est plus un voile.
+			 ********************************************************/
+			&:deep(.origam-data-table-cell:not(.origam-data-table-header-cell)) {
 				opacity: var(--origam-data-table--loading---opacity, var(--origam-data-table__loading---opacity, 0.5));
 			}
 		}

package/dist/src/components/DataTable/OrigamDataTableGroupHeaderRow.vue

@@ -15,6 +15,8 @@
 				>
 					<origam-data-table-column-cell class="origam-data-table-group-header-row__column">
 						<origam-btn
+								:aria-expanded="isGroupOpen(item)"
+								:aria-label="isGroupOpen(item) ? t('origam.data_table_group_header_row.collapse_group') : t('origam.data_table_group_header_row.expand_group')"
 								:icon="groupIcon"
 								size="small"
 								variant="text"
@@ -54,6 +56,7 @@ import OrigamCheckboxBtn from "../Checkbox/OrigamCheckboxBtn.vue";
 import OrigamDataTableColumnCell from "./OrigamDataTableColumnCell.vue";
 import { useGroupBy } from "../../composables/DataTable/group.composable";
 import { useHeaders } from "../../composables/DataTable/headers.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useSelection } from "../../composables/DataTable/select.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
@@ -74,6 +77,7 @@ const props = defineProps({
 defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
+const { t } = useLocale();
 const { isGroupOpen, toggleGroup, extractRows } = useGroupBy();
 const { isSelected, isSomeSelected, select } = useSelection();
 const { columns } = useHeaders();

package/dist/src/components/DatePicker/OrigamDatePickerControls.vue

@@ -17,6 +17,7 @@
 
 				<origam-btn
 						key="mode-btn"
+						:aria-label="t('origam.date_picker_controls.toggle_year')"
 						:disabled="disableYear"
 						:icon="modeIcon"
 						class="origam-date-picker-controls__mode-btn"
@@ -35,6 +36,7 @@
 			<origam-btn-group>
 				<template #default>
 					<origam-btn
+							:aria-label="t('origam.date_picker_controls.prev')"
 							:disabled="disablePrev"
 							:icon="prevIcon"
 							:rounded="0"
@@ -42,6 +44,7 @@
 					/>
 
 					<origam-btn
+							:aria-label="t('origam.date_picker_controls.next')"
 							:disabled="disableNext"
 							:icon="nextIcon"
 							:rounded="0"
@@ -58,6 +61,7 @@ import OrigamBtn from "../Btn/OrigamBtn.vue";
 import OrigamBtnGroup from "../Btn/OrigamBtnGroup.vue";
 import OrigamSpacer from "../Grids/OrigamSpacer.vue";
 import { useUnsupportedProp } from "../../composables/Commons/unsupportedProp.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
 import { useProps } from "../../composables/Commons/props.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { DATE_MODE } from "../../enums/DatePicker/date-picker.enum";
@@ -94,6 +98,7 @@ useUnsupportedProp(
 const emits = defineEmits(["click:year", "click:month", "click:prev", "click:next"]);
 defineSlots();
 const { filterProps } = useProps(props);
+const { t } = useLocale();
 const disableMonth = computed(() => {
   return props.disabled || props.disabledMonth;
 });

package/dist/src/components/Field/OrigamField.vue

@@ -1021,10 +1021,18 @@ defineExpose({
 				border-radius: var(--origam-field---border-radius, 8px) var(--origam-field---border-radius, 8px) 0 0;
 				--origam-field__input---padding-top: var(--origam-field__input---padding-block-filled);
 
+				// #818 — meme correctif que les variantes `outlined` /
+				// `underlined` : l'alpha du trait passe sur `border-color`,
+				// sans quoi le groupe de composition delave le label flottant
+				// monte dans `__outline--notch`.
 				#{$this}__outlines {
 					#{$this}__outline {
-						border-bottom: 1px solid var(--origam-field---border-color, currentColor);
-						opacity: var(--origam-field--variant-filled---border-opacity, 0.42);
+						border-bottom: 1px solid color-mix(
+							in srgb,
+							var(--origam-field---border-color, currentColor)
+							calc(var(--origam-field--variant-filled---border-opacity, .42) * 100%),
+							transparent
+						);
 					}
 				}
 
@@ -1032,7 +1040,7 @@ defineExpose({
 				&#{$this}--focused {
 					#{$this}__outlines {
 						#{$this}__outline {
-							opacity: 1;
+							border-bottom-color: var(--origam-field---border-color, currentColor);
 						}
 					}
 				}
@@ -1065,9 +1073,32 @@ defineExpose({
 				background: var(--origam-field---background-color, var(--origam-field---variant-outlined-background-color, transparent));
 
 				#{$this}__outline {
-					border-color: var(--origam-field---border-color, var(--origam-field__outline---border-color, currentColor));
+					/*********************************************************
+					 * #818 — l'alpha du trait vit sur la COULEUR, pas sur la boite
+					 *
+					 * @description
+					 * `opacity` sur `__outline` cree un groupe de composition
+					 * qui delave TOUT le sous-arbre. Or `__outline--notch`
+					 * n'est pas vide : le label flottant y est monte (voir le
+					 * template). Le label heritait donc du .38 destine au seul
+					 * trait de bordure — mesure axe-core, Chromium :
+					 * #6d28d9 a .38 sur blanc = #c8adf1, soit 1.96:1, tres
+					 * sous les 4.5:1 de l'AA.
+					 *
+					 * @description
+					 * Porter l'alpha sur `border-color` rend EXACTEMENT le meme
+					 * trait (la boite n'a ni fond ni autre contenu peint :
+					 * `__outlines` est en `position: absolute` /
+					 * `pointer-events: none`, les pattes ne portent que des
+					 * bordures) et laisse le label a son opacite pleine.
+					 ********************************************************/
+					border-color: color-mix(
+						in srgb,
+						var(--origam-field---border-color, var(--origam-field__outline---border-color, currentColor))
+						calc(var(--origam-field---border-opacity, var(--origam-field__outline---border-opacity, .38)) * 100%),
+						transparent
+					);
 					border-style: var(--origam-field__outline---border-style, solid);
-					opacity: var(--origam-field---border-opacity, var(--origam-field__outline---border-opacity, .38));
 
 					&--start {
 						border-top-width: var(--origam-field---border-width);
@@ -1131,11 +1162,19 @@ defineExpose({
 				--origam-field---border-width: 1px;
 				--origam-field---border-opacity: .38;
 
+				// #818 — meme raison que la variante `outlined` ci-dessus :
+				// l'alpha passe sur `border-color` pour ne plus delaver le
+				// label flottant, enfant de `__outline--notch`. La transition
+				// suit la couleur puisque c'est elle qui porte desormais l'alpha.
 				#{$this}__outline {
-					border-color: var(--origam-field---border-color, var(--origam-field__outline---border-color, currentColor));
+					border-color: color-mix(
+						in srgb,
+						var(--origam-field---border-color, var(--origam-field__outline---border-color, currentColor))
+						calc(var(--origam-field---border-opacity, var(--origam-field__outline---border-opacity, .38)) * 100%),
+						transparent
+					);
 					border-style: var(--origam-field__outline---border-style, solid);
-					opacity: var(--origam-field---border-opacity, var(--origam-field__outline---border-opacity, .38));
-					transition: opacity var(--origam-field__outline---transition-duration, .25s) var(--origam-field__outline---transition-easing, cubic-bezier(.4, 0, .2, 1));
+					transition: border-color var(--origam-field__outline---transition-duration, .25s) var(--origam-field__outline---transition-easing, cubic-bezier(.4, 0, .2, 1));
 					border-width: 0;
 
 					&--start {

package/dist/src/components/InfiniteScroll/OrigamInfiniteScroll.vue

@@ -5,6 +5,7 @@
 			ref="rootEl"
 			:class="infiniteScrollClasses"
 			:style="infiniteScrollStyles"
+			:tabindex="hasFocusableDescendant ? undefined : 0"
 	>
 		<div class="origam-infinite-scroll__side" role="status" aria-live="polite" :style="typographyStyles">
 			<template v-if="hasStartIntersect">
@@ -129,6 +130,7 @@ import { IN_BROWSER } from "../../consts/Commons/commons.const";
 import { DIRECTION } from "../../enums/Commons/direction.enum";
 import { INFINITE_SCROLL_MODE, INFINITE_SCROLL_SIDE, INFINITE_SCROLL_STATUS } from "../../enums/InfiniteScroll/infinite-scroll.enum";
 import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
+import { focusableChildren } from "../../utils/Commons/commons.util";
 const props = defineProps({
   side: { type: null, required: false, default: INFINITE_SCROLL_SIDE.END },
   mode: { type: null, required: false, default: INFINITE_SCROLL_MODE.INTERSECT },
@@ -159,6 +161,21 @@ const { typographyStyles } = useTypography(props, "infinite-scroll__loader");
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const rootEl = ref();
 const isIntersecting = shallowRef(false);
+const hasFocusableDescendant = shallowRef(false);
+let focusableObserver;
+const refreshHasFocusableDescendant = () => {
+  if (!rootEl.value) return;
+  hasFocusableDescendant.value = focusableChildren(rootEl.value).length > 0;
+};
+onMounted(() => {
+  if (!IN_BROWSER || !rootEl.value) return;
+  refreshHasFocusableDescendant();
+  focusableObserver = new MutationObserver(refreshHasFocusableDescendant);
+  focusableObserver.observe(rootEl.value, { childList: true, subtree: true });
+});
+onBeforeUnmount(() => {
+  focusableObserver?.disconnect();
+});
 const propertyDirection = computed(() => {
   return props.direction === DIRECTION.VERTICAL ? "scrollTop" : "scrollLeft";
 });

package/dist/src/components/InlineEdit/OrigamInlineEdit.vue

@@ -339,7 +339,7 @@ const handleFocusOut = (event) => {
   const next = event.relatedTarget;
   if (root && next instanceof Node && root.contains(next)) return;
   noteTransition(true);
-  void confirm();
+  confirm();
 };
 const restoreFocusAfterEdit = async () => {
   if (!restoreFocusOnLeave) return;
@@ -350,7 +350,7 @@ const restoreFocusAfterEdit = async () => {
 };
 watch(isEditing, async (next) => {
   if (!next) {
-    void restoreFocusAfterEdit();
+    restoreFocusAfterEdit();
     return;
   }
   if (!props.autoFocus) return;

package/dist/src/components/List/OrigamListGroup.vue

@@ -3,7 +3,9 @@
 			:is="tag"
 			:id="styleId"
 			v-contrast
+			:aria-labelledby="id"
 			:class="listGroupClasses"
+			:role="groupRole"
 			:style="listGroupStyles"
 	>
 		<origam-defaults-provider :defaults="slotDefaults">
@@ -65,6 +67,7 @@ import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import vContrast from "../../directives/Contrast/contrast.directive";
 import { omitUndefined } from "../../utils/Commons/commons.util";
+import { LIST_ITEM_ROLE } from "../../enums/List/list-item.enum";
 import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 const props = defineProps({
   collapseIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_UP },
@@ -147,6 +150,10 @@ const id = computed(() => `origam-list-group--id-${String(_id.value)}`);
 const list = useList();
 const { isBooted } = useSsrBoot();
 const transition = ref({ component: OrigamExpandY });
+const groupRole = computed(() => {
+  if (!list) return void 0;
+  return list.itemRole.value === LIST_ITEM_ROLE.OPTION ? "group" : LIST_ITEM_ROLE.LISTITEM;
+});
 const toggleIcon = computed(() => {
   if (isOpen.value) {
     return props.collapseIcon;

package/dist/src/components/RatingField/OrigamRatingField.vue

@@ -336,13 +336,13 @@ const eventState = computed(() => {
       if (!props.disabled && !props.readonly) {
         model.value = normalizedValue.value === value && props.clearable ? 0 : value;
       }
-      void nextTick(() => resyncRadios(e?.target));
+      nextTick(() => resyncRadios(e?.target));
     };
     const onChange = (e) => {
       if (!props.disabled && !props.readonly) {
         model.value = value;
       }
-      void nextTick(() => resyncRadios(e?.target));
+      nextTick(() => resyncRadios(e?.target));
     };
     return {
       onMouseenter: props.hover ? onMouseenter : void 0,