@gouvfr/dsfr-roller 1.0.25 → 1.0.27

package/src/page/body/custom-header.js

@@ -14,10 +14,16 @@ class CustomHeader extends Renderable {
   }
   async render () {
     let toolsContent = await this._version.render({ id: 'version', collapseId: 'version-collapse' });
-    if (this._translate) toolsContent += await this._translate.render({ id: 'translate', collapseId: 'translate-collapse' });
+    if (this._translate) {
+      const translate = await this._translate.render({ id: 'translate', collapseId: 'translate-collapse' });
+      toolsContent += translate.replace('<nav', '<div').replace('</nav>', '</div>').replace('role="navigation" ', '');
+    }
 
     let menuContent = await this._version.render({ id: 'version-menu', collapseId: 'version-collapse-menu' });
-    if (this._translate) menuContent += await this._translate.render({ id: 'translate-menu', collapseId: 'translate-collapse-menu' });
+    if (this._translate) {
+      const translate = await this._translate.render({ id: 'translate-menu', collapseId: 'translate-collapse-menu' });
+      menuContent += translate.replace('<nav', '<div').replace('</nav>', '</div>').replace('role="navigation" ', '');
+    }
 
     const navigation = await this._navigation.format();
 

package/src/page/body/toc.js

@@ -85,7 +85,7 @@ class TOC extends Renderable {
         break;
     }
 
-    const summary = new Summary({ list: mainList });
+    const summary = new Summary({ title: this.data?.fragments?.summary?.title, list: mainList });
 
     return `<div class="fr-mb-6v" >
     ${await summary.render()}

package/src/script/home/inject-svg.js

@@ -18,11 +18,10 @@ class InjectSvg extends Element {
         const svgElement = svgDocument.querySelector('svg');
         if (this._class) svgElement.setAttribute('class', this._class);
         if (this._ariaHidden !== null) svgElement.setAttribute('aria-hidden', this._ariaHidden);
-        if (this._alt) svgElement.setAttribute('aria-label', this._alt);
         this._element.parentNode.insertBefore(svgElement, this._element);
         this._element.remove();
       });
   }
 }
 
-export { InjectSvg };
+export { InjectSvg };

package/src/script/main/cmp/tarteaucitron/services.js

@@ -6301,7 +6301,7 @@ export const vimeo = {
         'use strict';
         tarteaucitron.fallback(['vimeo_player'], function (x) {
             var frame_title =
-                    tarteaucitron.getElemAttr(x, 'title') || 'Vimeo iframe',
+                    tarteaucitron.getElemAttr(x, 'title') || 'Vimeo',
                 video_width = tarteaucitron.getElemAttr(x, 'width'),
                 frame_width = 'width=',
                 video_height = tarteaucitron.getElemAttr(x, 'height'),

package/src/script/main/cmp/tarteaucitron/tarteaucitron.js

@@ -436,9 +436,9 @@ export var tarteaucitron = {
                                             </button>
                                         </div>
                                         <div class="fr-modal__content">
-                                            <h3 class="fr-modal__title fr-h3" id="fr-consent-modal-title">
+                                            <h2 class="fr-modal__title fr-h3" id="fr-consent-modal-title">
                                                 ${tarteaucitron.lang.title}
-                                            </h3>
+                                            </h2>
                                             <div class="fr-consent-manager">
                                                 <div class="fr-consent-service fr-consent-manager__header">
                                                     <fieldset class="fr-fieldset fr-fieldset--inline">
@@ -447,7 +447,7 @@ export var tarteaucitron = {
                                                                 tarteaucitron
                                                                     .lang
                                                                     .disclaimer
-                                                                    ? `<p class="fr-mb-0">${tarteaucitron.lang.disclaimer}</p>`
+                                                                    ? `${tarteaucitron.lang.disclaimer} `
                                                                     : ''
                                                             }
                                                             ${
@@ -455,7 +455,7 @@ export var tarteaucitron = {
                                                                     .parameters
                                                                     .privacyUrl !==
                                                                 ''
-                                                                    ? `<a class="fr-link" id="tarteaucitronPrivacyUrlDialog" href="${tarteaucitron.parameters.privacyUrl}" title="${tarteaucitron.lang.privacyUrl} (${tarteaucitron.lang.newWindow})">${tarteaucitron.lang.privacyUrl}</a>`
+                                                                    ? `<a class="fr-link" id="tarteaucitronPrivacyUrlDialog" href="${tarteaucitron.parameters.privacyUrl}" title="${tarteaucitron.lang.privacyUrl}">${tarteaucitron.lang.privacyUrl}</a>`
                                                                     : ''
                                                             }
                                                             ${
@@ -666,14 +666,14 @@ export var tarteaucitron = {
                     !tarteaucitron.parameters.AcceptAllCta
                 ) {
                     html += `<div tabindex="-1" id="tarteaucitronAlertBig" class="fr-consent-banner" ${modalAttrs}>`;
-                    html += `<h3 class="fr-h6">${tarteaucitron.lang.alertBigPrivacy.title}</h3>`;
+                    html += `<h2 class="fr-h6">${tarteaucitron.lang.alertBigPrivacy.title}</h2>`;
                     html += `<div id="tarteaucitronDisclaimerAlert" class="fr-consent-banner__content"><p class="fr-text--sm">${tarteaucitron.lang.alertBigPrivacy.content}</p></div>`;
                     html += `<ul class="fr-consent-banner__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-sm">`;
                     html += `<li><button class="fr-btn fr-btn--secondary" data-fr-opened="false" aria-controls="consent-modal" aria-label="${tarteaucitron.lang.personalize} ${tarteaucitron.lang.modalWindow}" title="${tarteaucitron.lang.personalize} ${tarteaucitron.lang.modalWindow}" type="button" id="tarteaucitronPersonalize">${tarteaucitron.lang.personalize}</button></li>`;
                     html += '</ul></div>';
                 } else {
                     html += `<div tabindex="-1" id="tarteaucitronAlertBig" class="fr-consent-banner" ${modalAttrs}>`;
-                    html += `<h3 class="fr-h6">${tarteaucitron.lang.alertBigPrivacy.title}</h3>`;
+                    html += `<h2 class="fr-h6">${tarteaucitron.lang.alertBigPrivacy.title}</h2>`;
                     html += `<div id="tarteaucitronDisclaimerAlert" class="fr-consent-banner__content"><p class="fr-text--sm">${
                         tarteaucitron.parameters.highPrivacy
                             ? tarteaucitron.lang.alertBigPrivacy.content
@@ -925,7 +925,7 @@ export var tarteaucitron = {
                         // The setimeout at 1500 ms will prevent the location.reload event to be properly binded...
                         if (tarteaucitronNoAdBlocker === false) {
                             html = `<div id="tarteaucitronAlertBig" class="fr-consent-banner tarteaucitronAlertBig tarteaucitron-display-block" role="alert" aria-live="polite">`;
-                            html += `<h3 class="fr-h6">${tarteaucitron.lang.adblock}</h3>`;
+                            html += `<h2 class="fr-h6">${tarteaucitron.lang.adblock}</h2>`;
                             html += `<div id="tarteaucitronDisclaimerAlert" class="fr-consent-banner__content"><p class="fr-text--sm">${tarteaucitron.lang.adblock_call}</p></div>`;
                             html += `<ul class="fr-consent-banner__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-sm">`;
                             html += `<li><button class="fr-btn tarteaucitronCTAButton" aria-label="${tarteaucitron.lang.reload}" title="${tarteaucitron.lang.reload}" type="button" id="tarteaucitronCTAButton">${tarteaucitron.lang.reload}</button></li>`;

package/src/script/main/elements/pagination/pagination-list.js

@@ -1,131 +1,107 @@
-import {
-    PaginationItem,
-    PaginationItemTypes,
-    PaginationItemPositions,
-} from './pagination-item.js';
+import { PaginationItem, PaginationItemTypes, PaginationItemPositions } from './pagination-item.js';
 import { getCurrentPagination } from '../../core/get-query.js';
 
 class PaginationList {
-    constructor(pagesNumber) {
-        this._currentPage = getCurrentPagination() || 1;
-        this._totalPages = pagesNumber;
-        this._items = [];
-        this.init();
-    }
+  constructor (pagesNumber) {
+    this._currentPage = getCurrentPagination() || 1;
+    this._totalPages = pagesNumber;
+    this._items = [];
+    this.init();
+  }
 
-    getPosition() {
-        switch (true) {
-            case this._currentPage === 1:
-                return PaginationItemPositions.FIRST;
-            case this._currentPage === this._totalPages:
-                return PaginationItemPositions.LAST;
-            default:
-                return null;
-        }
+  getPosition () {
+    switch (true) {
+      case this._currentPage === 1:
+        return PaginationItemPositions.FIRST;
+      case this._currentPage === this._totalPages:
+        return PaginationItemPositions.LAST;
+      default:
+        return null;
     }
+  }
 
-    init() {
-        const position = this.getPosition();
-        this._items.push(
-            new PaginationItem(
-                PaginationItemTypes.FIRST,
-                1,
-                this._currentPage === 1,
-                position
-            )
-        );
-        this._items.push(
-            new PaginationItem(
-                PaginationItemTypes.PREV,
-                Math.max(this._currentPage - 1, 1),
-                this._currentPage === 1,
-                position
-            )
-        );
+  init () {
+    this.setPageTitle();
 
-        const pages =
-            this._totalPages <= 5 ? this.getAllPages() : this.getDynamicPages();
+    const position = this.getPosition();
+    this._items.push(new PaginationItem(PaginationItemTypes.FIRST, 1, this._currentPage === 1, position));
+    this._items.push(new PaginationItem(PaginationItemTypes.PREV, Math.max(this._currentPage - 1, 1), this._currentPage === 1, position));
 
-        for (const page of pages) {
-            this._items.push(
-                new PaginationItem(
-                    page.type,
-                    page.index,
-                    this._currentPage === page.index
-                )
-            );
-        }
+    const pages = this._totalPages <= 5 ? this.getAllPages() : this.getDynamicPages();
 
-        this._items.push(
-            new PaginationItem(
-                PaginationItemTypes.NEXT,
-                Math.min(this._currentPage + 1, this._totalPages),
-                this._currentPage === this._totalPages,
-                position
-            )
-        );
-        this._items.push(
-            new PaginationItem(
-                PaginationItemTypes.LAST,
-                this._totalPages,
-                this._currentPage === this._totalPages,
-                position
-            )
-        );
+    for (const page of pages) {
+      this._items.push(new PaginationItem(page.type, page.index, this._currentPage === page.index));
     }
 
-    getAllPages() {
-        return [
-            ...Array.from({ length: this._totalPages }, (_, i) => ({
-                type: PaginationItemTypes.PAGE,
-                index: i + 1,
-            })),
-        ];
-    }
+    this._items.push(
+      new PaginationItem(
+        PaginationItemTypes.NEXT,
+        Math.min(this._currentPage + 1, this._totalPages),
+        this._currentPage === this._totalPages,
+        position
+      )
+    );
+    this._items.push(new PaginationItem(PaginationItemTypes.LAST, this._totalPages, this._currentPage === this._totalPages, position));
+  }
 
-    getDynamicPages() {
-        const ellipsis = { type: PaginationItemTypes.ELLIPSIS };
-        if (this._currentPage <= 3) {
-            return [
-                ...Array.from({ length: 3 }, (_, i) => ({
-                    type: PaginationItemTypes.PAGE,
-                    index: i + 1,
-                })),
-                ellipsis,
-                { type: PaginationItemTypes.PAGE, index: this._totalPages },
-            ];
-        } else if (this._currentPage >= this._totalPages - 2) {
-            return [
-                { type: PaginationItemTypes.PAGE, index: 1 },
-                ellipsis,
-                { type: PaginationItemTypes.PAGE, index: this._totalPages - 2 },
-                { type: PaginationItemTypes.PAGE, index: this._totalPages - 1 },
-                { type: PaginationItemTypes.PAGE, index: this._totalPages },
-            ];
-        } else {
-            return [
-                { type: PaginationItemTypes.PAGE, index: 1 },
-                ellipsis,
-                {
-                    type: PaginationItemTypes.PAGE,
-                    index: this._currentPage - 1,
-                },
-                { type: PaginationItemTypes.PAGE, index: this._currentPage },
-                {
-                    type: PaginationItemTypes.PAGE,
-                    index: this._currentPage + 1,
-                },
-                ellipsis,
-                { type: PaginationItemTypes.PAGE, index: this._totalPages },
-            ];
-        }
+  getAllPages () {
+    return [
+      ...Array.from({ length: this._totalPages }, (_, i) => ({
+        type: PaginationItemTypes.PAGE,
+        index: i + 1,
+      })),
+    ];
+  }
+
+  getDynamicPages () {
+    const ellipsis = { type: PaginationItemTypes.ELLIPSIS };
+    if (this._currentPage <= 3) {
+      return [
+        ...Array.from({ length: 3 }, (_, i) => ({
+          type: PaginationItemTypes.PAGE,
+          index: i + 1,
+        })),
+        ellipsis,
+        { type: PaginationItemTypes.PAGE, index: this._totalPages },
+      ];
+    } else if (this._currentPage >= this._totalPages - 2) {
+      return [
+        { type: PaginationItemTypes.PAGE, index: 1 },
+        ellipsis,
+        { type: PaginationItemTypes.PAGE, index: this._totalPages - 2 },
+        { type: PaginationItemTypes.PAGE, index: this._totalPages - 1 },
+        { type: PaginationItemTypes.PAGE, index: this._totalPages },
+      ];
+    } else {
+      return [
+        { type: PaginationItemTypes.PAGE, index: 1 },
+        ellipsis,
+        {
+          type: PaginationItemTypes.PAGE,
+          index: this._currentPage - 1,
+        },
+        { type: PaginationItemTypes.PAGE, index: this._currentPage },
+        {
+          type: PaginationItemTypes.PAGE,
+          index: this._currentPage + 1,
+        },
+        ellipsis,
+        { type: PaginationItemTypes.PAGE, index: this._totalPages },
+      ];
     }
+  }
 
-    render() {
-        return `<ul class="fr-pagination__list">
-            ${this._items.map((item) => item.render()).join('')}
-        </ul>`;
+  setPageTitle () {
+    if (this._totalPages > 0) {
+      document.title = `${document.title} - ${window.resource.pagination.page} ${this._currentPage} ${window.resource.pagination.on} ${this._totalPages}`;
     }
+  }
+
+  render () {
+    return `<ul class="fr-pagination__list">
+        ${this._items.map(item => item.render()).join('')}
+    </ul>`;
+  }
 }
 
 export { PaginationList };

package/src/script/main/elements/search-bar/index.js

@@ -7,17 +7,21 @@ class SearchBar extends Element {
     this._searchInput = this.element.querySelector('#search-input');
     this._searchButton = this.element.querySelector('#search-button');
     this._query = this._searchInput.value;
+    this._url = this._searchButton.getAttribute('data-href');
   }
 
   async init () {
-    this._url = this._searchButton.getAttribute('data-href');
-
     this._resultsDropdown = new ResultsDropdown(this._url);
-    this.element.appendChild(this._resultsDropdown.element);
+    this._searchInput.after(this._resultsDropdown.element);
     await this._resultsDropdown.init();
 
     document.addEventListener('click', this.handleDocumentClick.bind(this));
 
+    this._searchButton.addEventListener(
+      'click',
+      this.handleButtonClick.bind(this)
+    );
+
     this._searchInput.addEventListener(
       'focus',
       this.handleInputFocus.bind(this)
@@ -37,10 +41,14 @@ class SearchBar extends Element {
 
   update (query) {
     this._query = query;
-    this._searchButton.setAttribute('href', `${this._url}?query=${query}`);
     this._resultsDropdown.update(query);
   }
 
+  handleButtonClick (event) {
+    event.preventDefault();
+    document.location.href = `${this._url}?query=${this._query}`;
+  }
+
   handleDocumentClick (event) {
     const outsideClick = !this.element.contains(event.target);
     if (outsideClick) {
@@ -50,7 +58,9 @@ class SearchBar extends Element {
 
   handleKeyup (event) {
     if (event.key === 'Enter') {
-      document.location.href = this._searchButton.getAttribute('href');
+      this.handleButtonClick(event);
+    } else if (event.key === 'Escape') {
+      this._resultsDropdown.reset();
     } else {
       this.update(event.target.value);
     }

package/src/script/main/elements/search-bar/results/results-button.js

@@ -13,7 +13,7 @@ class ResultsButton {
   }
 
   render () {
-    return `<a class="fr-btn fr-btn--secondary fr-mt-2v" href="${this._url}?query=${this._query}" id="search-button">${window.resource?.search?.results?.button}</a>`;
+    return `<button id="results-dropdown-button" class="fr-btn fr-btn--secondary fr-mt-2v" onclick="document.location.href='${this._url}?query=${this._query}';">${window.resource?.search?.results?.button}</button>`;
   }
 }
 

package/src/script/main/elements/search-bar/results/results-dropdown.js

@@ -7,6 +7,7 @@ class ResultsDropdown extends Element {
     constructor(url) {
         const element = document.createElement('div');
         element.classList.add('dsfr-doc-search-results--dropdown');
+        element.setAttribute('aria-live', 'polite');
         super(element);
 
         this._button = new ResultsButton(url);

package/src/script/main/elements/storybook.js

@@ -6,7 +6,6 @@ class Storybook extends Element {
   }
 
   init() {
-    this.isResized = false;
     this.setIframeTheme();
     this.listenChangeDisplay();
     window.addEventListener('message', this.handleMessage.bind(this));
@@ -18,10 +17,8 @@ class Storybook extends Element {
 
     if (eventType === 'storyRendered') {
       this._iframeDoc = this.iframe.contentDocument;
-      if (!this._iframeDoc || this.isResized) return;
-
+      if (!this._iframeDoc) return;
       this.resize();
-      this.isResized = true;
     }
   }
 

package/src/script/search/elements/search-page.js

@@ -28,6 +28,7 @@ class SearchPage extends Element {
             const resultsList = new ResultsList(results, RESULTS_PER_PAGES);
 
             this._resultsCount.innerHTML = count.render();
+            document.title = `${document.title} - ${count.render()}`;
 
             this._container.appendChild(resultsList.element);
             resultsList.init();

package/src/style/home/_community.scss

@@ -1,31 +1,19 @@
 .dsfr-doc-hp-community {
   padding: 2rem 0 3.25rem;
 
-  &__container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  &__img {
-    margin-bottom: 2rem;
-    width: 100%;
-
+  &[dsfr-doc-in-view='true'] {
     img,
     svg {
-      display: flex;
-      border: 1px solid var(--border-default-grey);
-
       #cursor-1 {
-        animation: cursor1 3.2s ease-out infinite;
+        animation: cursor1 3.2s ease-out 1;
       }
 
       #cursor-2 {
-        animation: cursor2 3.2s ease-out infinite;
+        animation: cursor2 3.2s ease-out 1;
       }
 
       #cursor-3 {
-        animation: cursor3 3.2s ease-out infinite;
+        animation: cursor3 3.2s ease-out 1;
       }
 
       @media (prefers-reduced-motion: reduce) {
@@ -36,6 +24,23 @@
         }
       }
     }
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &__img {
+    margin-bottom: 2rem;
+    width: 100%;
+
+    img,
+    svg {
+      display: flex;
+      border: 1px solid var(--border-default-grey);
+    }
 
     &--dark {
       display: none;
@@ -174,7 +179,6 @@
   }
 }
 
-
 @keyframes cursor3 {
   0% {
     transform: translate(50, 106);
@@ -211,7 +215,6 @@
   }
 }
 
-
 [data-fr-theme='dark'] {
   .dsfr-doc-hp-community .dsfr-doc-hp-community__img--dark {
     display: block;
@@ -220,4 +223,4 @@
   .dsfr-doc-hp-community .dsfr-doc-hp-community__img--light {
     display: none;
   }
-}
+}

package/src/style/home/_showcase.scss

@@ -12,6 +12,8 @@
     gap: 2.5rem;
     flex-wrap: wrap;
     margin: 4rem 0;
+    list-style: none;
+    padding: 0;
   }
 
   &__link {
@@ -23,6 +25,7 @@
 
   &-card {
     width: 100%;
+    padding: 0;
 
     &__img {
       display: flex;

package/src/style/main/components/_dsfr-doc-code-snippet.scss

@@ -1,9 +1,10 @@
 .code-snippet {
   position: relative;
+  margin-top: 2.5rem;
 
   &--copy {
     position: absolute;
-    bottom: 0.5rem;
-    right: 0.5rem;
+    top: calc(1px - 2rem);
+    right: 0;
   }
 }

package/src/style/main/components/_dsfr-doc-edit.scss

@@ -0,0 +1,34 @@
+.dsfr-doc-edit {
+  margin-top: 2rem;
+  margin-bottom: 3rem;
+  margin-right: -1rem;
+  margin-left: -1rem;
+  padding: 2rem 1.5rem 1.25rem 3.375rem;
+  position: relative;
+
+  &::before {
+    --icon-size: 1.125rem;
+    position: absolute;
+    top: 2.25rem;
+    left: 1.5rem;
+  }
+
+  &__title,
+  &__description,
+  &__link {
+    margin-bottom: 0.75rem;
+  }
+
+  @media (min-width: 36em) {
+    margin-right: 0;
+    margin-left: 0;
+    padding: 2.5rem 2rem 1.75rem 3.875rem;
+
+    &::before {
+      --icon-size: 1.25rem;
+      top: 2.75rem;
+      left: 2rem;
+    }
+  }
+}
+

package/src/style/main/components/_dsfr-doc-tab-navigation.scss

@@ -30,7 +30,7 @@
         background-size: 100% 1px;
         background-position: 0 100%;
 
-        &[aria-selected='true'] {
+        &[aria-current='page'] {
             display: none;
             color: var(--text-active-blue-france);
         }
@@ -71,7 +71,7 @@
             background-size: 100% 2px;
             background-position: 0 100%;
 
-            &:hover:not([aria-selected='true']) {
+            &:hover:not([aria-current='page']) {
                 background-color: var(
                     --background-default-grey-hover
                 ) !important;
@@ -84,7 +84,7 @@
                 background-position: 0 100%;
             }
 
-            &[aria-selected='true'] {
+            &[aria-current='page'] {
                 display: block;
                 background-image: linear-gradient(
                     0deg,

package/src/style/main/components/_dsfr-doc-version.scss

@@ -68,9 +68,10 @@
   white-space: nowrap;
 }
 
-.dsfr-doc-version__version[aria-current]:not([aria-current=false]) {
-  display: none;
-}
+// Hide the current version in the mobile menu while there is only one version available
+// .dsfr-doc-version__version[aria-current]:not([aria-current=false]) {
+//   display: none;
+// }
 
 .dsfr-doc-version__menu {
   margin: 0;

package/src/style/main/components/_index.scss

@@ -6,3 +6,4 @@
 @use 'dsfr-doc-anatomy';
 @use 'dsfr-doc-searchbar';
 @use 'dsfr-doc-pagination';
+@use 'dsfr-doc-edit';