3.6.4

3.6.4 (2025-12-17)

Cette version est identique à la version 3.6.3. Il y a eu une erreur lors de la publication de la release 3.6.3, et afin d'éviter des problèmes avec le CDN, nous avons créé une version 3.6.4.

Corrections d'anomalies

• Utilitaire de gestion des liens externes, correction d'une régression introduite à la version 3.6.2. Si l'hyperlien ne contenait aucun texte (ex. juste une image), l'image était remplacée par l'icône de sortie de site. L'affichage des liens externes dans pied de page de site a aussi été corrigée, l'icône de sortie du site est maintenant blanche.

3.6.2

3.6.2 (2025-11-23)

Corrections d'anomalies

• Utilitaire de gestion des liens externes, si le lien contenait un seul mot l'image de sortie du site n'était pas affichée.

Améliorations

• Iconographie, ajout de la nouvelle icône "enveloppe-ouverte".

3.6.1

3.6.1 (2025-10-30)

Corrections d'anomalies

• Composants dialogue modal et boutons utilisés dans une zone de boutons, en mode "mobile", l'ordre d'affichage des boutons est maintenant inversé. Nous le faisions déjà mais si plusieurs boutons étaient de même niveau (ex. secondaire) il était possible que ça ne donne pas le résultat souhaité.

3.6.0

3.6.0 (2025-10-29)

Corrections d'anomalies

• Composant dialogue modal, contenant 3 boutons en mode "mobile", les boutons n'étaient pas affichés dans le bon ordre.

• Composant PIV entête, en "mobile" si le paramètre "urlTitre" était vide(texte au lieu d'un lien), le titre était tout de même cliquable.

Améliorations

• Composant boutons, afin d'uniformiser l'affichage, dans une zone de boutons et que la zone ne contient qu'un bouton, lorsqu'on passe en mode "mobile" ce dernier prend 100% de largeur, exactement comme lorsque la zone contient plus d'un bouton.

Conformité au système de design gouvernemental du Québec

• Composants PIV pied de page, la marge au dessus du pied de page (footer) a été réduite à 72px.

• Composant alerte générale, la couleur du X permettant de masquer l'alerte a été modifiée selon les nouvelles directives.

3.5.1

3.5.1 (2025-10-09)

Correction d'anomalies

• Composant liste déroulante, correction d'une petite regression introduite à la version 3.5.0 qui faisait en sorte que si vous utilisiez des attributs avec la valeur "false" au lieu de simplement ne pas spécifier l'attribut, la valeur "false" n'était pas considérée et "true" était utilisé.

  Ex. si vous mettiez recherchable="false", au lieu de ne pas avoir l'attribut, la liste était recherchable.

3.5.0

3.5.0 (2025-10-03)

Nouveautés

• Ajout du composant commutateur.

Corrections d'anomalies

• Composant liste déroulante, lorsqu'une recherche est effectuée, on s'assure d'afficher les résultats en ordre alphabétique croissant. Il pouvait parfois arriver que ce ne soit pas le cas. L'ordre de tri initial avant la recherche ne change pas (selon l'ordre original des options du select).

Améliorations

• Composant fil d'Ariane, il est maintenant possible de positionner le fil d'ariane en dehors du <header>. Son emplacement recommandé demeure tout de même à la fin du <header>.

• Composants PIV pied de page et menu horizontal, amélioration de l'accessibilité. Retrait du <h2> hors écran qui servait à donner un titre au composant. Le titre est maintenant simplement dans un aria-label.

• Composant tableaux dynamiques, modification du texte d'information pour un tableau vide. Le texte était "Aucun élément à afficher", il a été remplacé par "0 élément". De cette façon il est toujours affiché de la même façon. Lorsqu'un tableau est vide, il y a déjà une ligne dans le tableau qui indique "Aucun élément à afficher." (personnalisable).

Conformité au système de design gouvernemental du Québec

Plusieurs changements ont été apportés dans le système de design au début de septembre 2025 et des fiches ont été bonifiées. Certains changements auront un impact plus importants et seront donc intégrés ultérieurement dans la prochaine version majeure des composants UTD.

Voici les changements avec impacts mineurs implémentés dans cette version :

• Composant PIV entête, ajustement des styles au survol et focus des hyperliens.

• Composants barre de recherche et barre de recherche simple, ajustement des styles au survol et focus. Plus apparent lorsqu'utilisé dans le PIV entête. La largeur maximale de la zone de texte est maintenant de 640px.

  L'icône de loupe de la barre de recherche simple a aussi été modifiée.

  Dans le composant "Barre de recherche simple", un bouton permettant de réinitialiser la valeur à rechercher a été ajouté.

• Composant alerte générale, la largeur maximale de la zone de texte est maintenant de 825px et la couleur des hyperliens a été modifiée.

• Composant champs texte et autres, modification du style au focus (bordure plus foncée), et bordure bleue foncée au focus même sur un champ en erreur (au lieu de rouge). La position de l'indicateur de champ obligatoire a légèrement été modifié (un peu plus bas).

• Champs "disabled", maintenant le libellé et la précision(si présente) sont de couleur grise, et l'icône au survol est "not-allowed".

• Hyperliens, ajout du visuel pour les liens actifs (pseudo classe :active), ajout d'un contour bleu-clair au focus clavier et ajustement de la couleur de l'icône d'un lien externe visité.

• Composant boutons, modification de l'affichage pour les boutons désactivés (disabled) et léger changement style survol/focus/active du bouton primaire.

• Composant traitement en cours, modification de la couleur du spinner des boutons associés à un traitement en cours afin de s'harmoniser avec le nouveau visuel des boutons désactivés(disabled).

• Composant bouton de sélection. Modification des styles au focus/survol et ajout du style pour les options désactivées (disabled).

• Composants bouton radio et case à cocher, au format compact augmentation de l'espacement entre les choix. Les styles au focus ont également été modifiés.

• Composant infobulle, la feuille a été modifiée. La taille de la police du titre a diminué et le contenu de la feuille est aligné à gauche (et non centré comme avant).

  La zone cliquable du bouton permettant d'afficher l'infobulle a été agrandie et le bouton a été légèrement repositionné.

  Tout l'affichage en mode "bulle" a été revu avec les nouvelles règles.

• Composant tuile cliquable, légère modification du visuel au focus (couleur de bordure).

• Composant liste déroulante, les styles au survol, focus et élément sélectionné ont été modifiés.

  Tout l'affichage en mode "multiple" a été revu afin de respecter les nouvelles règles. Il n'y a plus d'étiquettes permettant d'annuler la sélection des éléments. S'il y a 3 éléments sélectionnés et plus, un texte indique le nombre d'éléments sélectionnés.

• Composant dialogue modal, le dialogue modal est maintenant centré verticalement dans la fenêtre du fureteur. L'effet focus a aussi été modifié sur le bouton de fermeture.

3.4.1

3.4.1 (2024-08-28)

Correction d'anomalies

• Composants avis et accordéon typé, correction d'une regression introduite à la version 3.4.0 qui faisait en sorte que le "type" ne pouvait plus être défini dynamiquement. Cela pouvait dans certains cas provoquer des incohérences d'affichage (mauvaise icône).

3.4.0

3.4.0 (2025-08-25)

Corrections d'anomalies

• Composants bouton radio et case à cocher lorsque le libellé du champ était sur plus d'une ligne, l'affichage de l'indicateur de champ obligatoire était mal positionné.

• Composant fil d'Ariane, le visuel de lien "visité" a été retiré du fil d'Ariane. Il n'aurait jamais dû s'y appliquer.

• Composant dialogue modal, ne pas considérer les hyperliens lorsqu'on détermine à quel contrôle donner le focus à l'ouverture. Problème accessibilité.

• Composants dialogue modal et message, lorsque l'attribut "id-focus-fermeture" était spécifié et que le contrôle n'était pas visible dans l'écran, ce dernier recevait le focus mais l'écran ne défilait pas automatiquement afin que l'élément soit visible. Aussi pour le composant "message", la promesse est maintenant résolue à la fin de l'animation de fermeture du message (au lieu d'au début).

• Composant tableaux dynamiques, correction d'un effet hover dans la pagination (hover sur la page à droite de la page active cachait la partie droite de la bordure de la page active si elle avait le focus).

• Composant liste déroulante :

  • Valeur erronée dans le aria-description dans certaines situations (accessibilité);
  • Contour rouge absent lors d'une erreur absent dans des Razor pages avec jQuery validate;
  • Recherche de contenu avec des points ne fonctionnait pas (ex. rechercher 1.1.1).
  • Améliorer l'accessibilité au clavier. Donner le focus à la prochaine sélection débutant par la lettre tappée.

• Composant notifications, suite à une mise à jour récente des navigateurs et/ou des lecteurs écrans, les notifications n'étaient plus annoncées au lecteur écran.

Nouveautés

• Implémentation des styles pour les "liens vers un vidéo".

• Champs de formulaire, ajout d'un attribut permettant de retarder l'affichage des messages d'erreurs afin d'éviter la problématique d'événement "click" annulé lorsqu'un message d'erreur s'affiche.

Améliorations

• Composant fil d'Ariane, permet maintenant l'affichage de plus de 5 niveaux.

• Composants avis et accordéon typé, en mode "impression" les icônes sont maintenant imprimées.

  Ajout des nouveaux types d'avis complémentaires "communication" et "notification"

• Composant alerte générale, documentation mise à jour afin d'indiquer que le composant doit être placé sous le menu principal.

• Composant traitement en cours :

  • Lorsqu'un overlay est appliqué au traitement en cours (défaut) l'interaction au clavier dans la page n'est plus possible. L'interaction via la souris était déjà bloquée, maintenant le clavier l'est aussi;
  • Lorsque le traitement en cours était associé à un bouton et que ce dernier n'était plus dans le DOM au moment où on tentait de terminer le traitement en cours, le backdrop restait présent, ce qui bloquait l'utilisateur. Maintenant le backdrop est retiré dans cette situation.

• Composant champs texte et autres, ajout d'une largeur par défaut aux champs de type "datetime-local".

• Composant PIV entête, il est maintenant possible que le titre du site ne soit pas un hyperlien. L'attribut "url-titre-site" a été modifié en ce sens. Attention, il s'agit de situations exceptionnelles.

• Script de gestion automatique des liens externes, ajustement de l'attribut "rel" afin d'y inclure "noopener noreferrer" (bonne pratique).

• Iconographie, ajout de 4 nouvelles icônes : "aide", "checklist", "oeil-barre" et "bulles".

Conformité au système de design gouvernemental du Québec

• Composant accordeon, ajustements suite aux nouvelles directives : padding, couleur fond sur hover de l'entête et visuel au focus.

• Composant avis, ajustements mineurs (padding).

3.3.0

3.3.0 (2025-05-15)

Corrections d'anomalies

• Composant liste déroulante, les libellés trop longs entraînaient un ajustement automatique de la hauteur de la liste pour afficher le texte intégral. Désormais, ces libellés sont tronqués et suivis d'une ellipse, ce qui permet de conserver la hauteur standard de la liste.

Nouveautés

• Ajout du composant alerte générale.

• Ajout du composant étiquettes.

• Ajout du composant consulter aussi.

• Ajout du composant liste de liens blocs.

• Ajout des liens de navigation ("lien de retour" et "lien voir plus").

• Composant boutons, implémentation des styles pour les "zones de boutons".

• Implémentation des styles pour les "liens vers un document" et "liens externes". Ajout d'une page de documentation sur les types de liens.

• Ajout des styles pour les séparateurs.

• Iconographie, ajout de 8 nouvelles icônes : "souris", "telephone", "handicape", "cadenas", "cadeau", "accouchement", "fenetre" et "calendrier-plus".

Améliorations

• Composant avis, les avis utilisent maintenant 100% de la largeur disponible lorsqu'ils sont utilisés dans la colonne principale d'un gabarit 2 colonnes. Dans les autres contextes la largeur maximale de 825px s'applique toujours.

Conformité au système de design gouvernemental du Québec

• Augmentation de la marge du bas des titres de niveau 1 (H1), passe de 16px à 32px.

  Attention! si vous aviez modifié cette valeur ou si vous aviez ajouté un espaceur, il se peut que vous vous retrouviez avec trop d'espacement, auquel cas vous devrez ajuster votre code.

• Composant case à cocher, le libellé d'une case à cocher unique est maintenant affiché avec une graisse normale (changement récent au système de design gouvernemental du Québec).

• Composant menu horizontal, quelques ajustements mineurs, réduction de l'épaisseur du chevron et révision complète de l'affichage mobile (< 576px). Si vous n'aimez pas cette nouvelle version mobile telle que définie au système de design gouvernemental, n'hésitez pas à leur écrire afin de leur en faire part.

• Composants menu vertical et liste déroulante, réduction de l'épaisseur du chevron.

• Réduction de l'épaisseur de l'icône "X" permettant de fermer, annuler une sélection, ou annuler une saisie dans les composants dialogue modal, message, notifications, infobulle, barre de recherche et liste déroulante.

3.2.0

3.2.0 (2025-03-14)

Corrections d'anomalies

• Composant tableaux dynamiques, lorsque la sélection multiple était activée, le texte indiquant qu'il n'y avait aucun élément dans le tableau ne s'affichait pas correctement (mauvaise couleur de fond et mauvais padding).

  Retrait du visuel hover pour la ligne indiquant l'absence de donnée dans le tableau.

Améliorations

• Ajout du composant bouton de sélection. Pour le moment on ne gère que la sélection simple (boutons radio) disposés sur une seule colonne. L'affichage sur une ligne et la sélection multiple seront ajoutés dans une version ultérieure.

• Composant champs texte et autres, pour les champs multilignes (textarea), il est maintenant possible d'avoir une hauteur automatiquement adaptée au contenu, ainsi qu'un compteur de caractères.

  L'attribut "precision" est maintenant dynamique, i.e. si le contrôle est déjà rendu à l'écran et que la valeur de l'attribut change, la précision se met à jour.

• Composant dialogue modal et message, au format mobile (téléphone <425px), le bouton primaire est maintenant affiché en premier afin de se conformer à ce qui est maintenant défini au système de design gouvernemental du Québec.

• Composant infobulle légèrement modifié afin de se conformer à ce qui est maintenant défini au système de design gouvernemental du Québec.

  L'icône "?" à l'intérieur du cercle bleu à été modifiée pour "i" et la bulle bleue est légèrement plus petite.

  Il est aussi maintenant possible de l'utiliser à l'intérieur d'un composant "utd-champ-form".

• Composant tableaux dynamiques. Ajustement des textes par défaut pour la zone "infos" (ex. le pluriel/singulier est géré automatiquement).

• Composants bouton radio et case à cocher légèrement modifiés afin de se conformer à ce qui est maintenant défini au système de design gouvernemental du Québec.

  L'espacement entre les contrôles a été réduit.

• Composant traitement en cours, lorsque le traitement en cours est appliqué sur un bouton et que celui-ci possède une icône, cette dernière est masquée (comme l'était déjà son texte).

• Iconographie, ajout de 12 nouvelles icônes : "homme-femme", "horloge", "i-infobulle", "nouveautes", "points-suspension", "repere-carte", "trombone", "formation", "play", "pause", "fichier-image" et "video".