Accessibilité
#Lien direct vers cette sectionPris en charge automatiquement
#Lien direct vers cette section
role="navigation" et aria-labelledby posés sur le conteneur — la région est annoncée
et identifiable par les lecteurs d’écran
(WCAG 1.3.1 ↗ (ouvre dans un nouvel onglet)Info and Relationships : les relations et structures visuelles doivent être déterminables par programmation ou disponibles en texte.).- L’état courant (
current-path) est reflété visuellement et structurellement — les items
actifs, complétés et désactivés sont distingués.
À votre charge
#Lien direct vers cette section
- Labels descriptifs sur chaque
ar-stepper-item. Le label identifie chaque étape
(un numéro d’étape localisé est ajouté en texte masqué) — évitez les labels génériques
(“Étape 1”) au profit de libellés métier (“Mes informations”, “Récapitulatif”).
current-path doit correspondre au path d’un item existant. Une valeur incorrecte
n’active aucun item — aucun feedback visuel ni vocal ne signale l’étape courante.href détermine l’élément rendu pour une étape cliquable. Un href réel (ex. /etape-2)
produit un lien <a> : la navigation native a lieu, sauf si ar-stepper-step-change est
annulé. Un href absent ou égal à # produit un <button> : aucune navigation native, tout
passe par l’événement (routeur de framework, navigation asynchrone). Un Ctrl/Cmd/Maj/Alt + clic
sur un lien réel ouvre un nouvel onglet sans émettre ar-stepper-step-change.
Comportement responsive
#Lien direct vers cette sectionLe composant adapte son rendu selon la largeur de l’écran, au niveau du breakpoint desktop-from
(992 px par défaut) :
- En dessous de
desktop-from : rendu dropdown (mobile).
- À partir de
desktop-from : liste verticale (desktop).
Quand desktop-target est renseigné, la téléportation DOM est également activée : le composant
se déplace dans l’élément ciblé sur desktop, et revient à sa position d’origine sur mobile.
<aside id="stepper-sidebar"></aside>
<ar-stepper desktop-target="stepper-sidebar" desktop-from="992"> ... </ar-stepper>
Utilisation
#Lien direct vers cette sectionÉcouter le changement d’étape
#Lien direct vers cette sectionÉcoutez ar-stepper-step-change, chargez l’étape, puis réassignez currentPath. Le composant reste en attente jusqu’à cette réassignation : en cas d’échec, réassignez l’étape actuelle. L’attribut pending sert à exprimer une attente qui ne passe pas par l’événement, comme un chargement initial.
stepper.addEventListener('ar-stepper-step-change', async (e) => {
const ok = await loadStep(e.detail.to);
stepper.currentPath = ok ? e.detail.to : stepper.currentPath;
});
Mode create vs edit
#Lien direct vers cette sectionLa prop mode détermine quelles étapes sont cliquables. En mode create (défaut), seules les
étapes déjà complétées (avant l’étape courante) sont cliquables — navigation linéaire, cohérente
avec un parcours de création où les étapes suivantes n’ont pas encore de contenu à afficher. Voir la
variante Mode édition pour le mode edit.
Contenu additionnel après le label (after-label)
#Lien direct vers cette sectionChaque ar-stepper-item expose un slot nommé after-label pour afficher un contenu additif à
côté du label — un badge de statut, une icône, une pastille de compteur. Ce contenu s’ajoute au
label sans jamais le remplacer : il reste toujours lu séparément par les lecteurs d’écran
(annoncé via aria-describedby), le label demeure donc le texte qui identifie
l’étape.
<ar-stepper-item path="etape-1-1" label="Mon état civil" href="#">
<span slot="after-label">🔒 Verrouillé</span>
</ar-stepper-item>
Indicateur personnalisé (indicator)
#Lien direct vers cette sectionPar défaut, chaque étape affiche son numéro (via un compteur CSS). Le slot nommé indicator
permet de remplacer entièrement ce contenu — une icône, une coche — sans dépendre d’un thème :
purement décoratif (aria-hidden), il ne modifie jamais l’information de position, toujours
portée séparément par du texte masqué visuellement.
<ar-stepper-item path="etape-1" label="Informations">
<span slot="indicator">✓</span>
</ar-stepper-item>
#Lien direct vers cette section
Avec follow-scroll, la prop current-path se met à jour automatiquement pendant que l’utilisateur scrolle la page : le stepper détecte quelle section est visible et se synchronise sans action de votre part.
<ar-stepper follow-scroll>...</ar-stepper>
Navigation programmatique
#Lien direct vers cette sectionMettre à jour current-path depuis l’extérieur pilote le stepper comme un clic utilisateur :
document.querySelector('ar-stepper').currentPath = 'etape-2';
En mode create, cette mise à jour ne rend pas les étapes suivantes cliquables pour autant — seul mode="edit" lève cette restriction.