🔖 chore(*): DSFR v1.10.0

CHANGELOG.md

@@ -12,7 +12,111 @@ Pour plus d’informations : [Voir la documentation](https://www.systeme-de-desi
 
 ## v1.10
 
-### [1.10.0-rc.2](https://github.com/GouvernementFR/dsfr/compare/v1.9.3...1.10.0-rc.2) - 11 Juillet 2023
+### [1.10.0](https://github.com/GouvernementFR/dsfr/compare/v1.9.3...1.10.0) - 19 Juillet 2023
+
+#### 🐛 fix(form): correctif barre état iOS [(#712)](https://github.com/GouvernementFR/dsfr/pull/712)
+- Sur iOS, la barre d'état d'erreur ou validation est discontinue
+- corrige le problème de manière générique
+
+
+#### 🐛 fix(modal): retour de focus fermeture clavier [(#716)](https://github.com/GouvernementFR/dsfr/pull/716)
+- Mise en place du retour du focus à la fermeture en pressant la touche ESC
+
+
+#### 🐛 fix(form): correctif focus des radios riches dépréciés [(#715)](https://github.com/GouvernementFR/dsfr/pull/715)
+- corrige le décalage du focus sur les boutons radio en version dépréciée
+
+
+#### 🐛 fix(follow): orthographe message de confirmation [(#714)](https://github.com/GouvernementFR/dsfr/pull/714)
+
+
+#### ✨ feat(core, password): boutons spéciaux input Safari [(#711)](https://github.com/GouvernementFR/dsfr/pull/711)
+- Dans les champs de type password, sur safari Mac, il y a une icône apportant des outils supplémentaire qui se superpose à l’icône des signalant la hauteur de casse
+- Déplacement des icônes natives pour qu'elles ne se superposent pas
+- Retrait de l'icône capslock native, privilégiant la nôtre
+
+
+#### 🐛 fix(core): stabilisation disclosure [(#713)](https://github.com/GouvernementFR/dsfr/pull/713)
+- L'ouverture des paramètres d'affichage est par moment non réactive
+- L'élément est fermé avant même d'être ouvert à cause de boucle de déclenchement
+- Ajout de condition permettant de limiter les boucles
+
+
+#### 📝 doc(tooltip): retrait exemple texte [(#710)](https://github.com/GouvernementFR/dsfr/pull/710)
+- l'utilisation d'un tooltip sur un texte pose des problèmes de restitution
+- cet usage est déconseillé
+- retrait de l'exemple
+
+
+#### 🐛 fix(tile): correctif espacements version dépreciée [(#704)](https://github.com/GouvernementFR/dsfr/pull/704)
+- L'icône et le contenu se retrouvent superposés dans la version dépréciée, ce correctif rétablit l'espacement nécessaire
+
+
+#### 🐛 fix(tile, card): A11Y liens désactivés [(#709)](https://github.com/GouvernementFR/dsfr/pull/709)
+- Ajout des attributs `role="link"` et `aria-disabled=true` sur les version désactivées
+
+
+#### 🐛 fix(transcription, content): correctif title et label bouton Agrandir [(#708)](https://github.com/GouvernementFR/dsfr/pull/708)
+- Retrait du title sur le bouton agrandir
+- Ajout label agrandir dans les exemples de content
+
+
+#### ✨ feat(*): Ajout d'un meta tag iOS [(#707)](https://github.com/GouvernementFR/dsfr/pull/707)
+- Sur iOS, les numéros de téléphone sont automatiquement transformés en lien
+- Entraîne un mauvais rendu dans le bloc fonctionnel de numéro de téléphone
+- Correction par l'ajout général du meta tag `<meta name="format-detection" content="telephone=no">`
+
+
+#### 🐛 fix(card, tile): correctif IE 11 [(#705)](https://github.com/GouvernementFR/dsfr/pull/705)
+- correctif sur les tuiles et card sur la version legacy pour éviter les bugs de dépassement de texte et placement des icônes
+
+
+#### 🐛  fix(toggle): retrait tap-highlight-color iOS [(#703)](https://github.com/GouvernementFR/dsfr/pull/703)
+- Au clic sur le toggle sur iOS, l'effet de highlight est présent
+- Retrait de cet effet avec la propriété [-webkit-tap-highlight-color](https://developer.mozilla.org/fr/docs/Web/CSS/-webkit-tap-highlight-color)
+
+
+#### 🐛 fix(link): correctif téléchargement multiligne [(#702)](https://github.com/GouvernementFR/dsfr/pull/702)
+- les liens de téléchargement étaient limités à une seul ligne avec une ellipse sur le text dépassant
+- correctif prenant en compte le retour à la ligne
+
+
+#### 🐛 fix(download): graisse du titre des liens [(#701)](https://github.com/GouvernementFR/dsfr/pull/701)
+- Passage des liens dépréciés en graisse regular
+
+
+#### 🐛 fix(*): mise à jour des liens du readme [(#700)](https://github.com/GouvernementFR/dsfr/pull/700)
+- Mise à jour des liens vers [https://www.systeme-de-design.gouv.fr](https://www.systeme-de-design.gouv.fr) dans le readme
+
+
+#### 🐛 fix(modal): préviens décalage mobile [(#699)](https://github.com/GouvernementFR/dsfr/pull/699)
+- l'ajout d'un padding à l'ouverture permet de se substituer au décalage créé potentiellement par la disparition de la scrollbar en desktop
+- En mobile, la modale occupe 100% de la largeur, ce padding créé un espacement incorrect
+- ajout d'une media query sur le breakpoint MD pour corriger le problème
+
+
+#### 🐛 fix(header): correctif régression scroll horizontal [(#697)](https://github.com/GouvernementFR/dsfr/pull/697)
+- La navigation du header créée un scroll horizontal dans la page
+- l'ajout d'un max-width prévient le problème
+
+
+#### 🐛 fix(password): correctif accessibilité des messages [(#694)](https://github.com/GouvernementFR/dsfr/pull/694)
+- ajout sur les messages de validation et d'erreur de la composition du mot de passe d'un statut en after uniquement pour les lecteurs d'écrans
+- BREAKING CHANGE : il est nécessaire d'ajouter les attributs `data-fr-valid`et `data-fr-error` avec les textes correspondants à l'état (respectivement, en français, "validé" et "en erreur"
+
+
+#### 🐛 fix(sidemenu): correction de la couleur des liens du sidemenu [(#698)](https://github.com/GouvernementFR/dsfr/pull/698)
+- Effet de bord du passage du bouton mobile en bleu, l'ensemble des boutons du sidemenu est passé en bleu.
+- Ce correctif amène la spécificité nécessaire pour avoir les boutons et lien en `text default grey`
+
+
+#### 🐛 fix(core): correctif sur KeyAction [(#696)](https://github.com/GouvernementFR/dsfr/pull/696)
+- Corrige la régression sur l'écoute des interactions avec le clavier dû à l'évolution de la structure de la constante KeyCodes, non répercutée dans KeyAction
+
+
+#### ✨ feat(colors): ajout des utilitaires de couleur flat [(#693)](https://github.com/GouvernementFR/dsfr/pull/693)
+- Ajout des classes utilitaires pour le token background flat avec les variations de couleur d'accent
+
 
 #### 🐛 fix(tooltip,modal): interaction globale et focus iOS [(#691)](https://github.com/GouvernementFR/dsfr/pull/691)
 - Correctif à la pression de la touche Escape sur la modale : si l'élément actif (focus) est un élément de formulaire ou un média, la modale n'est pas refermée pas pour permettre l'interaction native de l'élément actif

README.md

@@ -86,16 +86,15 @@ Le fichier `utilities.min.css` doit être placé un niveau plus bas que le dossi
 Le point de départ de l’utilisation du DSFR  est la création de fichiers HTML, afin de pouvoir utiliser les différents composants. Ces fichiers sont à mettre à la racine de votre projet. L’exemple ci dessous est le code minimal afin de pouvoir utiliser le DSFR.
 
 L’ajout de l’attribut **data-fr-scheme** sur la balise html permet d’activer la gestion des thèmes clair et sombre. Les valeurs possibles sont `system`, `light`, `dark`. La valeur “system” permet d’utiliser la configuration définie sur le système d’exploitation de l’utilisateur.
-Consulter la [documentation des paramètres d’affichage](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/parametres-d-affichage) afin d’en savoir plus.
+Consulter la [documentation des paramètres d’affichage](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/parametre-d-affichage) afin d’en savoir plus.
 
 ```html
 <!doctype html>
 <html lang="fr" data-fr-scheme="system">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="dsfr.min.css">
-    <link rel="stylesheet" href="utility/utility.min.css">
+    <meta name="format-detection" content="telephone=no">
 
     <meta name="theme-color" content="#000091"><!-- Défini la couleur de thème du navigateur (Safari/Android) -->
     <link rel="apple-touch-icon" href="favicon/apple-touch-icon.png"><!-- 180×180 -->
@@ -104,6 +103,9 @@ Consulter la [documentation des paramètres d’affichage](https://www.systeme-d
     <link rel="manifest" href="favicon/manifest.webmanifest" crossorigin="use-credentials">
     <!-- Modifier les chemins relatifs des favicons en fonction de la structure du projet -->
     <!-- Dans le fichier manifest.webmanifest aussi, modifier les chemins vers les images -->
+
+    <link rel="stylesheet" href="dsfr.min.css">
+    <link rel="stylesheet" href="utility/utility.min.css">
 
     <title>Titre de la page - Nom du site</title>
   </head>
@@ -156,7 +158,7 @@ Il est **impératif** d’appeler les **deux fichiers** javascript afin que le c
 </html>
 ```
 
-> NB : Le package analytics est géré indépendament et doit être ajouté après le js du dsfr. Voir [documention analytics](https://github.com/GouvernementFR/dsfr/blob/main/doc/Analytics-1.9.0.pdf)
+> NB : Le package analytics est géré indépendament et doit être ajouté après le js du dsfr. Voir [documention analytics](https://github.com/GouvernementFR/dsfr/blob/main/src/analytics/doc/analytics.md)
 
 De la même façon que le CSS il est possible d’importer uniquement le JS des composants utilisés (et leurs dépendances).
 ### Icônes
@@ -192,4 +194,4 @@ Le processus de contribution est détaillé sur la [page CONTRIBUTING.md](CONTRI
 
 ## Documentation
 
-[Documentation développeurs](https://www.systeme-de-design.gouv.fr/comment-utiliser-le-dsfr/developpeurs)
+[Documentation développeurs](https://www.systeme-de-design.gouv.fr/utilisation-et-organisation/developpeurs/)

module/color/variable/_decisions.scss

@@ -19,8 +19,8 @@ $values: (
     ),
     flat: (
       neutral: strongest,
-      /* primary: strong,
-      accent: strong,*/
+      primary: strong,
+      accent: strong,
       system: strong,
     ),
     action-high: (

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr",
-  "version": "1.10.0-rc.2",
+  "version": "1.10.0",
   "description": "Système de Design de l'Etat - DSFR",
   "repository": "git@github.com:GouvernementFR/dsfr.git",
   "author": "Service d'Information du Gouvernement <jean-charles.hourdeaux@pm.gouv.fr>",

src/analytics/example/spa/agnostic/route.js.ejs

@@ -41,8 +41,6 @@
   const urlLocationHandler = async () => {
     let location = window.location.href.replace(HREF, ''); // get the url route
 
-    console.log('route', location);
-
     // get the route object from the urlRoutes object
     const route = urlRoutes[location] || urlRoutes['404'];
     // get the html from the template

src/component/card/style/_legacy.scss

@@ -7,10 +7,8 @@
 
 @include legacy.is(ie11) {
   #{ns(card)} {
-    @include icon-legacy(arrow-right-line, md, before);
-
     &--no-icon {
-      @include before(none);
+      @include after(none);
     }
 
     &__title,
@@ -19,17 +17,79 @@
     }
 
     &__title {
+      a {
+        @include icon-legacy(arrow-right-line, sm, after) {
+          background-color: transparent;
+        }
+      }
+
       @include target-blank {
-        @include icon-size-legacy(md, after);
+        @include icon-legacy(external-link-line, sm, after);
       }
     }
 
     &__detail {
       @include icon-size-legacy(sm, before);
     }
 
-    &--horizontal &__body {
-      flex-basis: 100%;
+    &--download {
+      #{ns(tile__title a)} {
+        @include icon-legacy(download-line, null, after);
+      }
+    }
+
+    &#{ns(enlarge-link)} {
+      #{ns(card)}__title {
+        a {
+          text-decoration: none;
+          @include icon-size-legacy(md, after) {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+
+    @include respond-from(md) {
+      &--download,
+      &--horizontal,
+      &--horizontal-half,
+      &--horizontal-tier {
+        #{ns(card__body)} {
+          flex-basis: 100%;
+        }
+      }
+    }
+  }
+
+  #{ns(card--sm)} {
+    &#{ns(enlarge-link)} {
+      #{ns(card)}__title {
+        a {
+          @include icon-size-legacy(sm, after);
+        }
+      }
+    }
+
+    #{ns(card)}__title {
+      a {
+        @include icon-size-legacy(sm, after);
+      }
+    }
+  }
+
+  #{ns(card--lg)} {
+    &#{ns(enlarge-link)} {
+      #{ns(card)}__title {
+        a {
+          @include icon-size-legacy(lg, after);
+        }
+      }
+    }
+
+    #{ns(card)}__title {
+      a {
+        @include icon-size-legacy(md, after);
+      }
     }
   }
 }

src/component/card/template/ejs/content.ejs

@@ -43,7 +43,12 @@ if (content.assess === true) {
 } else if (typeof(content.assess) === 'string') {
     attributes[`data-${prefix}-assess-file`] = content.assess;
 }
-if (content.disabled !== true) attributes.href = href;
+if (content.disabled !== true) {
+    attributes.href = href;
+} else {
+  attributes.role = 'link';
+  attributes['aria-disabled'] = true;
+}
 if (content.lang) attributes.hreflang = content.lang;
 if (content.downloadable === true) attributes.download = '';
 if (typeof(content.downloadable) === 'string') attributes.download = content.downloadable;

src/component/content/example/sample/media-default.ejs

@@ -5,7 +5,9 @@ content.id = content.id || uniqueId('media');
 if (content.transcription === true) content.transcription = {
   id: uniqueId('transcription'),
   title: getText('modal.title', 'transcription'),
-  content: randomContent(['text', 'list'])
+  content: randomContent(['text', 'list']),
+  fullscreen: getText('button.fullscreen', 'transcription'),
+  fullscreenAriaLabel: getText('button.fullscreenAriaLabel', 'transcription'),
 };
 
 %>

src/component/download/deprecated/style/module/_download.scss

@@ -12,7 +12,9 @@
   @include padding-bottom(6v);
   @include margin(0 0 4v 0);
 
-  @include nest-download-link;
+  @include nest-download-link {
+    @include font-weight(regular);
+  }
 
   &__desc {
     @include text-style(sm);

src/component/follow/example/data/newsletter-alert.json.ejs

@@ -6,7 +6,7 @@ data.newsletter = {
   alert: {
     id: uniqueId("newsletter-alert"),
     type: "success",
-    text: "Votre inscription à bien été prise en compte"
+    text: "Votre inscription a bien été prise en compte."
   }
 }
 %>

src/component/form/deprecated/style/_module.scss

@@ -69,10 +69,13 @@
 
       label {
         @include padding(3v 0);
+      }
+    }
 
-        &::before {
-          @include margin-top(3v);
-        }
+    #{ns-group(radio)}:not(#{ns(radio-rich)}) input[type="radio"] + label,
+    #{ns-group(checkbox)} input[type="checkbox"] + label {
+      &::before {
+        top: #{space(3v)};
       }
     }
 
@@ -81,6 +84,7 @@
     & + #{ns(info-text)} {
       @include margin-top(0);
       @include margin-left(2v);
+      @include margin-bottom(4v);
     }
   }
 }

src/component/form/style/module/_fieldset.scss

@@ -8,7 +8,7 @@
   border: 0;
 
   &__legend {
-    @include margin-bottom(4v);
+    @include padding-bottom(4v);
     @include padding-x(3v);
     @include margin-x(-1v);
     @include text-style(md);
@@ -25,25 +25,19 @@
     }
   }
 
-  &--valid,
-  &--valid &__legend,
-  &--error,
-  &--error &__legend,
-  &--info,
-  &--info &__legend {
-    background-repeat: no-repeat;
-    background-position: 0 0;
-  }
-
   &--valid,
   &--error,
   &--info {
-    background-size: spacing.space(2px calc(100% - (4v)));
+    background-repeat: no-repeat;
+    background-position: 0 spacing.space(-9v);
+    background-size: spacing.space(2px calc(100% + (5v)));
   }
 
   &--valid &__legend,
   &--error &__legend,
   &--info &__legend {
+    background-repeat: no-repeat;
+    background-position: 0 0;
     background-size: 2px 100%;
   }