origam 2.18.4 → 2.18.6

package/CHANGELOG.md

@@ -18,6 +18,144 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+### Fixed — #818 baseline shrink : les 8 `color-contrast` du DS (8 → 0)
+
+⚠️ **Ce lot porte sur le DS lui-même, pas sur une palette marketing** : il
+part dans le paquet npm publié, un consommateur le reçoit.
+
+Recompté sur `a11y-violations.baseline.json` (aucun chiffre repris
+d'ailleurs) : **18 violations / 17 clés**, dont **8 `color-contrast`**.
+Mesurées par axe-core en navigateur réel (Playwright + Histoire statique,
+thème `origamTheme` — celui que `histoire.setup.ts` installe via
+`createOrigam()`), elles valaient **15 nœuds** en défaut. Ce ne sont pas 8
+défauts : ce sont **3 causes**.
+
+**Cause 1 — une `opacity` décorative délave le TEXTE qu'elle contient**
+(3 entrées : `OrigamNumberField`, `OrigamDatePickerField`,
+`OrigamDataTableRows`). `opacity` crée un groupe de composition qui
+s'applique à tout le sous-arbre, pas au seul trait qu'on visait.
+- `OrigamField` : le label flottant est monté DANS
+  `.origam-field__outline--notch`, dont l'`opacity: .38` ne visait que la
+  bordure. Mesuré : `#6d28d9` à .38 sur blanc → `#c8adf1`, soit **1.96:1**.
+  L'alpha passe sur `border-color` (`color-mix`) — trait identique, label à
+  pleine opacité : **7.10:1**. Appliqué aux trois variantes (`outlined`,
+  `underlined`, `filled`).
+- `OrigamDataTable` : `.origam-data-table--loading .origam-data-table-cell`
+  voilait aussi les en-têtes. Mesuré : `#6d28d9` à .5 → `#b694ec`,
+  **2.38:1**. Remonter l'opacité ne sauve pas la règle (il faudrait ≥ .82,
+  ce n'est plus un voile) : le voile épargne désormais les en-têtes, qui
+  sont la structure du tableau et non la donnée rafraîchie → **6.52:1**.
+
+**Cause 2 — un premier plan choisi sans regarder la surface réellement
+peinte** (4 entrées : `OrigamPicker`, `OrigamDatePicker`,
+`OrigamUtilities` ×2). Même famille que #777 (Card) et #514.
+- `--origam-picker-title---color` épinglait `text---secondary` (`#525252`)
+  quel que soit le fond ; sur un en-tête `bgColor="primary"` (`#7c3aed`)
+  cela donnait **1.37:1**. Le token vaut désormais `currentColor` : le
+  titre suit le premier plan de sa surface → **5.70:1** sur primary, et il
+  s'aligne visuellement sur le reste de l'en-tête.
+- `.origam--color-{intent}` lisait `---fg`, le premier plan *sur* la
+  couleur (blanc) — donc `.origam--color-primary` peignait blanc sur
+  `#fafafa`, **1.04:1** : 5 des 7 pastilles étaient littéralement
+  invisibles. Ces classes miroitent désormais `tokenForegroundForIntent()`
+  (`---fgSubtle`), c'est-à-dire **la valeur que la déclaration inline du
+  même prop `color="{intent}"` applique déjà et qui l'emporte sur la
+  classe** : la correction fait converger les deux canaux (cf. #514, « 7
+  intents sur 8 rendaient une couleur différente »). 4.81:1 à 6.81:1 selon
+  l'intention.
+- `.origam--bg-{intent}` porte désormais son premier plan apparié
+  (`---fg`), l'appariement que `useColor()` effectue déjà sur le canal
+  inline pour `bgColor`. Sans lui, du markup nu héritait de l'encre de la
+  page. Les 7 paires sont ≥ 4.5:1 (4.83 → 19.80).
+
+**Cause 3 — un couple en dur réellement insuffisant** (1 entrée :
+`OrigamChartRangeSelector`). Le bouton actif peignait blanc sur `#3b82f6`,
+**3.68:1**. `#3b82f6` n'appartient à **aucune échelle du DS** (bleu
+Tailwind) : c'était une valeur isolée, et c'est elle qui produisait la
+violation. Corriger le contraste en gardant une valeur hors échelle aurait
+réglé le symptôme en laissant la cause — l'état actif rejoint donc la
+convention que `chip--selected`, `pagination__item---active` et `stepper`
+appliquent déjà, **la paire complète** :
+`--origam-color__action--primary---bg` + `---fg` (**5.70:1**), survol
+`---bgHover` + `---fg` (**7.10:1**). Le premier plan passe du token brut
+`--origam-color---white` au sémantique `---fg` : l'état sélectionné
+devient **atteignable par le theming**, ce qu'un `#3b82f6` en dur ne serait
+jamais. Mesuré rendu : `rgb(124, 58, 237)` sur `rgb(255, 255, 255)`.
+
+Baseline : **18 → 10 violations, 17 → 10 clés, zéro `color-contrast`**.
+Aucune autre entrée touchée. Formule de contraste reprise telle quelle de
+`packages/tests/e2e/token-intent-contrast.spec.ts` (témoins rejoués :
+noir/blanc **21.00**, `#767676` **4.54**, `#777777` **4.48**).
+
+⚠️ **Rupture visuelle assumée** (les ruptures sont gratuites sur ce dépôt,
+mais celles-ci se voient) : `.origam--color-{intent}` passe du blanc à la
+couleur de l'intention ; `.origam--bg-{intent}` impose son premier plan ;
+le titre de Picker suit sa surface (sur un Picker neutre il passe du gris
+`#525252` à l'encre héritée) ; le bouton actif de `OrigamChartRangeSelector`
+passe du bleu au violet de l'identité (`action--primary`), comme tout autre
+état sélectionné du DS.
+
+### Fixed — #818 baseline shrink : structure ARIA — `aria-required-parent`/`aria-required-children`/`listitem`/`aria-prohibited-attr` (4 entrées)
+
+Recompté sur `a11y-violations.baseline.json` **après rebase sur `develop`**
+(le lot `button-name`/`scrollable-region-focusable` ci-dessous, #892, est
+passé pendant ce travail et a déjà fait bouger le compteur : 18/17 → 12/12
+avant ce commit) : **12 violations / 12 clés → 8 violations / 8 clés** avec
+ce lot. Les quatre entrées traitées ici sont la même famille de défaut vue
+sous quatre angles : un rôle ARIA exigeant un parent ou des enfants d'un
+rôle précis, et l'arbre rendu ne les fournissait pas.
+
+- **`OrigamCalendar` — `aria-required-parent`** (`role="row"` sans parent
+  `grid`/`rowgroup`/`table`/`treegrid`). La ligne d'en-tête des jours
+  (`.origam-calendar__weekdays`, `role="row"`) était un SIBLING de
+  `.origam-calendar__month-grid` (qui seul portait `role="grid"`), jamais un
+  descendant. `role="grid"` + l'`aria-label` du mois sont montés d'un cran,
+  sur `.origam-calendar__body--month` (qui enveloppe déjà les deux) ; la
+  grille interne redevient un simple conteneur de mise en page. Les lignes du
+  mois (`role="row"`, déjà correctement rattachées) ne changent pas de statut.
+- **`OrigamListGroup` — `aria-required-children`** (`<origam-list>` /
+  `role="list"` ou `"listbox"` sans AUCUN `listitem`/`option` descendant
+  lorsque le groupe est fermé — l'activateur porte délibérément aucun rôle,
+  ce n'est pas une ligne de la liste). Le groupe entier (activateur + sous-
+  liste) est désormais lui-même compté comme UNE ligne de la liste ambiante,
+  via un nouveau `groupRole` calculé sur `list.itemRole` : `listitem` en mode
+  `list` (seul rôle que `list` autorise comme enfant — vérifié empiriquement
+  contre `axe-core@4.13`, `role="group"` y est refusé), `group` en mode
+  `listbox` (rôle explicitement autorisé là). Sans liste ambiante (composant
+  autonome), aucun rôle n'est posé — un `listitem` hors de tout `list`
+  aurait simplement déplacé la violation vers `aria-required-parent`.
+  `OrigamListGroupActivator.story.vue` plaçait ses lignes hors du slot
+  `#items` (bug de story pré-existant, invisible tant que le wrapper ne
+  portait aucun rôle) ; corrigé dans le même commit — sans quoi le nouveau
+  rôle aurait cassé la ligne réelle imbriquée (`aria-required-parent` par
+  ricochet, capturé en re-testant la suite complète après le fix).
+- **`OrigamFileFieldListItem` — `listitem`** (un `<li>` isolé sans `<ul>`
+  parent). Le composant réel est toujours monté par `OrigamFileField` dans
+  un vrai `<ul>` — la violation venait uniquement de la story qui démontre
+  le sous-composant seul, enveloppé dans un `<div>`. Les six Variants de
+  `OrigamFileFieldListItem.story.vue` enveloppent désormais le `<li>` dans un
+  `<ul role="list">` (le `role="list"` explicite est une marge de sécurité
+  contre le bug WebKit qui retire la sémantique de liste implicite quand
+  `list-style: none` est appliqué — présent aussi sur le vrai
+  `OrigamFileField.vue`, non corrigé ici, aucun outil de la suite ne le
+  détecte).
+- **`OrigamChartMap` — `aria-prohibited-attr`** (`aria-label` sur un
+  `<path>` SVG sans rôle). `:role="country.hasData ? 'button' : undefined"`
+  gérait déjà le cas « pays sans donnée », mais `:aria-label` restait posé
+  sans condition — un `<path>` sans rôle a un rôle implicite `generic`, qui
+  interdit `aria-label`. `aria-label` suit désormais la même condition que
+  `role`.
+
+**Preuve** : porte a11y ciblée (`OrigamCalendar`/`OrigamListGroup`/
+`OrigamFileFieldListItem`/`OrigamChartMap`/`OrigamListGroupActivator`
+Default Variant) verte, `axe-core` réel via Playwright + Histoire statique
+(`E2E_STATIC=1`). Contrôle positif exécuté sur `OrigamListGroup` : rôle
+retiré → `aria-required-children` NOUVELLE (non baselinée) → `exit 1` réel ;
+rôle restauré → vert. Suite a11y complète (218 stories + 8 Variants
+d'intention) rejouée après le lot : **226 passed, 0 failed**. Suite unitaire
+complète : **7149 passed**. `pnpm -F origam guards` 28/28, `guards:self`
+15/15, `type-check` et `pnpm audit` propres.
+
 ### Fixed — #818 baseline shrink : `aria-allowed-attr`/`aria-prohibited-attr`/`aria-valid-attr-value` (12 des 25 entrées)
 
 Recompté sur `a11y-violations.baseline.json` (pas repris d'un chiffre cité
@@ -89,6 +227,83 @@ les ruptures, elles, ne le sont pas — voir "Work priorities and versioning"
 du `CLAUDE.md`. `origam` n'a aucun consommateur : les deux ruptures
 ci-dessous partent en **mineure**, sans shim ni période de grâce.
 
+### Fixed — `button-name` et `scrollable-region-focusable` (6 des 18 violations laissées de côté par le lot précédent)
+
+Recompté sur `a11y-violations.baseline.json` avant de commencer (pas repris
+d'un chiffre cité ailleurs) : **18 violations / 17 clés**, dont deux familles
+explicitement laissées de côté par le lot ci-dessus.
+
+**`button-name` (3, cause commune)** — `OrigamDataTableGroupHeaderRow`,
+`OrigamDatePicker`, `OrigamDatePickerControls` rendaient chacun un
+`<origam-btn icon="…">` sans `aria-label`/`aria-labelledby`/`title` : un
+bouton icône réel, annoncé "button" et rien d'autre par un lecteur d'écran
+(`OrigamBtn` avertit déjà de ce cas précis en dev depuis #653, mais ne
+fabrique jamais de libellé — cf. son commentaire `isUnnamedIconOnly`, à
+raison : un libellé deviné tairait axe sans rien dire à l'utilisateur).
+Corrigé à la source de chaque bouton (pas dans `OrigamBtn`, qui n'a pas
+l'information sémantique) :
+- `OrigamDataTableGroupHeaderRow` — le bouton d'expand/collapse du groupe
+  reçoit `aria-expanded` + `aria-label` dynamique (`origam.data_table_group_header_row.{expand_group,collapse_group}`),
+  même motif que le correctif `data_table_row.{expand_row,collapse_row}`
+  déjà en place sur `OrigamDataTableRow`.
+- `OrigamDatePickerControls` — les 3 boutons icône (bascule mois/année,
+  précédent, suivant) reçoivent chacun un `aria-label` via `useLocale()`
+  (`origam.date_picker_controls.{toggle_year,prev,next}`).
+- `OrigamDatePicker::default` en héritait sans bouton icône propre — sa
+  Variant par défaut rend `OrigamDatePickerControls`, donc le correctif
+  ci-dessus l'assainit aussi ; son AUTRE violation (`color-contrast`,
+  hors périmètre) reste dans la baseline.
+
+Nouvelles clés ajoutées à `en.json` ET `fr.json` dans le même commit,
+`snake_case` minuscule, aucune chaîne en dur dans les templates.
+
+**`scrollable-region-focusable` (3, cause commune)** — `OrigamInfiniteScroll`,
+`OrigamInfiniteScrollIntersect` (dont la story monte elle-même un
+`OrigamInfiniteScroll`) et `OrigamSlideGroup` rendent chacun un conteneur
+`overflow: auto` sans jamais être atteignables au clavier quand leur contenu
+n'a aucun descendant focusable — axe-core l'exige (technique WAI WCAG
+SCR29).
+
+⚠️ `tabindex="0"` inconditionnel a été essayé et écarté : `OrigamSlideGroup`
+a un seul consommateur réel (`OrigamChipGroup`), qui slotte toujours des
+puces focusables — y poser `tabindex` sans condition aurait inséré un arrêt
+de tabulation redondant AVANT les items, dégradant le parcours clavier réel
+pour corriger un cas de story synthétique. Le correctif retenu conditionne
+donc le `tabindex` sur l'ABSENCE de descendant focusable (`focusableChildren()`,
+déjà utilisé ailleurs dans le DS) :
+- `OrigamInfiniteScroll` — `hasFocusableDescendant` (recalculé par
+  `MutationObserver` sur la racine, le contenu s'accumulant en continu via
+  `@load`) pilote un `:tabindex` conditionnel sur la racine.
+- `OrigamSlideGroup` — `hasFocusableContent` (recalculé dans le même
+  `requestAnimationFrame` qui mesure déjà `isOverflowing`) pilote un
+  `:tabindex` conditionnel sur `.origam-slide-group__container`, l'élément
+  RÉELLEMENT scrollable — distinct de la racine, qui porte déjà son propre
+  `tabindex` conditionnel pour un mécanisme sans rapport (proxy de focus
+  vers le premier item, cf. `handleFocus`) qu'axe ne peut pas lire ici
+  puisque `__container` n'est pas un ancêtre de la racine.
+- `OrigamInfiniteScrollIntersect::default` en héritait sans conteneur
+  scrollable propre — sa Variant par défaut monte un `OrigamInfiniteScroll`,
+  donc le correctif ci-dessus l'assainit aussi.
+
+**Bilan mesuré** : baseline **18 clés/17 violations → 12 clés/12 violations**
+(6 clés retirées : `OrigamDataTableGroupHeaderRow`, `OrigamDatePickerControls`,
+`OrigamInfiniteScroll`, `OrigamInfiniteScrollIntersect`, `OrigamSlideGroup`,
+et `button-name` retiré de l'entrée `OrigamDatePicker` qui garde son
+`color-contrast`). Suite `pnpm -F @origam/tests test:a11y` complète (226
+tests, catalogue 218/218) : **226 passed**, aucune régression sur les 36
+composants à baseline vide. Contrôle positif exécuté sur
+`OrigamDataTableGroupHeaderRow` : retirer `aria-expanded`/`aria-label` fait
+échouer la porte avec `1 violation(s) a11y NOUVELLE(S) non baselinée(s) —
+button-name` (`REAL_EXIT=1`) ; le correctif remis, la suite ciblée repasse
+au vert. `pnpm -F origam guards` (28/28), `guards:self` (15/15),
+`pnpm -F @origam/tests test:e2e:audit` (3/3) et `pnpm run lint`
+(`--max-warnings 0`) verts sur le dernier commit.
+
+**Laissé de côté, délibérément** (12 clés / 12 violations restent dans
+`a11y-violations.baseline.json`) : `color-contrast` (8 instances, périmètre
+d'autres agents), `aria-required-parent`/`aria-required-children`/`listitem`/
+`aria-prohibited-attr` (un défaut chacun, cause non partagée avec ce lot).
+
 ### ⚠️ BREAKING — `click:prepend` / `click:append` retirés d'`IBtnEmits` (#443, #577)
 
 `<OrigamBtn>` n'émet plus `click:prepend` ni `click:append` — ni au niveau du