Composants
Invitation (démo)Nouveau
En mode démo, une action qui demande un vrai compte n’affiche pas d’erreur sèche : elle invite. La personne peut créer son compte ou continuer la visite. Les vrais utilisateurs ne sont jamais concernés.
Essayer
« Créer mon compte » ouvre vraiment la page d’inscription (avec retour ici) : c’est le composant réel, pas une imitation.
// Ouvre l'invitation et dit ce que la personne a choisi.
const partie = await AubInvite.require({ action: 'envoyer ce message' });
// true = elle part créer son compte (redirection vers auth.aubota.xyz/signup)
// false = « Continuer la visite », Échap ou clic à côté
// Ou : un handler qui invite en démo et s'exécute normalement sinon.
bouton.addEventListener('click', AubInvite.guard(envoyer, { action: 'envoyer ce message' }));Installer
Inclus dans aubui.js (complet et léger). Seul :
<script src="https://ui.aubota.xyz/js/aubui-invite.js" defer></script>Activer le mode démo
AubInvite.isDemo() est vrai si l’un de ces marqueurs est posé (par la page de démo, jamais pour un compte réel) :
<script>window.AUBOTA_DEMO = true;</script>
<!-- ou --> <html lang="fr" data-demo>
<!-- ou --> <body data-demo>API window.AubInvite
| Appel | Renvoie | Rôle |
|---|---|---|
require(opts) | Promise<boolean> | Ouvre la lightbox (même hors démo : c’est à toi de tester isDemo()). |
isDemo() | boolean | Mode démo actif ? |
guard(fn, opts) | fonction | En démo : invite et renvoie false. Sinon : exécute fn avec le même this et les mêmes arguments. |
| Option | Défaut |
|---|---|
action | — (texte échappé, inséré dans « Pour …, il te faut un compte ») |
title | « Crée ton compte AUBOTA » |
body | Phrase générée depuis action. Attention : body est inséré en HTML — n’y mets jamais de texte venant d’un utilisateur. |
cta · dismiss | « Créer mon compte » · « Continuer la visite » |
next | URL de retour après inscription (défaut : la page courante), passée en ?next=. |
Accessibilité
role="dialog"+aria-modal="true"; le focus va sur « Créer mon compte », Échap = continuer la visite.- Le ton est une invitation, pas un refus : formule l’
actioncomme un verbe (« ajouter une liste »), pas comme une erreur. - Limites actuelles : pas de piège à focus ni de retour du focus à la fermeture (contrairement à AubuiDialog), pas de
aria-labelledbysur le titre.