origam 2.18.4 → 2.18.5

package/CHANGELOG.md

@@ -89,6 +89,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

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/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/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/Slide/OrigamSlideGroup.vue

@@ -25,6 +25,7 @@
 				key="container"
 				ref="containerRef"
 				class="origam-slide-group__container"
+				:tabindex="isOverflowing && !hasFocusableContent ? 0 : undefined"
 				@scroll="handleScroll"
 		>
 			<div
@@ -138,6 +139,7 @@ const { marginClasses, marginStyles } = useMargin(props);
 const { displayClasses, mobile } = useDisplay(props);
 const group = useGroup(props, ORIGAM_SLIDE_GROUP_KEY);
 const isOverflowing = shallowRef(false);
+const hasFocusableContent = shallowRef(false);
 const scrollOffset = shallowRef(0);
 const containerSize = shallowRef(0);
 const contentSize = shallowRef(0);
@@ -172,6 +174,9 @@ if (IN_BROWSER) {
         contentSize.value = contentRect.value[sizeProperty];
         isOverflowing.value = containerSize.value + 1 < contentSize.value;
       }
+      if (contentRef.value) {
+        hasFocusableContent.value = focusableChildren(contentRef.value).length > 0;
+      }
       if (firstSelectedIndex.value >= 0 && contentRef.value) {
         const selectedElement = contentRef.value.children[lastSelectedIndex.value];
         scrollToChildren(selectedElement, props.centerActive);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.18.4",
+  "version": "2.18.5",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [