🔖 chore(*): DSFR v1.13.0

README.md

@@ -83,12 +83,12 @@ Une structure minimale serait :
 └── favicon/
 └── fonts/
 └── utility/
-  └── utilities.min.css
+  └── utility.min.css
 ```
 
 Les polices de caractères utilisées sur le DS, à savoir la Marianne et la Spectral, sont des fichiers .woff et .woff2, ils doivent se trouver dans le répertoire `fonts`. Les dossiers `fonts` et `favicon` doivent être placés au même niveau que le dossier contenant le CSS du core du dsfr (ou au même niveau que le css `dsfr.min.css` à la racine de dist, qui contient le core).
 
-Le fichier `utilities.min.css` doit être placé un niveau plus bas que le dossier `icons`, dans dossier utility par exemple, pour respecter les chemins d'accès vers les icônes.
+Le fichier `utility.min.css` doit être placé un niveau plus bas que le dossier `icons`, dans dossier utility par exemple, pour respecter les chemins d'accès vers les icônes.
 
 ### Le HTML
 

package.json

@@ -40,7 +40,7 @@
     "@commitlint/config-conventional": "^15.0.0",
     "@rollup/plugin-buble": "^0.21.3",
     "@rollup/plugin-virtual": "^2.1.0",
-    "browser-sync": "^2.27.10",
+    "browser-sync": ">=2.27.10",
     "browserslist": "^4.21.5",
     "cssnano": "^5.1.15",
     "del": "^6.0.0",
@@ -83,9 +83,6 @@
     "svgo": "^2.8.0",
     "yargs": "^17.7.1"
   },
-  "peerDependencies": {
-    "browser-sync": "^2.27.10"
-  },
   "husky": {
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"

src/analytics/doc/analytics/collector/page.md

@@ -52,7 +52,7 @@ _String_ (EA: path)
 
 * Défini le chemin de la page
 
-* Utilise `document.location.pathname` si non défini
+* Utilise `document.location.pathname/document.location.search` si non défini
 
 * * *
 

src/analytics/example/action/index.ejs

@@ -2,13 +2,13 @@
   <div>
     <h4>action activée</h4>
     <div class="<%= prefix %>-mb-6v">
-      <button class="<%= prefix %>-btn" data-<%= prefix %>-analytics-action="libellé envoyé à l'analytics" id="action-true" >libellé du bouton</button>
+      <button type="button" class="<%= prefix %>-btn" data-<%= prefix %>-analytics-action="libellé envoyé à l'analytics" id="action-true" >libellé du bouton</button>
     </div>
   </div>
   <div>
     <h4>action prévenue</h4>
     <div class="<%= prefix %>-mb-6v">
-      <button class="<%= prefix %>-btn" data-<%= prefix %>-analytics-action="false" id="action-false" >libellé du bouton</button>
+      <button type="button" class="<%= prefix %>-btn" data-<%= prefix %>-analytics-action="false" id="action-false" >libellé du bouton</button>
     </div>
   </div>
 </div>

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

@@ -17,12 +17,12 @@
               <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
             </div>
             <div class="<%= prefix %>-header__navbar">
-              <button class="<%= prefix %>-btn--search <%= prefix %>-btn" data-<%= prefix %>-opened="false"
+              <button type="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"
+              <button type="button" class="<%= prefix %>-btn--menu <%= prefix %>-btn" data-<%= prefix %>-opened="false"
                 aria-controls="modal-124" id="button-125" title="Menu">
                 Menu
               </button>
@@ -48,7 +48,7 @@
           </div>
           <div class="<%= prefix %>-header__search <%= prefix %>-modal" id="modal-122">
             <div class="<%= prefix %>-container <%= prefix %>-container-lg--fluid">
-              <button class="<%= prefix %>-btn--close <%= prefix %>-btn" aria-controls="modal-122" id="button-130"
+              <button type="button" class="<%= prefix %>-btn--close <%= prefix %>-btn" aria-controls="modal-122" id="button-130"
                 title="Fermer">
                 Fermer
               </button>
@@ -60,7 +60,7 @@
                   placeholder="Rechercher" id="search-121-input" type="search">
                 <div class="<%= prefix %>-messages-group" id="search-121-input-messages" aria-live="polite">
                 </div>
-                <button class="<%= prefix %>-btn" id="search-btn-132" title="Rechercher">
+                <button type="button" class="<%= prefix %>-btn" id="search-btn-132" title="Rechercher">
                   Rechercher
                 </button>
               </div>

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

@@ -31,7 +31,7 @@
       description: 'This is the about page',
     },
     'button': {
-      template: `<button id="btn-3" class="<%= prefix %>-btn">Button page 3</button>`,
+      template: `<button type="button" id="btn-3" class="<%= prefix %>-btn">Button page 3</button>`,
       title: 'Buttons | ' + urlPageTitle,
       description: 'This is the contact page',
     },

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

@@ -11,7 +11,7 @@ app.config(function($routeProvider) {
     template : '<div><h2>LINK</h2><a href="#" data-<%= prefix %>-analytics-click="libellé du lien envoyé à l\'analytics" id="link-attr-click">test</a></div>'
   })
   .when("/button", {
-    template : '<div><h2>BUTTON</h2><button id="btn-3" class="<%= prefix %>-btn">Button</button></div>'
+    template : '<div><h2>BUTTON</h2><button type="button" id="btn-3" class="<%= prefix %>-btn">Button</button></div>'
   });
 });
 </script>
@@ -31,10 +31,10 @@ app.config(function($routeProvider) {
                             </p>
                         </div>
                         <div class="fr-header__navbar">
-                            <button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-122" id="button-123" title="Rechercher" >
+                            <button type="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" id="button-125" title="Menu">
+                            <button type="button" class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-124" id="button-125" title="Menu">
                                 Menu
                             </button>
                         </div>
@@ -58,7 +58,7 @@ app.config(function($routeProvider) {
                     </div>
                     <div class="fr-header__search fr-modal" id="modal-122">
                         <div class="fr-container fr-container-lg--fluid">
-                            <button class="fr-btn--close fr-btn" aria-controls="modal-122" id="button-130" title="Fermer">
+                            <button type="button" class="fr-btn--close fr-btn" aria-controls="modal-122" id="button-130" title="Fermer">
                                 Fermer
                             </button>
                             <div class="fr-search-bar" id="search-121" role="search">
@@ -68,7 +68,7 @@ app.config(function($routeProvider) {
                                 <input class="fr-input" aria-describedby="search-121-input-messages" placeholder="Rechercher" id="search-121-input" type="search"/>
                                 <div class="fr-messages-group" id="search-121-input-messages" aria-live="polite">
                                 </div>
-                                <button class="fr-btn" id="search-btn-132" title="Rechercher">
+                                <button type="button" class="fr-btn" id="search-btn-132" title="Rechercher">
                                     Rechercher
                                 </button>
                             </div>
@@ -80,7 +80,7 @@ app.config(function($routeProvider) {
     </div>
     <div class="fr-header__menu fr-modal" id="modal-124">
       <div class="fr-container">
-        <button class="fr-btn--close fr-btn" aria-controls="modal-2414" id="button-2419" title="Fermer">
+        <button type="button" class="fr-btn--close fr-btn" aria-controls="modal-2414" id="button-2419" title="Fermer">
             Fermer
         </button>
         <div class="fr-header__menu-links">
@@ -99,4 +99,18 @@ app.config(function($routeProvider) {
   </header>
 
   <div ng-view></div>
+
+  <script>
+    switch (document.readyState) {
+        case "loading":
+        document.addEventListener("DOMContentLoaded", () => dsfr.start());
+        break;
+        case "interactive":
+        dsfr.start();
+        break;
+        case "complete":
+        dsfr.start();
+        break;
+    }
+  </script>
 </div>

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

@@ -31,10 +31,10 @@
                                 </p>
                             </div>
                             <div class="fr-header__navbar">
-                                <button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-122" id="button-123" title="Rechercher" >
+                                <button type="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" id="button-125" title="Menu">
+                                <button type="button" class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-124" id="button-125" title="Menu">
                                     Menu
                                 </button>
                             </div>
@@ -58,7 +58,7 @@
                         </div>
                         <div class="fr-header__search fr-modal" id="modal-122">
                             <div class="fr-container fr-container-lg--fluid">
-                                <button class="fr-btn--close fr-btn" aria-controls="modal-122" id="button-130" title="Fermer">
+                                <button type="button" class="fr-btn--close fr-btn" aria-controls="modal-122" id="button-130" title="Fermer">
                                     Fermer
                                 </button>
                                 <div class="fr-search-bar" id="search-121" role="search">
@@ -68,7 +68,7 @@
                                     <input class="fr-input" aria-describedby="search-121-input-messages" placeholder="Rechercher" id="search-121-input" type="search"/>
                                     <div class="fr-messages-group" id="search-121-input-messages" aria-live="polite">
                                     </div>
-                                    <button class="fr-btn" id="search-btn-132" title="Rechercher">
+                                    <button type="button" class="fr-btn" id="search-btn-132" title="Rechercher">
                                         Rechercher
                                     </button>
                                 </div>
@@ -80,7 +80,7 @@
         </div>
         <div class="fr-header__menu fr-modal" id="modal-124">
           <div class="fr-container">
-            <button class="fr-btn--close fr-btn" aria-controls="modal-2414" id="button-2419" title="Fermer">
+            <button type="button" class="fr-btn--close fr-btn" aria-controls="modal-2414" id="button-2419" title="Fermer">
                 Fermer
             </button>
             <div class="fr-header__menu-links">
@@ -108,9 +108,20 @@
 
   const Home = props => <div><h2>HOME</h2><p>lorem ipsum dolor sit amet</p></div>
   const Links = props => <div><h2>LINK</h2><a href="#" data-fr-analytics-click="libellé du lien envoyé à l'analytics" id="link-attr-click">test</a></div>
-  const Button = props => <div><h2>BUTTON</h2><button id="btn-3" class="<%= prefix %>-btn">Button</button></div>
+  const Button = props => <div><h2>BUTTON</h2><button type="button" id="btn-3" class="<%= prefix %>-btn">Button</button></div>
 
   ReactDOM.render(<ReactRouterDOM.BrowserRouter><App /></ReactRouterDOM.BrowserRouter>, document.querySelector('#react-container'));
 
+  switch (document.readyState) {
+    case "loading":
+      document.addEventListener("DOMContentLoaded", () => dsfr.start());
+      break;
+    case "interactive":
+      dsfr.start();
+    break;
+    case "complete":
+      dsfr.start();
+    break;
+  }
 
-</script>
+</script>

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

@@ -18,10 +18,10 @@
                                 <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
                             </div>
                             <div class="<%= prefix %>-header__navbar">
-                                <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" >
+                                <button type="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" id="button-125" title="Menu">
+                                <button type="button" class="<%= prefix %>-btn--menu <%= prefix %>-btn" data-<%= prefix %>-opened="false" aria-controls="modal-124" id="button-125" title="Menu">
                                     Menu
                                 </button>
                             </div>
@@ -45,7 +45,7 @@
                         </div>
                         <div class="<%= prefix %>-header__search <%= prefix %>-modal" id="modal-122">
                             <div class="<%= prefix %>-container <%= prefix %>-container-lg--fluid">
-                                <button class="<%= prefix %>-btn--close <%= prefix %>-btn" aria-controls="modal-122" id="button-130" title="Fermer">
+                                <button type="button" class="<%= prefix %>-btn--close <%= prefix %>-btn" aria-controls="modal-122" id="button-130" title="Fermer">
                                     Fermer
                                 </button>
                                 <div class="<%= prefix %>-search-bar" id="search-121" role="search">
@@ -55,7 +55,7 @@
                                     <input class="<%= prefix %>-input" aria-describedby="search-121-input-messages" placeholder="Rechercher" id="search-121-input" type="search">
                                     <div class="<%= prefix %>-messages-group" id="search-121-input-messages" aria-live="polite">
                                     </div>
-                                    <button class="<%= prefix %>-btn" id="search-btn-132" title="Rechercher">
+                                    <button type="button" class="<%= prefix %>-btn" id="search-btn-132" title="Rechercher">
                                         Rechercher
                                     </button>
                                 </div>
@@ -67,7 +67,7 @@
         </div>
         <div class="<%= prefix %>-header__menu <%= prefix %>-modal" id="modal-124">
             <div class="<%= prefix %>-container">
-                <button class="<%= prefix %>-btn--close <%= prefix %>-btn" aria-controls="modal-124" id="button-133" title="Fermer">
+                <button type="button" class="<%= prefix %>-btn--close <%= prefix %>-btn" aria-controls="modal-124" id="button-133" title="Fermer">
                     Fermer
                 </button>
                 <div class="<%= prefix %>-header__menu-links">
@@ -104,11 +104,11 @@
         </div>
         <div v-if="pagination==2">
           <h1>Page {{pagination}}</h1>
-          <button id="btn-1" class="<%= prefix %>-btn">Button 1</button>
+          <button type="button" id="btn-1" class="<%= prefix %>-btn">Button 1</button>
         </div>
         <div v-if="pagination==3">
           <h1>Page {{pagination}}</h1>
-          <button id="btn-2" class="<%= prefix %>-btn">Button 2</button>
+          <button type="button" id="btn-2" class="<%= prefix %>-btn">Button 2</button>
         </div>
 
         <nav role="navigation" class="<%= prefix %>-pagination <%= prefix %>-mt-8v" aria-label="Pagination">
@@ -143,7 +143,7 @@
 
   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>` };
-  const Button = { template: `<button id="btn-5" class="<%= prefix %>-btn">Button page 3</button>` };
+  const Button = { template: `<button type="button" id="btn-5" class="<%= prefix %>-btn">Button page 3</button>` };
 
   const routes = [
       { path: "/", component: Base },
@@ -165,4 +165,16 @@
   })
   .use(router)
   .mount("#vue-container")
+
+  switch (document.readyState) {
+    case "loading":
+      document.addEventListener("DOMContentLoaded", () => dsfr.start());
+      break;
+    case "interactive":
+      dsfr.start();
+    break;
+    case "complete":
+      dsfr.start();
+    break;
+  }
 </script>

src/component/accordion/template/ejs/accordion.ejs

@@ -20,7 +20,7 @@
 
 <section class="<%= prefix %>-accordion">
   <h3 class="<%= prefix %>-accordion__title">
-    <button class="<%= prefix %>-accordion__btn" aria-expanded="<%= isExpanded %>" aria-controls="<%= accordion.id %>" ><%- accordion.label %></button>
+    <button type="button" class="<%= prefix %>-accordion__btn" aria-expanded="<%= isExpanded %>" aria-controls="<%= accordion.id %>" ><%- accordion.label %></button>
   </h3>
   <div class="<%= prefix %>-collapse" id="<%= accordion.id %>">
     <% if (accordion.content !== undefined) { %>

src/component/alert/example/layout-dynamic.ejs

@@ -4,7 +4,7 @@
   <h4><%= title %></h4>
   <% } %>
   <div class="<%= prefix %>-mb-6v" >
-    <button class="fr-btn" id="button-add" onclick="const component = document.createElement('div'); component.className = 'fr-my-8v'; component.innerHTML = decodeURIComponent('<%- encodeURIComponent(component) %>'); this.after(component);">Bouton d'ajout</button>
+    <button type="button" class="fr-btn" id="button-add" onclick="const component = document.createElement('div'); component.className = 'fr-my-8v'; component.innerHTML = decodeURIComponent('<%- encodeURIComponent(component) %>'); this.after(component);">Bouton d'ajout</button>
 
 </div>
   <% if (locals.snippet !== undefined) { %>

src/component/breadcrumb/template/ejs/breadcrumb.ejs

@@ -19,7 +19,7 @@ if (breadcrumb.button === undefined) breadcrumb.button = 'Voir le fil d’Ariane
 %>
 
 <nav role="navigation" class="<%= prefix %>-breadcrumb" aria-label="vous êtes ici :">
-  <button class="<%= prefix %>-breadcrumb__button" aria-expanded="false"
+  <button type="button" class="<%= prefix %>-breadcrumb__button" aria-expanded="false"
     aria-controls="<%= breadcrumb.id %>"><%= breadcrumb.button %></button>
   <div class="<%= prefix %>-collapse" id="<%= breadcrumb.id %>">
     <ol class="<%= prefix %>-breadcrumb__list">

src/component/button/style/_legacy.scss

@@ -79,10 +79,9 @@
 
   #{ns(btn--sort)} {
     @include icon-legacy(arrow-up-down-line, sm);
-    @include animate.rotate('&[aria-sorting='desc']');
 
-    &[aria-sorting='asc'],
-    &[aria-sorting='desc'] {
+    &[aria-sort='ascending'],
+    &[aria-sort='descending'] {
       @include icon-legacy(arrow-up-line, sm);
     }
   }

src/component/button/style/module/_sort.scss

@@ -7,10 +7,10 @@
 
 #{ns(btn--sort)} {
   @include nest-btn(sm, only, arrow-up-down-line, null, false);
-  @include animate.rotate('&[aria-sorting='desc']');
+  @include animate.rotate('&[aria-sort='descending']');
 
-  &[aria-sorting='asc'],
-  &[aria-sorting='desc'] {
+  &[aria-sort='ascending'],
+  &[aria-sort='descending'] {
     @include nest-btn(sm, only, arrow-up-line, null, false);
   }
 }

src/component/button/template/ejs/button.ejs

@@ -43,6 +43,7 @@ const button = locals.button || {};
 let btnClasses = button.classes || [];
 let btnAttrs = button.attributes || {};
 btnAttrs.id = button.id || uniqueId('button');
+btnAttrs.type = button.type || 'button';
 btnClasses.push(prefix + '-btn');
 let action;
 const markup = button.markup || 'button';