Conseils
Lorsque nous demandons aux utilisateurs leur numéro de permis de conduire, nous voulons leur dire d'emblée où le trouver. Pour les utilisateurs qui ont besoin de plus d'aide, nous fournissons une photo du recto de la carte de permis de conduire du Nouveau-Brunswick pour montrer où se trouve ce numéro.
Actuellement, certains Néo-Brunswickois possèdent encore l'ancienne carte. Nous devons donc montrer une image des deux dans le contenu modal jusqu'à ce que ces anciennes cartes aient toutes expiré. Lorsqu'elles le seront, ce composant sera mis à jour pour en tenir compte.
Component
HTML
<label for="first-name"><a tabindex="0" data-target="modal-driverslicence" aria-haspopup="dialog"
aria-controls="modal-driverslicence" class="modal-button info">Numéro de permis de conduire</a></label>
<div class="gnb-form-helper-text">
Le numéro de votre permis de conduire est composé de 7 chiffres et se trouve au recto de votre carte.
</div>
<input type="text" name="first-name" id="first-name" />
<!-- Boîte de dialogue modale d'informations sur les champs - placez-la à l'EXTÉRIEUR de n'importe quel élément <form> de votre page. -->
<div class="gnb-modal" id="modal-driverslicence" role="dialog" aria-modal="true"
aria-labelledby="modal-title-driverslicence" aria-describedby="modal-description-driverslicence">
<dialog>
<button class="gnb-btn-close close-modal-button" data-target="modal-driverslicence"><span
class="sr-only">Fermer la fenêtre modale</span><i class="fa-solid fa-xmark"></i></button>
<div class="gnb-modal-header">
<h2 id="modal-title-driverslicence">Numéro de permis de conduire</h2>
</div>
<div class="gnb-modal-body" id="modal-description-driverslicence">
<p>
Le numéro de votre permis de conduire est composé de 7 chiffres et se trouve au recto de votre carte.
</p>
<div class="row">
<div class="col-sm-6 center">
<img src="../../img/nb-licence-number.jpg"
alt="Carte de permis de conduire du Nouveau-Brunswick avec le numéro surligné" />
</div>
<div class="col-sm-6 center">
<img src="../../img/nb-licence-number-old.jpg"
alt="Ancienne carte de permis de conduire du Nouveau-Brunswick avec le numéro surligné" />
</div>
</div>
</div>
</dialog>
</div>
<!-- Ajoutez ceci en bas de votre page avant la balise de fermeture du corps -->
<script src="gnb-modals-1.0.1.js"></script>