origam 2.17.1 → 2.18.0

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

@@ -11,6 +11,25 @@
  * This file is now HAND-MAINTAINED SOURCE: edit it directly. There is no
  * regeneration step, and no "do not edit" rule any more. A design-token
  * pipeline may be reintroduced later, once the DS is stable.
+ *
+ * ── #789 — CONTRASTE : POURQUOI CES PALIERS-LÀ ─────────────────────────────
+ * `feedback--{success,warning,info}---bg` portent tous un `---fg` BLANC. Le
+ * couple doit donc tenir 4.5:1 (WCAG AA, texte). Mesuré en Chromium, alpha
+ * composité, avec témoins calculables à la main :
+ *
+ *     success   green-500 #4caf50  2.78  →  green-700 #15803d  5.02
+ *     warning   amber-600 #fb8c00  2.37  →  amber-700 #b45309  5.02
+ *     info      blue-500  #2196f3  3.12  →            #2563eb  5.17
+ *
+ * ⛔ Ne pas « re-éclaircir » ces trois paliers sans remesurer : sur cette
+ * palette, aucun palier plus clair ne tient AA avec du texte blanc. La
+ * mesure et ses témoins vivent dans
+ * `packages/tests/e2e/token-intent-contrast.spec.ts` — elle rougit ici.
+ *
+ * `info---bg` est le seul littéral du lot : `#2563eb` n'existe pas dans la
+ * palette primitive (son `blue---600` vaut `#1d4ed8`, soit le 700 de
+ * Tailwind). La valeur est celle de `origam.theme.ts`, ce qui ferme du même
+ * coup la divergence feuille ↔ thème que #793 suit.
  */
 :root,
 [data-theme="light"] {
@@ -20,7 +39,19 @@
   --origam-color__surface---sunken: var(--origam-color__neutral---50);
   --origam-color__surface---disabled: var(--origam-color__neutral---200);
   --origam-color__surface---inverse: var(--origam-color__neutral---900);
-  --origam-color__text---primary: var(--origam-color__neutral---900);
+  /* #615 — `950`, PAS `900`. Cette feuille NE gagne PAS la cascade au niveau
+     document : `createOrigam()` appelle `applyThemes()`, qui serialise
+     `origamLightTheme` (src/themes/origam.theme.ts) en un bloc `:root { … }`
+     injecte dans <head> APRES cette feuille. A specificite egale (0,1,0) c'est
+     l'ordre source qui tranche, donc le bloc runtime gagne — et il pose
+     `#0a0a0a`, soit neutral-950. Tant que cette ligne disait `900`, le meme
+     theme « light » peignait DEUX couleurs : `#0a0a0a` a la racine et
+     `#171717` dans un sous-arbre `<OrigamThemeProvider theme="light">` (ou
+     `[data-theme="light"]` matche alors que `:root` ne matche plus). Les deux
+     valeurs mesurees en Chromium ; le contraste sur `surface.default` passe de
+     17.93:1 a 19.80:1. Si cette ligne doit revenir a `900`, c'est
+     `origam.theme.ts` qu'il faut changer AVEC, sinon la divergence revient. */
+  --origam-color__text---primary: var(--origam-color__neutral---950);
   --origam-color__text---secondary: var(--origam-color__neutral---600);
   --origam-color__text---disabled: var(--origam-color__neutral---400);
   --origam-color__text---inverse: var(--origam-color__neutral---0);
@@ -48,26 +79,26 @@
   --origam-color__action--ghost---bgDisabled: rgba(0, 0, 0, 0);
   --origam-color__action--ghost---fg: var(--origam-color__primary---600);
   --origam-color__action--ghost---fgDisabled: var(--origam-color__neutral---400);
-  --origam-color__feedback--success---bg: var(--origam-color__green---500);
+  --origam-color__feedback--success---bg: var(--origam-color__green---700);
   --origam-color__feedback--success---bgSubtle: var(--origam-color__green---50);
   --origam-color__feedback--success---fg: var(--origam-color__neutral---0);
   --origam-color__feedback--success---fgSubtle: var(--origam-color__green---700);
-  --origam-color__feedback--success---border: var(--origam-color__green---500);
-  --origam-color__feedback--warning---bg: var(--origam-color__amber---600);
+  --origam-color__feedback--success---border: var(--origam-color__green---700);
+  --origam-color__feedback--warning---bg: var(--origam-color__amber---700);
   --origam-color__feedback--warning---bgSubtle: var(--origam-color__amber---50);
   --origam-color__feedback--warning---fg: var(--origam-color__neutral---0);
   --origam-color__feedback--warning---fgSubtle: var(--origam-color__amber---700);
-  --origam-color__feedback--warning---border: var(--origam-color__amber---600);
+  --origam-color__feedback--warning---border: var(--origam-color__amber---700);
   --origam-color__feedback--danger---bg: var(--origam-color__red---600);
   --origam-color__feedback--danger---bgSubtle: var(--origam-color__red---50);
   --origam-color__feedback--danger---fg: var(--origam-color__neutral---0);
   --origam-color__feedback--danger---fgSubtle: var(--origam-color__red---700);
   --origam-color__feedback--danger---border: var(--origam-color__red---400);
-  --origam-color__feedback--info---bg: var(--origam-color__blue---500);
+  --origam-color__feedback--info---bg: #2563eb;
   --origam-color__feedback--info---bgSubtle: var(--origam-color__blue---50);
   --origam-color__feedback--info---fg: var(--origam-color__neutral---0);
   --origam-color__feedback--info---fgSubtle: var(--origam-color__blue---700);
-  --origam-color__feedback--info---border: var(--origam-color__blue---500);
+  --origam-color__feedback--info---border: #2563eb;
   --origam-color__overlay---scrim: var(--origam-color---white);
   --origam-gradient---sunset: linear-gradient(135deg, #ff7e5f, #feb47b);
   --origam-gradient---ocean: linear-gradient(135deg, #2193b0, #6dd5ed);
@@ -89,7 +120,7 @@
   --origam-btn---border-style: solid;
   --origam-btn---border-color: currentColor;
   --origam-btn---position: relative;
-  --origam-btn---density: 0;
+  --origam-btn---density: 0px;
   --origam-btn---width: auto;
   --origam-btn---min-width: 64px;
   --origam-btn---max-width: 100%;
@@ -920,8 +951,8 @@
   --origam-field__input---padding-block-filled: 20px;
   --origam-field__input---padding-top: var(--origam-field__input---padding-block-md);
   --origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md);
-  --origam-field__input---padding-start: 0;
-  --origam-field__input---padding-end: 0;
+  --origam-field__input---padding-start: 0px;
+  --origam-field__input---padding-end: 0px;
   --origam-field__input---opacity: 0.7;
   --origam-field__label---font-size: 0.75em;
   --origam-field__label---transition-duration: var(--origam-motion__duration---normal);
@@ -1431,6 +1462,11 @@
   --origam-table__header-cell---padding-inline: var(--origam-space---4);
   --origam-table__header-cell---border-bottom-color: var(--origam-color__border---default);
   --origam-table__header-cell---border-bottom-width: var(--origam-border__width---2);
+  /* #840 — derived from the SAME density-aware padding-block token, so it
+     never drifts out of sync with it: 2 * padding-block + border-bottom
+     + 18px (measured content-box line height of a single-line header
+     cell in Chromium, constant across the 3 density rungs). */
+  --origam-table__header-cell---height: calc((2 * var(--origam-table__header-cell---padding-block, 12px)) + var(--origam-table__header-cell---border-bottom-width, 2px) + 18px);
   --origam-table__cell---padding-block: var(--origam-space---3);
   --origam-table__cell---padding-inline: var(--origam-space---4);
   --origam-table__cell---border-color: var(--origam-color__border---subtle);

package/dist/src/components/Alert/OrigamAlert.vue

@@ -20,8 +20,7 @@
         <div
           key="prepend"
           class="origam-alert__prepend"
-          :role="isPrependClickable ? 'button' : undefined"
-          :tabindex="isPrependClickable ? 0 : undefined"
+          v-bind="prependCommandAttrs"
           @click="handleClickPrepend"
           @keydown="handleKeydownPrepend"
         >
@@ -71,8 +70,7 @@
         <div
           key="append"
           class="origam-alert__append"
-          :role="isAppendClickable ? 'button' : undefined"
-          :tabindex="isAppendClickable ? 0 : undefined"
+          v-bind="appendCommandAttrs"
           @click="handleClickAppend"
           @keydown="handleKeydownAppend"
         >
@@ -202,6 +200,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
@@ -241,8 +241,8 @@ const {
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,
   onKeydownAppend: handleKeydownAppend,
-  isPrependClickable,
-  isAppendClickable,
+  prependCommandAttrs,
+  appendCommandAttrs,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, prependIcon, appendIcon);

package/dist/src/components/Avatar/OrigamAvatar.vue

@@ -56,6 +56,7 @@ import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
 import { isEmpty } from "../../utils/Commons/commons.util";
+import { isIntent, tokenStylesForIntent } from "../../utils/Commons/color.util";
 import { computed, useSlots } from "vue";
 const props = defineProps({
   icon: { type: null, required: false },
@@ -116,7 +117,19 @@ defineSlots();
 const { filterProps } = useProps(props);
 const { classes: hoverClasses, isOn: isHover, config: hoverState, unset: handleMouseleave, set: handleMouseenter } = useStateFlag(props, { state: "hover" });
 const { classes: activeClasses, isOn: isActive, config: activeState, toggle: handleClick } = useStateFlag(props, { state: "active" });
-const { colorClasses, colorStyles, borderClasses, borderStyles, roundedClasses, roundedStyles, elevationClasses, elevationStyles, paddingClasses, paddingStyles, marginClasses, marginStyles } = useStateEffect(props, isHover, isActive, hoverState, activeState);
+const { color: effectiveColor, bgColor: effectiveBgColor, colorClasses, colorStyles, borderClasses, borderStyles, roundedClasses, roundedStyles, elevationClasses, elevationStyles, paddingClasses, paddingStyles, marginClasses, marginStyles } = useStateEffect(props, isHover, isActive, hoverState, activeState);
+const avatarColorStyles = computed(() => {
+  const bg = effectiveBgColor.value;
+  const fg = effectiveColor.value;
+  if (!bg || bg === "ghost" || !isIntent(bg) || fg != null && isIntent(fg)) {
+    return colorStyles.value;
+  }
+  const intentFg = tokenStylesForIntent(bg, "default").color;
+  return [
+    ...colorStyles.value.filter((decl) => !decl.startsWith("color:")),
+    `color: ${intentFg}`
+  ];
+});
 const { typographyStyles } = useTypography(props, "avatar");
 const slots = useSlots();
 const hasImage = computed(() => {
@@ -149,7 +162,7 @@ const avatarStyles = computed(() => {
     paddingStyles.value,
     marginStyles.value,
     sizeStyles.value,
-    colorStyles.value,
+    avatarColorStyles.value,
     elevationStyles.value,
     typographyStyles.value,
     props.style

package/dist/src/components/Badge/OrigamBadge.vue

@@ -29,8 +29,7 @@
 								<span
 										key="prepend"
 										class="origam-badge__prepend"
-										:role="isPrependClickable ? 'button' : undefined"
-										:tabindex="isPrependClickable ? 0 : undefined"
+										v-bind="prependCommandAttrs"
 										@click="handleClickPrepend"
 										@keydown="handleKeydownPrepend"
 								>
@@ -63,8 +62,7 @@
 								<span
 										key="append"
 										class="origam-badge__append"
-										:role="isAppendClickable ? 'button' : undefined"
-										:tabindex="isAppendClickable ? 0 : undefined"
+										v-bind="appendCommandAttrs"
 										@click="handleClickAppend"
 										@keydown="handleKeydownAppend"
 								>
@@ -154,7 +152,9 @@ const props = defineProps({
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
-  prependIcon: { type: null, required: false }
+  prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false }
 });
 defineEmits(["click:append", "click:prepend", "update:hover"]);
 defineSlots();
@@ -171,8 +171,8 @@ const {
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,
   onKeydownAppend: handleKeydownAppend,
-  isPrependClickable,
-  isAppendClickable,
+  prependCommandAttrs,
+  appendCommandAttrs,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, prependIcon, appendIcon);

package/dist/src/components/Breadcrumb/OrigamBreadcrumbItem.vue

@@ -15,8 +15,7 @@
       <span
 		      key="prepend"
 		      class="origam-breadcrumb-item__prepend"
-		      :role="isPrependZoneFocusable ? 'button' : undefined"
-		      :tabindex="isPrependZoneFocusable ? 0 : undefined"
+		      v-bind="prependCommandAttrs"
 		      @click="handleClickPrepend"
 		      @keydown="handleKeydownPrepend"
       >
@@ -45,8 +44,7 @@
       <span
 		      key="append"
 		      class="origam-breadcrumb-item__append"
-		      :role="isAppendZoneFocusable ? 'button' : undefined"
-		      :tabindex="isAppendZoneFocusable ? 0 : undefined"
+		      v-bind="appendCommandAttrs"
 		      @click="handleClickAppend"
 		      @keydown="handleKeydownAppend"
       >
@@ -73,6 +71,7 @@
 import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
 import OrigamIcon from "../Icon/OrigamIcon.vue";
 import vContrast from "../../directives/Contrast/contrast.directive";
+import { useAccessibleCommand } from "../../composables/Commons/accessibleCommand.composable";
 import { useAdjacent } from "../../composables/Commons/adjacent.composable";
 import { useDensity } from "../../composables/Commons/density.composable";
 import { useLink } from "../../composables/Commons/link.composable";
@@ -132,6 +131,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
   hoverClass: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
@@ -160,6 +161,20 @@ const {
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const isPrependZoneFocusable = computed(() => isPrependClickable.value && !link.isLink?.value);
 const isAppendZoneFocusable = computed(() => isAppendClickable.value && !link.isLink?.value);
+const prependCommandAttrs = useAccessibleCommand({
+  component: "OrigamBreadcrumbItem",
+  zone: "prepend",
+  prop: "prependAriaLabel",
+  active: isPrependZoneFocusable,
+  label: () => props.prependAriaLabel
+});
+const appendCommandAttrs = useAccessibleCommand({
+  component: "OrigamBreadcrumbItem",
+  zone: "append",
+  prop: "appendAriaLabel",
+  active: isAppendZoneFocusable,
+  label: () => props.appendAriaLabel
+});
 const { densityClasses } = useDensity(props);
 const breadcrumbItemStyles = computed(() => {
   return [
@@ -252,6 +267,10 @@ defineExpose({
 			pointer-events: none;
 		}
 
+		&[aria-current='page'] {
+			--origam-breadcrumb-item---opacity: var(--origam-opacity---100);
+		}
+
 		&--density-comfortable {
 			--origam-breadcrumb-item---density: -8px;
 		}

package/dist/src/components/Btn/OrigamBtn.vue

@@ -125,7 +125,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, StyleValue, toRef, useAttrs, useSlots } from "vue";
+import { computed, onMounted, ref, StyleValue, toRef, useAttrs, useSlots, watchEffect } from "vue";
 import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
 import OrigamIcon from "../Icon/OrigamIcon.vue";
 import OrigamLoader from "../Loader/OrigamLoader.vue";
@@ -148,6 +148,7 @@ import { useStatus } from "../../composables/Commons/status.composable";
 import { useStyle } from "../../composables/Commons/style.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
 import { useVariant } from "../../composables/Commons/variant.composable";
+import { warnMissingNativeControlName } from "../../utils/Commons/a11y.util";
 import { warnDeprecatedEmit } from "../../utils/Commons/color.util";
 import { ADJACENT_EMIT_REPLACEMENT } from "../../consts/Btn/btn.const";
 import { ORIGAM_BTN_TOGGLE_KEY } from "../../consts/Btn/btn-toggle.const";
@@ -234,6 +235,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
   hoverClass: { type: String, required: false },
   active: { type: [Boolean, Object], required: false, default: void 0 },
@@ -331,6 +334,21 @@ const hasIcon = computed(() => {
 const hasLoader = computed(() => {
   return slots.loader || loaderConfig.value.isActive;
 });
+const isUnnamedIconOnly = computed(() => {
+  if (!hasIcon.value) return false;
+  if (slots.default || props.text) return false;
+  return !(attrs["aria-label"] || attrs["aria-labelledby"] || attrs.title);
+});
+if (import.meta.env?.DEV) {
+  watchEffect(() => {
+    if (isUnnamedIconOnly.value) {
+      warnMissingNativeControlName(
+        "OrigamBtn",
+        "icon-only mode renders a <button> whose only content is an aria-hidden glyph"
+      );
+    }
+  });
+}
 const isSkeletonLoading = computed(() => {
   return loaderConfig.value.isActive && loaderConfig.value.kind === "skeleton";
 });
@@ -1136,7 +1154,7 @@ defineExpose({
 		--origam-btn__prepend---margin-inline-start: calc(var(--origam-btn---height) / -9);
 		--origam-btn__prepend---margin-inline-end: calc(var(--origam-btn---height) / 4.5);
 
-		--origam-btn---min-width: calc(var(--origam-btn---width, 36px) + var(--origam-btn---density, 0));
-		--origam-btn---min-height: calc(var(--origam-btn---height, 36px) + var(--origam-btn---density, 0));
+		--origam-btn---min-width: calc(var(--origam-btn---width, 36px) + var(--origam-btn---density, 0px));
+		--origam-btn---min-height: calc(var(--origam-btn---height, 36px) + var(--origam-btn---density, 0px));
 	}
 </style>

package/dist/src/components/Btn/OrigamBtnGroup.vue

@@ -442,7 +442,7 @@ defineExpose({
 
 <style>
 	:root {
-		--origam-btn-group---density: 0;
+		--origam-btn-group---density: 0px;
 
 		--origam-btn-group---border-radius: var(--origam-btn---border-radius, 4px);
 		--origam-btn-group---border-width: var(--origam-btn---border-width, 0);

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

@@ -896,7 +896,7 @@ function onKeydown(event) {
     internalDate.value = next;
     emit("update:currentDate", next);
     const focusTarget = next;
-    void nextTick(() => focusDayCell(focusTarget));
+    nextTick(() => focusDayCell(focusTarget));
   }
 }
 const {

package/dist/src/components/Card/OrigamCard.vue

@@ -246,6 +246,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false }
 });

package/dist/src/components/Card/OrigamCardHeader.vue

@@ -16,8 +16,7 @@
 					v-if="hasPrepend"
 					key="prepend"
 					class="origam-card-header__prepend"
-					:role="isPrependClickable ? 'button' : undefined"
-					:tabindex="isPrependClickable ? 0 : undefined"
+					v-bind="prependCommandAttrs"
 					@click="handleClickPrepend"
 					@keydown="handleKeydownPrepend"
 			>
@@ -75,8 +74,7 @@
 					v-if="hasAppend"
 					key="append"
 					class="origam-card-header__append"
-					:role="isAppendClickable ? 'button' : undefined"
-					:tabindex="isAppendClickable ? 0 : undefined"
+					v-bind="appendCommandAttrs"
 					@click="handleClickAppend"
 					@keydown="handleKeydownAppend"
 			>
@@ -157,6 +155,8 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  prependAriaLabel: { type: String, required: false },
+  appendAriaLabel: { type: String, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
@@ -178,8 +178,8 @@ const {
   onClickAppend: handleClickAppend,
   onKeydownPrepend: handleKeydownPrepend,
   onKeydownAppend: handleKeydownAppend,
-  isPrependClickable,
-  isAppendClickable,
+  prependCommandAttrs,
+  appendCommandAttrs,
   hasPrepend,
   hasAppend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
@@ -479,7 +479,7 @@ defineExpose({
 		--origam-card-header__title---line-height: 1.5rem;
 		--origam-card-header__title---text-transform: none;
 
-		--origam-card-header__subtitle---color: var(--origam-color__text---secondary);
+		--origam-card-header__subtitle---color: currentColor;
 		--origam-card-header__subtitle---display: -webkit-box;
 		--origam-card-header__subtitle---overflow: hidden;
 

package/dist/src/components/Carousel/OrigamCarousel.vue

@@ -194,6 +194,8 @@ const { t } = useLocale();
 const model = useVModel(props, "modelValue");
 const origamWindowRef = ref();
 let slideTimeout = -1;
+let restartFrame = -1;
+let disposed = false;
 const progressPercent = ref(0);
 let progressRaf = -1;
 let progressStart = 0;
@@ -253,7 +255,13 @@ const playPauseIcon = computed(() => {
 });
 const restartTimeout = () => {
   window.clearTimeout(slideTimeout);
-  window.requestAnimationFrame(startTimeout);
+  if (disposed) return;
+  window.cancelAnimationFrame(restartFrame);
+  restartFrame = window.requestAnimationFrame(() => {
+    restartFrame = -1;
+    if (disposed) return;
+    startTimeout();
+  });
 };
 watch(model, restartTimeout);
 watch(() => props.interval, restartTimeout);
@@ -271,6 +279,11 @@ watch(() => props.progress, (val) => {
 });
 onMounted(startTimeout);
 onBeforeUnmount(() => {
+  disposed = true;
+  if (restartFrame !== -1) {
+    window.cancelAnimationFrame(restartFrame);
+    restartFrame = -1;
+  }
   window.clearTimeout(slideTimeout);
   stopProgress();
 });

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

@@ -589,7 +589,7 @@ const svgDesc = computed(() => {
 });
 const boxAriaLabel = (box) => {
   const { min, q1, median, q3, max } = box.rawStats;
-  return `${box.category}: min=${min} Q1=${q1} median=${median} Q3=${q3} max=${max}`;
+  return t("origam.chart.box_plot.box_aria_label", box.category, min, q1, median, q3, max);
 };
 const onBoxEnter = (box) => {
   hoveredIndex.value = box.index;

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

@@ -536,7 +536,8 @@ const rootClasses = computed(() => [
   elevationClasses.value,
   marginClasses.value,
   paddingClasses.value,
-  roundedClasses.value
+  roundedClasses.value,
+  props.class
 ]);
 const rootStyles = computed(() => {
   const out = {};
@@ -562,7 +563,7 @@ const svgDesc = computed(() => {
 });
 const bulletAriaLabel = (bullet) => {
   const pct = bullet.datum.target ? Math.round(bullet.datum.value / bullet.datum.target * 100) : 0;
-  return `${bullet.category}: value ${bullet.datum.value}, target ${bullet.datum.target}, ${pct}% achievement`;
+  return t("origam.chart.bullet.bullet_aria_label", bullet.category, bullet.datum.value, bullet.datum.target, pct);
 };
 const onBulletEnter = (bullet) => {
   hoveredIndex.value = bullet.index;

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

@@ -475,8 +475,8 @@ const svgDesc = computed(() => {
 });
 const candleAriaLabel = (candle) => {
   const d = candle.datum;
-  const direction = candle.isBullish ? "bullish" : "bearish";
-  return `${d.date}: ${direction}, open ${d.open}, high ${d.high}, low ${d.low}, close ${d.close}`;
+  const direction = candle.isBullish ? t("origam.chart.candlestick.direction_bullish") : t("origam.chart.candlestick.direction_bearish");
+  return t("origam.chart.candlestick.candle_aria_label", d.date, direction, d.open, d.high, d.low, d.close);
 };
 const onCandleEnter = (candle) => {
   hoveredIndex.value = candle.index;

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

@@ -290,12 +290,12 @@
 						v-if="zoomable && isZoomed"
 						class="origam-chart__zoom-reset"
 						data-cy="origam-chart-zoom-reset"
-						:transform="`translate(${ plot.x1 - 68 }, ${ plot.y0 })`"
+						:transform="`translate(${ plot.x1 - zoomResetWidth - CHART_ZOOM_RESET_GAP }, ${ plot.y0 })`"
 				>
 					<rect
 							x="0"
 							y="0"
-							width="64"
+							:width="zoomResetWidth"
 							height="20"
 							rx="4"
 							:style="{ fill: 'var(--origam-chart__zoom-reset---bg, rgba(59,130,246,0.9))', cursor: 'pointer' }"
@@ -308,13 +308,14 @@
 							@keydown.space.prevent="onZoomReset"
 					/>
 					<text
-							x="32"
+							ref="zoomResetTextRef"
+							:x="zoomResetWidth / 2"
 							y="13"
 							text-anchor="middle"
 							dominant-baseline="auto"
 							pointer-events="none"
 							:style="{ fill: '#ffffff', fontSize: '0.6875rem', fontWeight: '600' }"
-					>Reset zoom</text>
+					>{{ zoomResetAriaLabel }}</text>
 				</g>
 
 				<g
@@ -486,6 +487,7 @@
 <script lang="ts" setup>
 import {
   computed,
+  nextTick,
   ref,
   watch
 } from "vue";
@@ -506,6 +508,11 @@ import {
   computePlotLineGeometry
 } from "../../composables/Chart/chart.composable";
 import { CHART_RANGE_SELECTOR_DEFAULT_BUTTONS } from "../../consts/Chart/chart.const";
+import {
+  CHART_ZOOM_RESET_GAP,
+  CHART_ZOOM_RESET_MIN_WIDTH,
+  CHART_ZOOM_RESET_PADDING_X
+} from "../../consts/Chart/chart-cartesian.const";
 import { OrigamBtn } from "../Btn";
 import OrigamChartAxis from "./OrigamChartAxis.vue";
 import OrigamChartLegend from "./OrigamChartLegend.vue";
@@ -598,6 +605,28 @@ const breadcrumbItems = computed(() => {
 const drilldownBackLabel = computed(() => props.drilldown?.backLabel ?? t("origam.chart.drilldown.back_label"));
 const drilldownNavAriaLabel = computed(() => t(props.drilldown?.navAriaLabel ?? "origam.chart.drilldown.aria_label"));
 const zoomResetAriaLabel = computed(() => t(props.zoomResetLabel));
+const zoomResetTextRef = ref(null);
+const zoomResetTextWidth = ref(0);
+const zoomResetWidth = computed(() => {
+  if (!zoomResetTextWidth.value) return CHART_ZOOM_RESET_MIN_WIDTH;
+  return Math.max(
+    CHART_ZOOM_RESET_MIN_WIDTH,
+    zoomResetTextWidth.value + CHART_ZOOM_RESET_PADDING_X * 2
+  );
+});
+const measureZoomResetText = async () => {
+  await nextTick();
+  const el = zoomResetTextRef.value;
+  if (!el || typeof el.getBBox !== "function") {
+    zoomResetTextWidth.value = 0;
+    return;
+  }
+  try {
+    zoomResetTextWidth.value = el.getBBox().width;
+  } catch {
+    zoomResetTextWidth.value = 0;
+  }
+};
 const resolveDrilldownLink = (link) => {
   if (!props.drilldown) return null;
   const dataset = props.drilldown.datasets.find((d) => d.id === link.id);
@@ -665,6 +694,22 @@ const {
   pxToCategoryIndex,
   WHEEL_ZOOM_STEP
 } = zoom;
+watch(
+  [zoomResetAriaLabel, isZoomed, () => props.zoomable],
+  /*********************************************************
+   * Promesse flottante, deliberement
+   *
+   * @description
+   * La mesure se fait en `flush: 'post'` et rien n'attend la
+   * promesse. Le `void` qui marquait cette intention est retire
+   * (Sonar #771) : la valeur de retour reste ignoree a l'identique,
+   * et le callback rend toujours `undefined`.
+   ********************************************************/
+  () => {
+    measureZoomResetText();
+  },
+  { flush: "post", immediate: true }
+);
 const visibleCategories = computed(() => {
   if (!props.zoomable) return activeCategories.value;
   const len = activeCategories.value.length;