[Snyk] Upgrade @gouvfr/dsfr from 1.10.1 to 1.12.0 #27

brmzkw · 2024-07-11T02:15:51Z

This PR was automatically created by Snyk using the credentials of a real user.

![snyk-top-banner](https://github.com/andygongea/OWASP-Benchmark/assets/818805/c518c423-16fe-447e-b67f-ad5a49b5d123)

Snyk has created this PR to upgrade @gouvfr/dsfr from 1.10.1 to 1.12.0.

ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.

The recommended version is 7 versions ahead of your current version.
The recommended version was released on 22 days ago.

Release notes

Package name: @gouvfr/dsfr

1.12.0 - 2024-06-19
🎉 AJOUT, ✨ ÉVOLUTION, 🐛 CORRECTIF, 🚫 SUPPRESSION
💥 BREAKING CHANGE : les changements de la structure HTML sont indiqués par cette icône, en gras, et souligné

🎨 Fondamentaux

Global
- 🎉 Gestion des préférences utilisateurs de contrastes et d’animations #929
  - Mode haut contraste (couleurs forcées) : l’ensemble des composants ont été revu pour une utilisation avec un thème contrasté (Windows High Contrast mode)
  - Animations désactivées : les animations sur les composants sont désactivées lorsque l’option “reduce motion” est active
- 🐛 Correction du centrage des container-sm/md/lg/xl #916
- 🎉 Ajout d’icônes #956 #946 #929 #911
- 🎉 Ajout des tokens de couleur $background-action-high-grey et $border-contrast-grey #911 #917
Pictogramme
- 🎉 Ajout du pictogramme digital/in-progress #918
Build
- ✨ Lors de l'exécution de la commande yarn build, les fichiers de configuration sont créés s'ils n'existaient pas #908
- ✨ Ajout de browser-sync en tant que peerDependencies dans le package.json #908
🧩 Composants

Bandeau d’information importante - notice
- 🎉 Ajout de variations de bandeaux d'information importante #917
  - 2 niveaux génériques supplémentaires (avertissement et alerte)
  - 3 bandeaux d'alertes (attentat, appel à témoins, cyber-attaque)
  - 3 bandeaux vigilance météo (orange, rouge, violette)
- 💥 Changement de la structure html permettant l’ajout d’un titre, une description, et un lien #917
Carte - card
- ✨ Ajout d'une classe utilitaire enlarge-button utilisée sur les cartes et les tuiles de téléchargement pour élargir la zone de clique à tout le composant quand l'élément cliquable est un bouton #943 #951
- ✨ Mise à jour de la taille des images d’exemples de carte "Image et ratio" #938
Contenu média - content
- ✨ Le composant fr-transcription n’est plus placé dans mais après la balise <figure> fr-content-media (la rétrocompatibilité de la structure précédente est conservée mais dépréciée) #932
  - ♿️ ajoute un attribut alt sur l'exemple "Média image avec une transcription" mentionnant la transcription située en dessous du composant Média
  - ♿️ ajoute un attribut title sur les exemples de "Média video" mentionnant la transcription située en dessous du composant Média
Citation - quote
- 🐛 Ajout de la propriété object-fit: cover sur l'image de citation pour conserver le ratio de l'image lorsqu'elle n'est pas carrée. Dans la mesure du possible, privilégiez un ratio d'image carré pour un meilleur support navigateur. #912
Curseur - range
- 🐛 Correction de la boucle infinie faisant crash la page #931
- 🐛 Correction du style du curseur avec étape désactivé, et ajout d’exemples de curseurs désactivés #931
- 🐛 Correction de la modification de valeur du deuxième input lorsque le min dépasse le max ou l'inverse sur le curseur double #931
En-tête - header
- 🐛 Réduction de la zone de clic du lien du service, ou du logo, élargie en mobile. La zone à droite du logo et à droite du service n’est plus cliquable évitant les clics non désirés #944
Fil d’arianne - breadcrumb
- 🐛 Correction de l'alignement vertical des icônes de chevron sur tout les navigateurs (bug sur Safari 17) #933
Interrupteur - toggle
- ✨💥 Ajout de la bordure colorée à gauche de l’interrupteur en état d’erreur/succès. Attention : Les marges avant et après le composant ont été retirées, possible ajustement des espacements à prévoir #954
- 🐛 Correction du retour à la ligne sur le label "activé/désactivé” #928
Pied de page - footer
- ✨💥 Change l'ordre des liens, et gouvernement.fr devient info.gouv.fr #905
- 🐛 Remplacement de l'intitulé par défaut "[A modifier]" de l'attribut title par l'intitulé officiel sur les liens obligatoires du footer. #905
- 🐛 Réduction de la zone de clic du logo en mobile, elle n’est plus étendue sur toute la largeur #944
Tableau - table
- ✨💥 Evolution du tableau permettant l’ajout de données complexes, d’utilitaires de placement, de bouton de tri, de coche de sélection de ligne (la rétrocompatibilité de la structure précédente est conservée mais dépréciée) #911
Tuile - tile
- ✨ Ajout d'une classe utilitaire enlarge-button utilisée sur les cartes et les tuiles de téléchargement pour élargir la zone de clique à tout le composant quand l'élément cliquable est un bouton #943 #951
🔌 Analytics
- 🎉 Ajout de la possibilité de bloquer une action particulière avec l'attribut et la valeur data-fr-analytics-action="false" quand l'envoi des actions est activé au global #937
- 🎉 Ajout de marquage sur le lien des bandeaux d’information importante #917
1.12.0-rc.1 - 2024-06-10
1.11.2 - 2024-03-04
🎉 AJOUT, ✨ ÉVOLUTION, 🐛 CORRECTIF, 🚫 SUPPRESSION
💥 BREAKING CHANGE : les changements de la structure HTML sont indiqués par cette icône et un soulignement

🎨 Fondamentaux

Core

🎉 Ajout de la propriété overflow-wrap: world-break pour forcer le passage à la ligne des mots plus grands que leur conteneur #886

🧩 Composants

En-tête - header

🐛 Correction du focus caché sur le lien du bloc marque #881
🐛 Correction d’une erreur js sur les liens d’accès rapide sans id #893

Tag - tag

🐛 Correction du style au survol et au clic des tags cliquables #887

Pied de page - footer

🐛 Retrait de l’icône “lien externe” sur les liens des logos en target="_blank" #872

Tag - tag

🐛 Correction du style au survol et au clic des tags cliquables #887

🔌 Analytics

🐛 Correction d’une erreur js liée à l'héritage de la fonction listenClick #885
🐛 Correctifs dans la version standalone #895
- configuration appliquée au logging (verbose, production)
- retrait de dépendances non requises
- extraction de 'Modes' du fichier de la class Options pour réduire les dépendances
🐛 Correction d’une erreur js sur IE liée au selecteur de translate #899
1.11.1 - 2024-01-31
🎉 AJOUT, ✨ ÉVOLUTION, 🐛 CORRECTIF, 🚫 SUPPRESSION
💥 BREAKING CHANGE : les changements de la structure HTML sont indiqués par cette icône et un soulignement

🎨 Fondamentaux

Core

Retrait du tap highlight des éléments input, button, a, label, select, textarea sur IOS dans le reset du core #846

🧩 Composants

Accordéon - accordion

✨ Ajout d’un attribut data-fr-group="false" pour dissocier le comportement d'ouverture/fermeture des accordéons à l'intérieur d'un groupe d'accordéons #860
🐛 Corrige le focus coupé lorsque l’on on remonte sur un accordéon précédent dans un groupe d'accordéon #867

Alerte - alert

✨ Ajout d’exemples d’alerte MD sans titre, et d’alerte SM avec titre #853

Contenu média - content

✨ Mise à jour des exemples #866 :
- ajoute une transcription à l'exemple de “Média image en svg, porteur d’information”
- met à jour l'exemple de “Média image avec une transcription” avec une image porteuse de sens et renseigne la transcription correspondante
En-tête - header

🐛 Correction de la tailles des boutons d’accès rapide en mobile #859
💥 🐛 Retrait de l’attribut aria-haspopup="menu" sur le bouton burger du menu mobile #856
🐛 Correction du focus coupé de la barre de recherche dans le header #864
🐛 Correction de la duplication des collapses en accès rapide dans le menu mobile #873

Infobulle - tooltiip

🐛 Ajout d'un fallback en linear-gradiant pour les navigateurs qui ne supportent pas le conic-gradiant (ex: firefox < 83) #863

Liste déroulante - select

🐛 Correction de l'affichage du optgroup en italique sur firefox windows #870

Navigation - navigation

🐛 Correction d'un bug de fermeture au clic à l'extérieur du composant sur safari #840
🐛 Correction d'un bug de fermeture d'un volet au clic sur un lien ou un bouton à l'intérieur du composant #840

Pied de page - footer

🐛 Retrait de l’icône “lien externe” sur les liens des logos en target="_blank" #872

📄 Modèles

Connexion - login

✨ Ajout de la description du bouton franceConnect #855

Recover - récupération de mot de passe

🚫 Déplacement des exemples de récupération de mot de passe dans les modèles de page de connexion #854

🔌 Analytics

✨ Ajout de la propriété de site_version dans les données de mesure d'audience #868
1.11.0 - 2023-12-11
🎉 AJOUT, ✨ ÉVOLUTION, 🐛 CORRECTIF, 🚫 SUPPRESSION
💥 BREAKING CHANGE : les changements de la structure HTML sont indiqués par cette icône et un soulignement

🎨 Fondamentaux

Global
- ✨💥 Ajout des l’attributs rel="noopener external" et title="intitulé - nouvelle fenêtre" à tous les liens en target="_blank" (voir les liens externes sur : tile, card, link, notice, footer, quote) #737
- ✨💥 Ajout de la balise meta format detection pour désactiver le style automatique des url, date, email, et tél sur IOS #833
  - ajouter dans le head : <meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no">
- 🐛 Correctif lorsque la valeur de l'attribut [aria-current] est "false" (composants concernés : breadcrumb, navigation, pagination, sidemenu, translate) #747
- 🐛 Correction js sur les vielles versions de navigateurs : remplacement des selecteurs :not(.selecteurA, .selecteurB) par :not(.selecteurA):not(.selecteurB) dans le js des composants : accordion, navigation, sidemenu, translate, transcription #786
- 🐛 Correction d'une erreur de javascript liée au dark mode sur scheme.js, pour la version 14 de Safari macOS et inférieur #796
- 🐛💥 Retrait du saut de ligne entre la balise <a> et son libellé dans les templates de link, tile, card, pour corriger l’ajout d’un espace entre le libellé du lien et l'icône #818
- ✨💥 Ajout d'une feuille de style dist/dsfr.print.css à charger pour appliquer les règles d'impression du DSFR et ajout d’une classe utilitaire .fr-no-print pour retirer un élément de l'impression. #802
- ⬆️ Mise à jour des dépendances npm #815
Core
- ✨ Ajout du style par défaut des listes de description : dl dt dd #748
- 🐛 Mise à jour du lien vers la page Typographie du site de documentation #775
- 🐛 Retrait de la marge ‘top’ des paragraphes sur IE #825
- 🐛 Correction de l’ajout forcé de soulignement sur tous les liens et de l’alignement de l’icône des liens externes sur IE #825
Utility
- 🐛💥 Correction du contenu du svg de l'icone user-setting-line qui ne correspondait pas à la bonne icône → penser à remplacer le svg user-setting-line.svg si le dossier "icons" a été dupliqué #797
🧩 Composants

Accordéon - accordion

Alerte - alert
- ♻️ Refactorisation de la bordure des alertes en background-image à la place de box-shadow #742
Bouton france connect
- 🐛 Le bouton FranceConnect doit répondre aux critères d’accessibilité qui redéfinissent le letter-spacing et la taille de fonte #813
  - Passage des valeurs de tailles et d'espacements en 'em' pour les rendre relatives à la taille de fonte du bouton
  - 💥 Retrait du '+' de 'FranceConnect+' dans l'intitulé de fr-connect__brand. Celui-ci est désormais placé en contenu du pseudo-élément after du bouton
Bouton - button
- 🐛 Retire la marge négative sur le modifier .fr-btn--close et corrige l'impact sur les composants 'alert', 'navigation', et 'notice' #784
Carte - card
- 🐛 Corrige l'alignement du détail de la carte dans une grille de carte sur les anciennes version de safari macOS (inférieure à 14.0) #796
- 🐛 Correction du ratio d’image des cartes de téléchargement sur IE #825
- 🐛 Passage des tag/badge en taille md sur les cartes md #833
Case à cocher - checkbox
- 🐛 Changement de la couleur de la coche en $text-inverted-blue-france #762
- 🐛 Mise à jour du token de couleur des bordures #760
- 🐛 Correction de l'alignement de la case des cases à cocher sur IE #825
Champ de saisie - input
- 🐛 Corrige le token de couleur de l'intitulé et des icones dans les champs de saisie #740
- ✨ Customisation de l'icône de suppression du champs de recherche sur chrome : close-circle-fill #740
- 🐛 Sur les champs de saisie avec icône le placement de l’icône passe à 16px du bord droit et ajustement du padding-right à 44px #766
Citation - quote
- ✨ Il n’est plus obligatoire d’avoir une liste dans le figcaption de la citation #721
- ✨ Augmentation de la marge droite de l'image en desktop #833
Contrôle segmenté - segmented
- 🎉 Ajout du composant contrôle segmenté #805
Curseur - range
- 🎉 Ajout du composant curseur #817
En-tête - header
- ✨ Ajout d'exemples d’accès rapides #727
  - ajout des modifier de boutons fr-btn--tooltip, fr-btn--briefcase, fr-btn--team
  - ajout d'exemples avec un seul raccourcis (sans liste)
  - ajout exemple utilisateur connecté
- 🐛 Le token de couleur du titre de service passe en text-title-grey #745
- 🐛 Augmentation du z-index du header pour passer au dessus des cartes avec ombres, ajout du niveau d'élévation raised-over #830
- 🐛 Ajustements graphiques #791 :
  - change la couleur du menu burger en $action-high-bleu-france en mobile
  - passe l'écart entre bloc marque et logo opérateur à 32px et l'écart entre logo opérateur et nom du site à 32px
  - réduit la taille de la barre de recherche à 96v (24rem) au lieu de 25rem
  - bloque la taille du logo opérateur à 8rem max (144px)
  - passe la taille du texte de la tagline en sm (14px) au lieu de md
  - passe le bouton burger en tertiaire avec border
Fil d’arianne - breadcrumb
- 🐛 Correction de la hauteur du composant fil d’arianne sur IE #825
- 🐛 Alignement vertical des chevrons du fil d'arianne #833
Formulaire - form
- 🐛 Correction de la largeur des classes fr-fieldset__content pour la version dépréciée #766
- 🐛 Le token de couleur de la légende du fieldset passe en en $text-label-grey à la place de $text-title-grey #783
- 🐛 Augmentation de la marge au dessus du message d'erreur sur checkbox, input, select (16px) #833
Gestionnaire de consentement - consent
- 🐛💥 Le titre de la banière devient un <h4> à la place d'un <p> dans la structure HTML du composant #719
- 🐛 Coche les cookies obligatoires par défaut #754
- 🐛 Extension de la zone de clic du lien “voir plus de detail” #754
- 🐛 Le token de couleur des titres de finalité passe en $text-title-grey #767
- 🐛 Ajustement de la marge droite des boutons radios "accepter" #768
Indicateur d'étape - stepper
- 🐛💥 Inversion de l'étape et du titre dans la structure html #724
- ✨ Augmentation de l'épaisseur du stepper à 8px #833
Interrupteur - toggle
- 🐛 Utilisation du token de couleur $text-label-grey sur le label de l'interrupteur #771
- 🐛 Ajout de 4px de marge entre la coche et le texte “activer/désactiver” #771
- 🐛 Mise à jour du token de couleur des bordures #760
- 🐛 Augmentation de la largeur max du label, la marge de 10v passe à 8v #819
- 🐛 Correction de la taille de l'icône sur les tuiles md sans lien étendu #818
- 🐛 Retrait de l'icône arrow-right sur les tuiles sans lien étendu, pour être iso avec les cartes #818
Lettre d’information & réseaux sociaux - follow
- 🐛 Correction de la couleur de soulignement lorsque le champ newsletter de la lettre d'information est en erreur, en rouge et non en bleu #772
- 🐛💥 Sur les exemples "Lettre d'info seule" et "Réseaux sociaux et Lettre d'info mise en avant", place le bouton d'action dans un groupe de bouton fr-btns-group--inline-md pour que le bouton prenne l’ensemble de la largeur sur mobile #781
- 🐛 Inversion de l'ordre des boutons "Instagram" et "LinkedIn" #781
- ✨💥 Mise en place de l'icône twitter-x par défaut #824
- 🐛 Suppression des marges négatives du groupe de boutons des réseaux sociaux #781
Liens d'évitement - skiplink
- 🐛 Masquage des liens d'évitement lors du rebond du scroll sur ios #749
- 🐛 L'écart entre les liens d'évitement passe à 16px (4v) #789
- 🐛 En desktop la marge en haut et en bas du composant passe à 12px (3v) #789
Liste déroulante - select
- ✨ Ajout d'un example de select avec groupe d'options (optgroup) #734
- 🐛 Réduction de la taille de l’icône #736
- 🐛💥 correction de l’intitulé “Sélectionner une option” #736
- 🐛 Correction du token de couleur de l'intitulé du select #740
Logo - logo
- 🐛 Passage de la couleur du logo en noir absolu en thème clair #738
  - ✨ ajout du token $text-black-white-grey correspondant au noir absolu #000 en thème clair et blanc absolu #fff en thème sombre
Menu latéral - sidemenu
- 🐛 Retrait d'1v (4px) de padding à gauche et à droite sur fr-sidemenu__inner en desktop #793
- 🐛 Correction du token de couleur des liens du menu latéral en $text-action-high-grey #833
Mot de passe - password
- 🐛 Modification du token de couleur sur le label de la checkbox “afficher” en text-label-grey #750
- ✨ Changement de l'icône de message d'information pour info-fill

Snyk has created this PR to upgrade @gouvfr/dsfr from 1.10.1 to 1.12.0. See this package in npm: @gouvfr/dsfr See this project in Snyk: https://app.snyk.io/org/brmzkw/project/74d5fdb0-12df-47a0-8253-b598161eaccc?utm_source=github&utm_medium=referral&page=upgrade-pr

[Snyk] Upgrade @gouvfr/dsfr from 1.10.1 to 1.12.0 #27

Are you sure you want to change the base?

[Snyk] Upgrade @gouvfr/dsfr from 1.10.1 to 1.12.0 #27

Conversation

brmzkw commented Jul 11, 2024

Snyk has created this PR to upgrade @gouvfr/dsfr from 1.10.1 to 1.12.0.

🎨 Fondamentaux

Global

Pictogramme

Build

🧩 Composants

Bandeau d’information importante - notice

Carte - card

Contenu média - content

Citation - quote

Curseur - range

En-tête - header

Fil d’arianne - breadcrumb

Interrupteur - toggle

Pied de page - footer

Tableau - table

Tuile - tile

🔌 Analytics

🎨 Fondamentaux

Core

🧩 Composants

En-tête - header

Tag - tag

Pied de page - footer

Tag - tag

🔌 Analytics

🎨 Fondamentaux

Core

🧩 Composants

Accordéon - accordion

Alerte - alert

Contenu média - content

En-tête - header

Infobulle - tooltiip

Liste déroulante - select

Navigation - navigation

Pied de page - footer

📄 Modèles

Connexion - login

Recover - récupération de mot de passe

🔌 Analytics

🎨 Fondamentaux

Global

Core

🧩 Composants

Accordéon - accordion

Alerte - alert

Bouton france connect

Bouton - button

Carte - card

Case à cocher - checkbox

Champ de saisie - input

Citation - quote

Contrôle segmenté - segmented

Curseur - range

En-tête - header

Fil d’arianne - breadcrumb

Formulaire - form

Gestionnaire de consentement - consent

Indicateur d'étape - stepper

Interrupteur - toggle

Lettre d’information & réseaux sociaux - follow

Liens d'évitement - skiplink

Liste déroulante - select

Logo - logo

Menu latéral - sidemenu

Mot de passe - password