🔖 chore(*): DSFR v1.11.1

CHANGELOG.md

@@ -12,6 +12,77 @@ Pour plus d’informations : [Voir la documentation](https://www.systeme-de-desi
 
 ## v1.11
 
+### [v1.11.1](https://github.com/GouvernementFR/dsfr/compare/v1.11.0...v1.11.1) - 31 Janvier 2024
+
+#### ⬆️ chore(dependencies): met a jour les dépendances Node [(#877)](https://github.com/GouvernementFR/dsfr/pull/877)
+- monté de version des dépendances à follow-redirects et semver
+
+
+#### 🐛 fix(header): corrige les alignements des liens outils [(#876)](https://github.com/GouvernementFR/dsfr/pull/876)
+
+
+#### ✨ feat(accordions-group): ajoute un attribut pour dégrouper [(#860)](https://github.com/GouvernementFR/dsfr/pull/860)
+- 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
+- étend l'utilisation de cet attribut aux composants héritant du collapses-group : la navigation (uniquement en mobile) et le menu latéral
+
+
+#### 🐛  fix(header): espacement des liens d'accès rapide en mobile [(#859)](https://github.com/GouvernementFR/dsfr/pull/859)
+- corrige la taille des boutons d'accès rapide dans le menu mobile
+
+
+#### 🐛 fix(tooltip): fallback du fond en conic gradiant [3628] [(#863)](https://github.com/GouvernementFR/dsfr/pull/863)
+- ajout d'un fallback en linear-gradiant pour les navigateur qui ne supporte pas le conic-gradiant (ex: firefox < 83)
+
+
+#### 🐛 fix(core): retrait du tap-highlight ios [(#846)](https://github.com/GouvernementFR/dsfr/pull/846)
+- retrait du tap highlight des éléments input, button, a, label, select, textarea sur IOS dans le reset du core
+
+
+#### ✨ feat(content): met a jour les mises en situation [(#866)](https://github.com/GouvernementFR/dsfr/pull/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
+
+
+#### 🐛 fix(pally): corrige les erreurs pally [(#857)](https://github.com/GouvernementFR/dsfr/pull/857)
+
+
+#### ✨ feat(alert): ajoute un example de taille md avec description seule [(#853)](https://github.com/GouvernementFR/dsfr/pull/853)
+
+
+#### 🐛 fix(header): corrige le focus sur le champ de recherche [(#864)](https://github.com/GouvernementFR/dsfr/pull/864)
+
+
+#### ✨ feat(header): retire l'attribut aria-haspopup du bouton burger [(#856)](https://github.com/GouvernementFR/dsfr/pull/856)
+
+
+#### ✨ feat(login): ajoute la description de france connect [(#855)](https://github.com/GouvernementFR/dsfr/pull/855)
+
+
+#### ✨ feat(recover): supprime le package recover et le deplace dans login [(#854)](https://github.com/GouvernementFR/dsfr/pull/854)
+
+
+#### 🐛 fix(accordion): corrige le focus dans un groupe [(#867)](https://github.com/GouvernementFR/dsfr/pull/867)
+
+
+#### ✨ feat(analytics): ajout de la version du site [(#868)](https://github.com/GouvernementFR/dsfr/pull/868)
+
+
+#### 🐛 fix(select): corrige l'affichage du optgroup sur firefox windows [(#870)](https://github.com/GouvernementFR/dsfr/pull/870)
+
+
+#### 🐛 fix(footer, header, connect): retrait de l'icone target blank [(#872)](https://github.com/GouvernementFR/dsfr/pull/872)
+
+
+#### 🐛 fix(follow): retrait d'un fichier inutile [(#858)](https://github.com/GouvernementFR/dsfr/pull/858)
+
+
+#### 🐛 fix(header): corrige la duplication des collapses dans le menu mobile [(#873)](https://github.com/GouvernementFR/dsfr/pull/873)
+
+
+#### 🐛 fix(navigation): corrige bugs de fermeture du composant [(#840)](https://github.com/GouvernementFR/dsfr/pull/840)
+
+
+
 ### [v1.11.0](https://github.com/GouvernementFR/dsfr/compare/v1.10.2...v1.11.0) - 11 Décembre 2023
 
 #### ✨ feat(range): version optimisée en accessibilité [(#841)](https://github.com/GouvernementFR/dsfr/pull/841)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "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/doc/analytics/collector/site.md

@@ -18,6 +18,7 @@ window.dsfr.analytics.site
                 type: 'type', // site type
                 region: 'FR-IDF', // region of the website (ISO 3166-2:FR)
                 department: 'FR-75', // department of the website (ISO 3166-2:FR)
+                version: '1.0.0', // version of the website
             },
         }
     };
@@ -112,6 +113,26 @@ Défini le département du site (pour les sites départementaux) au format
 
 * * *
 
+##### version
+
+_String_ (EA: site\_version)
+
+`window.dsfr.analytics.site.version`
+
+Défini la version du site
+
+* * *
+
+##### api
+
+_String_ (EA: api\_version)
+
+`window.dsfr.analytics.site.api`
+
+Retourne la version de l’API DSFR, géré et injecté automatiquement par le script
+
+* * *
+
 ### MÉTHODES
 
 ##### reset (clear = false)

src/analytics/example/component/summary/index.ejs

@@ -1,6 +1,13 @@
 <% const sample = getSample(include); %>
 
 <%
+const getContent = (id) => {
+    return `<div id="anchor-${id}">
+        <h2>Contenu ${id}</h2>
+    <p>${lorem()}</p>
+</div>`;
+}
+
 const getItem = (id) => {
     return {
         id: `summary-link-${String(id).replace('.', '-')}`,
@@ -12,16 +19,19 @@ const getItem = (id) => {
 const links = [3,0,2,2];
 let data = {list:[]};
 data.title = 'Titre sommaire';
+let content = '';
 
 for (let i = 0; i < links.length; i++) {
     let id = i + 1
     const item = getItem(id);
+    content += getContent(id);
 
     if (links[i]) {
         item.list = [];
         for (let j = 0; j < links[i]; j++) {
             id = `${i + 1}.${j + 1}`;
             item.list.push(getItem(id));
+            content += getContent(id);
         }
     }
 
@@ -31,5 +41,6 @@ for (let i = 0; i < links.length; i++) {
 %>
 
 <div class="<%= prefix %>-container" >
-  <%- sample('Sommaire', '../../../../component/summary/example/sample/summary', { summary: {links: links} }); %>
+    <%- sample('Sommaire', '../../../../component/summary/example/sample/summary', { summary: {links: links} }); %>
+    <%- content; %>
 </div>

src/analytics/example/config.ejs

@@ -50,6 +50,7 @@
       // type: 'type', // site type
       // region: 'FR-IDF', // region of the website (ISO 3166-2:FR)
       // department: 'FR-75', // department of the website (ISO 3166-2:FR)
+      version: '1.0.0', // version of the website
     },
     /*
     search: {

src/analytics/example/spa/agnostic/index.ejs

@@ -23,7 +23,7 @@
                 Rechercher
               </button>
               <button class="<%= prefix %>-btn--menu <%= prefix %>-btn" data-<%= prefix %>-opened="false"
-                aria-controls="modal-124" aria-haspopup="menu" id="button-125" title="Menu">
+                aria-controls="modal-124" id="button-125" title="Menu">
                 Menu
               </button>
             </div>

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

@@ -10,7 +10,7 @@
 
     e.preventDefault();
     window.history.pushState({}, '', href);
-    urlLocationHandler();
+    handleUrlLocation();
   });
 
   // create an object that maps the url to the template, title, and description
@@ -38,7 +38,7 @@
   };
 
   // create a function that handles the url location
-  const urlLocationHandler = async () => {
+  const handleUrlLocation = async () => {
     let location = window.location.href.replace(HREF, ''); // get the url route
 
     // get the route object from the urlRoutes object
@@ -56,9 +56,9 @@
   };
 
   // add an event listener to the window that watches for url changes
-  window.onpopstate = urlLocationHandler;
-  // call the urlLocationHandler function to handle the initial url
-  window.route = urlLocationHandler;
-  // call the urlLocationHandler function to handle the initial url
-  urlLocationHandler();
+  window.onpopstate = handleUrlLocation;
+  // call the handleUrlLocation function to handle the initial url
+  window.route = handleUrlLocation;
+  // call the handleUrlLocation function to handle the initial url
+  handleUrlLocation();
 </script>

src/analytics/example/spa/angular/_index.ejs

@@ -34,7 +34,7 @@ app.config(function($routeProvider) {
                             <button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-122" id="button-123" title="Rechercher" >
                                 Rechercher
                             </button>
-                            <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-124" aria-haspopup="menu" id="button-125" title="Menu">
+                            <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-124" id="button-125" title="Menu">
                                 Menu
                             </button>
                         </div>

src/analytics/example/spa/react/index.ejs

@@ -34,7 +34,7 @@
                                 <button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-122" id="button-123" title="Rechercher" >
                                     Rechercher
                                 </button>
-                                <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-124" aria-haspopup="menu" id="button-125" title="Menu">
+                                <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-124" id="button-125" title="Menu">
                                     Menu
                                 </button>
                             </div>

src/analytics/example/spa/vue/index.ejs

@@ -21,7 +21,7 @@
                                 <button class="<%= prefix %>-btn--search <%= prefix %>-btn" data-<%= prefix %>-opened="false" aria-controls="modal-122" id="button-123" title="Rechercher" data-<%= prefix %>-js-modal-button="true" >
                                     Rechercher
                                 </button>
-                                <button class="<%= prefix %>-btn--menu <%= prefix %>-btn" data-<%= prefix %>-opened="false" aria-controls="modal-124" aria-haspopup="menu" id="button-125" title="Menu">
+                                <button class="<%= prefix %>-btn--menu <%= prefix %>-btn" data-<%= prefix %>-opened="false" aria-controls="modal-124" id="button-125" title="Menu">
                                     Menu
                                 </button>
                             </div>
@@ -39,7 +39,7 @@
                         <div class="<%= prefix %>-header__tools-links">
                             <ul class="<%= prefix %>-btns-group">
                                 <li>
-                                    <router-link id="btn-shortcut-1" class="<%= prefix %>-btn" to="/link">Lien</router-link>
+                                    <router-link exact-path id="btn-shortcut-1" class="<%= prefix %>-btn" to="/link">Lien</router-link>
                                 </li>
                             </ul>
                         </div>
@@ -75,13 +75,13 @@
                 <nav class="<%= prefix %>-nav" id="navigation-134" role="navigation" aria-label="Menu principal">
                   <ul class="<%= prefix %>-nav__list">
                     <li class="<%= prefix %>-nav__item">
-                      <router-link id="link-3" class="<%= prefix %>-nav__link" to="/">Base</router-link>
+                      <router-link exact-path id="link-3" class="<%= prefix %>-nav__link" to="/">Base</router-link>
                     </li>
                     <li class="<%= prefix %>-nav__item">
-                      <router-link id="link-3" class="<%= prefix %>-nav__link" to="/link">Liens</router-link>
+                      <router-link exact-path id="link-3" class="<%= prefix %>-nav__link" to="/link">Liens</router-link>
                     </li>
                     <li class="<%= prefix %>-nav__item">
-                      <router-link id="link-3" class="<%= prefix %>-nav__link" to="/button">Boutons</router-link>
+                      <router-link exact-path id="link-3" class="<%= prefix %>-nav__link" to="/button">Boutons</router-link>
                     </li>
                   </ul>
                 </nav>
@@ -139,7 +139,7 @@
 
 <script>
   const { createApp } = Vue
-  const { createRouter, createWebHashHistory } = VueRouter
+  const { createRouter, createMemoryHistory } = VueRouter
 
   const Base = { template: `lorem ipsum dolor sit amet` };
   const Link = { template: `<a href="#" id="btn-4" data-<%= prefix %>-analytics-click="libellé du lien envoyé à l'analytics" id="link-attr-click">test</a>` };
@@ -152,7 +152,7 @@
   ];
 
   const router = createRouter({
-    history: createWebHashHistory(),
+    history: createMemoryHistory(),
     routes
   });
 

src/analytics/script/analytics/collector/site/site.js

@@ -16,6 +16,7 @@ class Site {
     this.type = clear ? undefined : this._config.type;
     this.region = clear ? undefined : this._config.region;
     this.department = clear ? undefined : this._config.department;
+    this.version = clear ? undefined : this._config.version;
     this._api = api.version;
   }
 
@@ -99,6 +100,15 @@ class Site {
     return this._department;
   }
 
+  set version (value) {
+    const valid = validateString(value, 'site.version');
+    if (valid !== null) this._version = valid;
+  }
+
+  get version () {
+    return this._version;
+  }
+
   get api () {
     return this._api;
   }
@@ -113,6 +123,7 @@ class Site {
     if (this.type) layer.push('site_type', normalize(this.type));
     if (this.region) layer.push('site_region', this.region);
     if (this.department) layer.push('site_department', this.department);
+    if (this.version) layer.push('site_version', this.version);
     if (this.api) layer.push('api_version', this.api);
     return layer;
   }

src/analytics/script/integration/component/component-actionee.js

@@ -63,8 +63,8 @@ class ComponentActionee extends Actionee {
     const button = this.element.getDescendantInstances('ButtonActionee', null, true)[0];
     if (button) button.isMuted = true;
     this._validatedInput = node.querySelector('input');
-    this._inputValidationHandler = this._handleInputValidation.bind(this);
-    if (this._validatedInput) this._validatedInput.addEventListener('keydown', this._inputValidationHandler);
+    this._handlingInputValidation = this._handleInputValidation.bind(this);
+    if (this._validatedInput) this._validatedInput.addEventListener('keydown', this._handlingInputValidation);
   }
 
   _handleInputValidation (e) {
@@ -141,7 +141,7 @@ class ComponentActionee extends Actionee {
 
   dispose () {
     if (this._validatedInput) {
-      this._validatedInput.removeEventListener('keydown', this._inputValidationHandler);
+      this._validatedInput.removeEventListener('keydown', this._handlingInputValidation);
     }
 
     super.dispose();

src/analytics/script/integration/core/actionee.js

@@ -141,9 +141,8 @@ class Actionee extends api.core.Instance {
   listenClick (target) {
     if (target) {
       this._clickTarget = target;
-      this._clickHandler = this.handleClick.bind(this);
-      this._clickTarget.addEventListener('click', this._clickHandler, { capture: true });
-    } else this.listen('click', this.handleClick.bind(this), { capture: true });
+      this._clickTarget.addEventListener('click', this.handlingClick, { capture: true });
+    } else this.listenClick({ capture: true });
   }
 
   handleClick () {
@@ -259,7 +258,7 @@ class Actionee extends api.core.Instance {
 
   dispose () {
     if (this._clickTarget) {
-      this._clickTarget.removeEventListener('click', this._clickHandler);
+      this._clickTarget.removeEventListener('click', this.handlingClick);
     }
     super.dispose();
   }

src/component/accordion/example/index.ejs

@@ -3,3 +3,5 @@
 <%- sample('Accordéon', './sample/accordion', {}, true); %>
 
 <%- sample('Groupe d‘accordéons', './sample/accordions-group', {}, true); %>
+
+<%- sample('Groupe d‘accordéons dissociés', './sample/accordions-group', {accordionsGroup: {group: false}}, true); %>

src/component/accordion/example/sample/accordions-group.ejs

@@ -1,14 +1,16 @@
 <%
-const accordions = [];
+let accordionsGroup = locals.accordionsGroup || {};
 
+const accordions = [];
 for (let i = 0; i < 6; i++) accordions.push({
   label: 'Intitulé accordéon',
   content: randomContent(),
   id: uniqueId('accordion'),
 });
 
-const accordionsGroup = {
-  accordions: accordions
+accordionsGroup = {
+  accordions: accordions,
+  ...accordionsGroup
 }
 %>
 

src/component/accordion/style/_module.scss

@@ -21,6 +21,10 @@
     line-height: unset;
   }
 
+  &:focus-within {
+    @include z-index(over);
+  }
+
   &__btn {
     @include _build-link-base;
     @include _link-display(flex);