Utilitaires

Interactions

Deux familles de classes modifient la façon dont la souris et la sélection agissent sur un élément : user-select-* règle la sélection du texte, pe-none et pe-auto activent ou désactivent les événements du pointeur.

Sélection du texte#

user-select-all sélectionne tout le contenu en un clic, pratique pour copier un IBAN. user-select-none empêche la sélection. user-select-auto rétablit le comportement du navigateur.

IBAN à copier :

CI93 CI00 8001 0123 4567 8901 2345

Ce texte ne peut pas être sélectionné à la souris.

Ce texte se sélectionne normalement.

<div class="bg-body-secondary border p-3">
  <p class="mb-2">IBAN à copier :</p>
  <p class="user-select-all font-monospace bg-body border p-2 mb-3">CI93 CI00 8001 0123 4567 8901 2345</p>
  <p class="user-select-none mb-2">Ce texte ne peut pas être sélectionné à la souris.</p>
  <p class="user-select-auto mb-0">Ce texte se sélectionne normalement.</p>
</div>

Événements du pointeur#

Avec pe-none, l’élément ne réagit plus à la souris ni au toucher : le clic traverse l’élément. pe-auto rétablit la réaction.

Lien désactivé (souris et toucher ignorés)

Lien actif

<div class="bg-body-secondary border p-3">
  <p class="mb-2"><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">Lien désactivé</a> (souris et toucher ignorés)</p>
  <p class="mb-0"><a href="#" class="pe-auto">Lien actif</a></p>
</div>

Désactiver un lien correctement#

pe-none n’empêche pas le clavier d’activer le lien. Ajoutez tabindex="-1" et aria-disabled="true" pour retirer le lien de la navigation au clavier et annoncer l’état.

Valider le virement Étape suivante indisponible

<div class="d-flex flex-wrap gap-2 bg-body-secondary border p-3">
  <a href="#" class="btn btn-primary">Valider le virement</a>
  <a href="#" class="btn btn-primary disabled pe-none" tabindex="-1" aria-disabled="true">Étape suivante indisponible</a>
</div>

Classes

Classes
Classe	Propriété CSS	Effet
`user-select-all`	`user-select: all`	Un clic sélectionne tout le contenu de l’élément.
`user-select-auto`	`user-select: auto`	Comportement par défaut du navigateur.
`user-select-none`	`user-select: none`	Le texte ne peut pas être sélectionné.
`pe-none`	`pointer-events: none`	L’élément ignore la souris et le toucher ; le clic atteint l’élément en dessous.
`pe-auto`	`pointer-events: auto`	L’élément réagit au pointeur, même si un parent est en `pe-none`.

Variables Sass

Variables Sass
Variable	Rôle
`$utilities` (clé `"user-select"`)	Valeurs `all`, `auto` et `none` ; classes `user-select-*`.
`$utilities` (clé `"pointer-events"`)	Valeurs `none` et `auto` ; la classe commence par `pe`, d’où `pe-none` et `pe-auto`.

Précision sur `pe-`

Le préfixe pe- sert aussi aux marges intérieures de fin (pe-0 à pe-5, voir Espacement). Les deux familles n’ont aucun lien : pe-none et pe-auto règlent le pointeur, les chiffres règlent le padding.

Bonnes pratiques

À faire

Utilisez user-select-all sur les valeurs que l’utilisateur copie souvent : IBAN, numéro de compte, référence de virement.
Associez pe-none à tabindex="-1" et aria-disabled="true" pour désactiver un lien.
Pour un vrai bouton, utilisez l’attribut disabled plutôt que pe-none.

À éviter

N’utilisez pas user-select-none pour « protéger » une information : elle reste copiable autrement.
Ne comptez pas sur pe-none pour interdire une action : au clavier, l’élément reste atteignable.
N’appliquez pas user-select-none à du texte que l’utilisateur doit pouvoir copier ou traduire.

Accessibilité

pe-none ne change rien pour le clavier ni pour les lecteurs d’écran : un lien reste focalisable et activable avec Entrée.
Indiquez l’état désactivé avec aria-disabled="true" et rendez-le visible par plus que la souris.
Gardez la sélection possible sur les textes : certaines personnes s’en servent pour lire, copier ou faire traduire.