origam 2.18.3 → 2.18.5

package/CHANGELOG.md

@@ -18,12 +18,154 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+### 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é
+ailleurs) : la baseline #818 portait **25 clés / 33 violations** sur 24
+composants, dont **12 `aria-allowed-attr`** concentrées sur la famille
+`OrigamDataTable*`. Cause commune, pas 12 défauts distincts :
+`OrigamTextField` ne posait pas `inheritAttrs: false` alors qu'il
+redistribue déjà explicitement chaque attr de fall-through
+(`filterInputAttrs` → `rootAttrs` sur `<origam-input>`, `inputAttrs` sur le
+vrai `<input>`). Sans ce flag, Vue appliquait EN PLUS le `$attrs` brut sur
+la racine `<origam-input>`, qui ne s'y soustrayait pas non plus — doublant
+`aria-haspopup`/`aria-expanded`/`aria-controls`/`aria-valuenow`/… sur le
+`<div>` wrapper, qui ne porte aucun rôle les autorisant. `role` (prop
+déclarée sur `OrigamTextField`) n'atteignait par ailleurs que
+`<origam-field>`, jamais le vrai `<input>` — c'est ce défaut exact que le
+commentaire `KNOWN_FAILURES` documentait déjà pour `OrigamSelect` (test
+`fixme`).
+
+**Correctif à la source** (`packages/ds/src/components/TextField/OrigamTextField.vue`) :
+`defineOptions({ inheritAttrs: false })` + `role` désormais aussi lié sur le
+`<input>` réel. Élimine, mesuré axe-core en navigateur réel (Playwright +
+Histoire statique) :
+- `OrigamSelect` — sort de `KNOWN_FAILURES` (`components.spec.ts`), test
+  `fixme` → vert.
+- `OrigamDataTable`, `OrigamDataTableFooter`, `OrigamDataTableHeaderCell`,
+  `OrigamDataTableHeaders`, `OrigamDataTableHeadersCell`,
+  `OrigamDataTableRow` — `aria-allowed-attr` disparaît, entrée de baseline
+  retirée entièrement.
+- `OrigamDataTableGroupHeaderRow`, `OrigamDataTableRows`, `OrigamNumberField`
+  — `aria-allowed-attr` disparaît, l'entrée reste pour leur AUTRE violation
+  (`button-name` / `color-contrast`), non touchée par ce lot.
+- `OrigamDataTableHeadersCellMobile` — `aria-allowed-attr` ET
+  `aria-prohibited-attr` disparaissent (même fuite, deux règles axe
+  différentes), entrée retirée entièrement.
+
+**Deuxième cause, distincte, deux composants** —
+`packages/ds/src/components/ColorPickerField/OrigamColorPickerField.vue` et
+`.../DatePickerField/OrigamDatePickerField.vue` posaient un
+`aria-haspopup` avec une valeur inventée (`'colorpickerbox'` /
+`'datepickerbox'`, jamais un token ARIA valide) sur l'élément
+`.origam-field` (via `activator="parent"` d'`OrigamMenu`), sans `role` le
+justifiant. Remplacé par `aria-haspopup: 'dialog'` (motif WAI-ARIA « Date
+Picker Dialog ») + `role: 'combobox'` sur le même élément — même principe
+que `comboboxAriaAttrs` d'`OrigamSelect`. `aria-allowed-attr` ET
+`aria-valid-attr-value` disparaissent pour les deux ; `OrigamColorPickerField`
+est intégralement retiré de la baseline, `OrigamDatePickerField` y reste
+pour son `color-contrast` (non touché).
+
+**Bilan mesuré** : baseline #818 25 clés/33 violations → **17 clés/18
+violations**. 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é : réintroduire l'ancien
+comportement fait échouer `a11y — OrigamSelect Default Variant` avec
+`aria-allowed-attr`/`aria-prohibited-attr` NON baselinés — la porte capte
+la régression, pas seulement l'édition du JSON.
+
+**Laissé de côté, délibérément** (17 clés / 18 violations restent dans
+`a11y-violations.baseline.json`, cf. #818) : `color-contrast` (8 instances —
+plusieurs agents dédiés au contraste travaillent déjà sur ce périmètre),
+`button-name` (3, boutons icône sans libellé — famille distincte),
+`scrollable-region-focusable` (3), `aria-required-parent`/`aria-required-children`/
+`listitem`/`aria-prohibited-attr` (`OrigamChartMap`, sans lien avec ce
+correctif) — un défaut chacun, cause non partagée avec ce lot, non
+instruit ici.
+
 Récolte de deux dépréciations posées "pour la prochaine majeure" avant que le
 `CLAUDE.md` n'acte que `3.0.0` est réservé à la séparation en modules et que
 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
@@ -156,6 +298,105 @@ conclure qu'elle ne l'est plus par défaut.
 
 ### Fixed
 
+- **#871 (clôture) — les 7 dernières violations AA étaient UN défaut de
+  palette répété, pas sept défauts de composant.** Mesuré avec
+  `packages/tests/audit/dark-contrast.audit.mjs` : **7 / 1 664 → 0 / 1 664**,
+  les 8 identités × 2 modes × 2 portées, quatre contrôles verts des deux
+  côtés. Exactement **7 lignes changent, aucune ne se dégrade**, et le ratio
+  minimum de toute la surface passe de 3.65 à **4.70**.
+
+  Les 7 se répartissaient en deux causes, toutes deux dans
+  `packages/marketing/src/themes` — **aucune dans le DS**, qui était déjà à
+  zéro :
+
+  | cause | marque · mode | couple | avant | après |
+  |---|---|---|---|---|
+  | encre héritée du mode clair | `apple` sombre | `#ffffff` → `#000000` sur `#0a84ff` | 3.65 | **5.76** |
+  | encre héritée du mode clair | `ecom` sombre | `#ffffff` → `#1a0f0a` sur `#f43f5e` | 3.67 | **5.12** |
+  | jeton de rôle inversé | `ecom` clair | `action.primary.bg` → `.fgSubtle` sur la crème | 4.43 | **5.93** |
+
+  **La cause commune.** Le mode sombre ÉCLAIRCIT l'accent de marque — c'est
+  la bonne pratique pour une grande surface (`#0071e3` → `#0a84ff` chez
+  `apple`, rose-600 → rose-500 chez `ecom`) — mais les deux palettes gardaient
+  l'encre `#ffffff` de leur jumeau clair. Or chacune applique **déjà** la règle
+  inverse à ses intentions `feedback` : les 4 d'`ecom` et 3 des 4 d'`apple`
+  encrent leur accent éclairci avec le `text.inverse` de la palette.
+  `action.primary` était la dernière exception. Le badge n'était pas en cause :
+  `--origam-badge__badge---{background-color,color}` lit exactement ce couple —
+  tout comme `--origam-btn--primary---*`, qui n'est pas dans la sonde et était
+  donc en défaut sans être mesuré.
+
+  ⚠️ **On n'a PAS foncé l'accent**, bien que ce soit l'autre levier : chez
+  `apple`, `action.primary.bg` sert aussi d'ENCRE (le bloc `components` passe
+  ce `var()` en `color` sur `origam-breadcrumb-item`). Le ramener à `#0071e3`
+  donnait 4.70 sous du blanc mais faisait tomber le fil d'Ariane à **4.47** sur
+  le fond noir — un défaut échangé contre un autre. Vérifié par calcul avant
+  d'écrire la moindre ligne.
+
+  La 3ᵉ cause est une erreur de RÔLE : `bg` est un jeton de surface, `fgSubtle`
+  la teinte prévue pour être LUE sur une surface neutre. `ecomDarkTheme` posait
+  déjà `fgSubtle` ; seul le bloc clair se trompait de jeton. Les deux modes sont
+  désormais symétriques.
+
+- **#871 — une 8ᵉ violation, que la sonde ne pouvait pas voir** :
+  `material` sombre, `feedback.success`, `#1b5e20` sur `#81c784` = **3.91**
+  → `#0d3b10` = **6.32**. La sonde de `dark-contrast.audit.mjs` ne rend qu'UNE
+  intention par famille de composant, donc elle ne peint jamais
+  `feedback.success`. Trouvée par la spec statique ajoutée ci-dessous. C'est
+  l'encre qui était l'intruse, pas le conteneur : les trois autres intentions
+  sombres de `material` tiennent 5.79 / 7.70 / 7.71 avec des encres bespoke
+  très profondes, `success` était la seule à se contenter du green-900 de la
+  rampe.
+
+- **#871 — l'audit lui-même ne démarrait plus.** Son `npx vite build` résolvait
+  vite par le PATH, via un lien `node_modules/.bin` qu'un peer auto-installé
+  ne garantit pas : sur un `pnpm install --frozen-lockfile` propre,
+  `packages/tests/node_modules/.bin/` ne contient que `playwright` et `vitest`,
+  et la commande mourait en `127 — sh: vite: command not found`. **L'audit ne
+  rendait plus aucun chiffre**, et rien ne le signalait puisque rien ne le
+  rejoue en CI. `resolveViteBin()` passe désormais par le realpath de
+  `@vitejs/plugin-vue`, ce qui ne dépend ni du PATH ni du hoisting et
+  sélectionne la copie de vite que le plugin utilise réellement (deux majeures
+  coexistent dans le magasin). Les commentaires qui affirmaient le contraire
+  dans les deux fichiers ont été corrigés.
+
+- **#871 — l'état SURVOL était en défaut plus grave encore, et le correctif
+  d'encre l'a réglé sans qu'on y touche.** Le survol n'a pas d'encre à lui :
+  `--origam-btn--primary---background-color-hover` bascule la surface, mais il
+  n'existe **aucun** `--origam-btn--primary---color-hover` (ni de
+  `--origam-badge__badge---color-hover`) — l'encre reste `action.primary.fg`
+  dans les deux états. Sous l'encre blanche, `apple` sombre y tombait à
+  **2.19:1** et `ecom` sombre à **2.69:1** : *pires que n'importe laquelle des
+  7 violations comptées*, et invisibles parce que la sonde de
+  `dark-contrast.audit.mjs` ne rend que l'état au repos.
+
+  **Aucun `bgHover` n'a été modifié.** La direction du survol n'était pas le
+  problème — l'encre l'était. Mesuré sur les deux marques :
+
+  | mode · encre | direction du survol | ratio repos → survol |
+  |---|---|---|
+  | clair · blanche | fonce | 4.70 → **6.95** / **6.29** ↑ |
+  | sombre · blanche *(avant)* | éclaircit | 3.65 → **2.19** / 3.67 → **2.69** ↓ |
+  | sombre · foncée *(après)* | éclaircit | 5.76 → **9.60** / 5.12 → **6.99** ↑ |
+
+  La règle n'est donc pas *« le survol doit foncer »* mais **« le survol doit
+  déplacer l'accent à l'opposé de la clarté de son encre »**. Les palettes la
+  respectaient déjà dans 3 quadrants sur 4 ; le seul cassé l'était par son
+  encre. L'idiome « le survol éclaircit », qui est le bon en mode sombre, est
+  conservé dans les deux marques.
+
+- **#871 — non-régression : `packages/tests/TU/marketing/brand-palette-contrast.spec.ts`.**
+  Les couples `{bg, fg}` littéraux des 7 palettes de marque (14 thèmes) doivent
+  tenir AA. L'audit de #871 est un script qu'on lance à la main : rien ne le
+  rejoue, donc rien n'empêchait une retouche de palette de ramener ces couples
+  en silence. La spec lit les hex **dans l'objet `IOrigamTheme`**, avant toute
+  indirection CSS — la règle jsdom/`var()` du `CLAUDE.md` ne s'y applique pas,
+  et le navigateur reste l'arbitre de ce qui est peint. Elle embarque ses
+  propres garde-fous : les 3 témoins de la formule, un contrôle négatif sur les
+  3 couples corrigés, et un plancher de couverture qui rend bruyante une dérive
+  du filtre. **Vérifiée ROUGE sur `origin/develop`** : 3 échecs / 14 succès.
+  C'est elle qui a trouvé la 8ᵉ violation ci-dessus.
+
 - **#871 — le mode sombre ne peignait qu'à moitié dans un sous-arbre thémé.**
   Les feuilles de tokens portent ~1 761 déclarations **dérivées**
   (`--origam-title---color: var(--origam-color__text---primary)`). Une custom

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/ColorPickerField/OrigamColorPickerField.vue

@@ -331,9 +331,31 @@ const menuProps = computed(() => {
   return {
     ...props.menuProps,
     activatorProps: {
+      /*********************************************************
+       * role + aria-haspopup — #818
+       *
+       * @description
+       * `'colorpickerbox'` was never a valid `aria-haspopup` token
+       * (spec allows `false|true|menu|listbox|tree|grid|dialog`) —
+       * axe-core's `aria-valid-attr-value` flagged it, measured
+       * against a real browser. The popup is a free-form panel
+       * (a color canvas + swatches), not a list of options, so
+       * `'dialog'` is the correct token — same family as the
+       * WAI-ARIA "Date Picker Dialog" pattern `OrigamDatePickerField`
+       * uses right below.
+       *
+       * @description
+       * `role: 'combobox'` is ALSO required here: `activator="parent"`
+       * (below) lands these ARIA attrs on the `.origam-field` wrapper
+       * `<div>`, which carries no role by default — `aria-allowed-attr`
+       * rejects `aria-expanded` on an element whose role doesn't
+       * support it. Same fix, same rationale as
+       * `OrigamSelect.comboboxAriaAttrs` (`role` MUST sit on the same
+       * element as `aria-haspopup`/`aria-expanded`).
+       ********************************************************/
+      role: "combobox",
       ...props.menuProps?.activatorProps || {},
-      "aria-haspopup": "colorpickerbox"
-      // Set aria-haspopup to 'listbox'
+      "aria-haspopup": "dialog"
     },
     contentProps: {
       ...consumerContentProps,

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/DatePickerField/OrigamDatePickerField.vue

@@ -405,9 +405,29 @@ const menuProps = computed(() => {
   return {
     ...props.menuProps,
     activatorProps: {
+      /*********************************************************
+       * role + aria-haspopup — #818
+       *
+       * @description
+       * `'datepickerbox'` was never a valid `aria-haspopup` token
+       * (spec allows `false|true|menu|listbox|tree|grid|dialog`) —
+       * axe-core's `aria-valid-attr-value` flagged it, measured
+       * against a real browser. `'dialog'` matches the WAI-ARIA
+       * "Date Picker Dialog" pattern: a button/combobox opening a
+       * calendar dialog.
+       *
+       * @description
+       * `role: 'combobox'` is ALSO required here: `activator="parent"`
+       * (below) lands these ARIA attrs on the `.origam-field` wrapper
+       * `<div>`, which carries no role by default — `aria-allowed-attr`
+       * rejects `aria-expanded` on an element whose role doesn't
+       * support it. Same fix, same rationale as
+       * `OrigamSelect.comboboxAriaAttrs` (`role` MUST sit on the same
+       * element as `aria-haspopup`/`aria-expanded`).
+       ********************************************************/
+      role: "combobox",
       ...props.menuProps?.activatorProps || {},
-      "aria-haspopup": "datepickerbox"
-      // Set aria-haspopup to 'listbox'
+      "aria-haspopup": "dialog"
     },
     contentProps: {
       ...consumerContentProps,

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/dist/src/components/TextField/OrigamTextField.vue

@@ -91,6 +91,7 @@
 									:readonly="isReadonly"
 									:required="required || undefined"
 									:aria-required="required ? 'true' : undefined"
+									:role="role"
 									:size="1"
 									:type="resolvedInputType"
 									:value="displayValue"
@@ -208,6 +209,7 @@ import { applyMask } from "../../utils/Commons/apply-mask.util";
 import { filterInputAttrs } from "../../utils/Input/input.util";
 import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
 import { resolveMaskConfig } from "../../utils/Commons/resolve-mask-config.util";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   autofocus: { type: Boolean, required: false },
   counter: { type: [Boolean, Number, String], required: false },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.18.3",
+  "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": [