Update dsfr

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Fix display temporal coverage on dataset page [#261](https://github.com/etalab/udata-front/pull/261)
 - Fix tooltip accessibility [#259](https://github.com/etalab/udata-front/pull/259)
 - Fix [dependabot/17](https://github.com/etalab/udata-front/security/dependabot/17) and [dependabot/18](https://github.com/etalab/udata-front/security/dependabot/18) [#264](https://github.com/etalab/udata-front/pull/264). These aren't udata-front vulnerabilities but only impact vite dev server (unused in `gouvfr` theme).
+- Update DSFR to 1.9 [#249](https://github.com/etalab/udata-front/pull/249)
 
 ## 3.2.3 (2023-05-16)
 

package.json

@@ -26,7 +26,7 @@
     "@conciergerie.dev/select-a11y": "^3.1.0",
     "@conciergerie.dev/vue-toaster": "^2.4.0",
     "@etalab/udata-front-plugins-helper": "1.1.0",
-    "@gouvfr/dsfr": "^1.5.1",
+    "@gouvfr/dsfr": "^1.9.2",
     "@intlify/unplugin-vue-i18n": "^0.8.0",
     "@lhci/cli": "^0.10.0",
     "@sentry/tracing": "^6.10.0",

udata_front/frontend/helpers.py

@@ -17,7 +17,7 @@
 from udata.core.dataset.apiv2 import dataset_fields
 from udata.core.dataset.models import Dataset
 from udata.models import db
-from udata.i18n import format_date, format_timedelta, _, pgettext
+from udata.i18n import get_locale, format_date, format_timedelta, _, pgettext
 from udata.search.result import SearchResult
 from udata.utils import camel_to_lodash
 from udata_front.theme import theme_static_with_version
@@ -364,14 +364,9 @@ def i18n_alternate_links():
         LINK_PATTERN = (
             '<link rel="alternate" href="{url}" hreflang="{lang}" />')
         links = []
-        params = {}
-        if request.args:
-            params.update(request.args)
-        if request.view_args:
-            params.update(request.view_args)
 
         for lang in current_app.config['LANGUAGES']:
-            url = url_for(request.endpoint, lang_code=lang, **params, _external=True)
+            url = language_url(lang)
             links.append(LINK_PATTERN.format(url=url, lang=lang))
         return Markup(''.join(links))
     except Exception:
@@ -445,3 +440,32 @@ def visibles(value):
 @front.app_template_global()
 def selected(current_value, value):
     return 'selected' if current_value == value else ''
+
+
+@front.app_template_global()
+def current_language_name():
+    '''Get the name of the current locale.'''
+    locale = get_locale()
+    for code, name in current_app.config['LANGUAGES'].items():
+        if locale == code:
+            return name
+
+
+@front.app_template_global()
+def language_url(lang_code):
+    '''Create an URL for the current endpoint and the given language code'''
+    params = {}
+    endpoint = request.endpoint
+    if request.args:
+        params.update(request.args)
+    if request.view_args:
+        params.update(request.view_args)
+    if (not request.endpoint or
+            not current_app.url_map.is_endpoint_expecting(request.endpoint,
+                                                          'lang_code')):
+        endpoint = "site.home"
+    try:
+        return url_for(endpoint, lang_code=lang_code, **params, _external=True)
+    except Exception:
+        # Never fails
+        return url_for("site.home", lang_code=lang_code, **params, _external=True)

udata_front/theme/gouvfr/assets/js/components/search/search.vue

@@ -9,11 +9,11 @@
     </div>
     <div class="fr-grid-row fr-mt-1w fr-mt-md-5v">
       <div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
-        <nav class="fr-sidemenu" :aria-label="$t('Filter results')">
+        <nav class="fr-sidemenu" aria-labelledby="fr-sidemenu-title">
           <div class="fr-sidemenu__inner">
             <button class="fr-sidemenu__btn fr-mt-1w" hidden aria-controls="fr-sidemenu-wrapper" aria-expanded="false">{{$t('Filter results')}}</button>
             <div class="fr-collapse" id="fr-sidemenu-wrapper">
-              <div class="fr-sidemenu__title fr-mb-3v">{{$t('Filters')}}</div>
+              <div class="fr-sidemenu__title fr-mb-3v" id="fr-sidemenu-title">{{$t('Filters')}}</div>
               <div class="fr-grid-row fr-grid-row--gutters">
                 <div class="fr-col-12" v-if="!organization">
                   <MultiSelect

udata_front/theme/gouvfr/assets/less/components/badge.less

@@ -17,10 +17,13 @@ Additionally, it also allows regular-non-awarded people to quickly identify publ
 @import (less) "@gouvfr/dsfr/dist/component/badge/badge.css";
 
 .fr-badge {
+    & > [class^="fr-icon-"]::before,
+    & > [class*=" fr-icon-"]::before {
+        display: inline-flex;
+        &:extend(.fr-icon--sm::before);
+    }
     & > [class^="fr-icon-"],
     & > [class*=" fr-icon-"] {
-        display: inline-flex;
-        .fr-icon--sm;
         .fr-mr-1v;
     }
 }

udata_front/theme/gouvfr/assets/less/components/forms.less

@@ -92,7 +92,6 @@ form.form {
 .fr-toggle {
     --border-action-high-blue-france: @blue-400;
     >input[type="checkbox"] {
-        z-index: 200;
         &:checked {
             --background-active-blue-france: @blue-400;
             --background-active-blue-france-hover: @blue-400-hover;
@@ -111,17 +110,3 @@ form.form {
         }
     }
 }
-
-// define custom fr-hr-or, not available in current DSFR version
-.fr-hr-or {
-    width: 100%; 
-    text-align: center; 
-    border-bottom: 1px solid @background-contrast-grey;
-    line-height: 0.1em;
-    margin: 10px 0 20px;
-
-    .fr-hr-or-text {
-        background:#fff; 
-        padding:0 10px; 
-    }
-}

udata_front/theme/gouvfr/assets/less/components/tabs.less

@@ -80,7 +80,7 @@ You can use tabs from DSFR. It uses DSFR colors and conventions. It allows you t
         display: block;
     }
     & > .fr-tabs__panel:not([data-fr-js-tab-panel]) {
-        transform: translate(0%);
+        left: 0;
         &:not(.fr-tabs__panel--selected) {
             visibility: visible;
         }
@@ -101,15 +101,6 @@ You can use tabs from DSFR. It uses DSFR colors and conventions. It allows you t
     &:not(.fr-transition-none) > .fr-tabs__panel:not(.fr-tabs__panel--selected)[data-fr-js-tab-panel] {
         display: none;
     }
-    & > .fr-tabs__panel--direction-start[data-fr-js-tab-panel] {
-        transform: translate(-200%);
-    }
-    & > .fr-tabs__panel--selected[data-fr-js-tab-panel] {
-        transform: translate(-100%);
-    }
-    & > .fr-tabs__panel--direction-end[data-fr-js-tab-panel] {
-        transform: translate(0%);
-    }
     &::after {
         box-shadow: none;
         .border-top;

udata_front/theme/gouvfr/assets/less/components/tags.less

@@ -36,9 +36,11 @@ a.fr-tag, button.fr-tag {
     --background-action-high-blue-france-active: @blue-400-active;
 
     &[aria-pressed="true"] {
+        &:extend(button.fr-tag[aria-pressed=true]:not(:disabled));
         --background-action-high-blue-france: @blue-400;
         --background-action-high-blue-france-hover: @blue-400-hover;
         &::after {
+            &:extend(button.fr-tag[aria-pressed=true]::after);
             --text-action-high-blue-france: @blue-400;
         }
     }

udata_front/theme/gouvfr/assets/less/components/well.less

@@ -22,6 +22,7 @@ They exist in many colors and two versions, primary with a solid background and
 ```
 */
 @import (less) "@gouvfr/dsfr/dist/component/alert/alert.css";
+@import (less) "@gouvfr/dsfr/dist/component/notice/notice.css";
 
 .fr-alert p {
     margin: var(--text-spacing);
@@ -50,46 +51,6 @@ html[data-fr-js] [data-show-no-js], html[data-fr-js=true] [data-show-no-js] {
     }
 }
 
-/*
-    TODO : remove when dsfr >= 1.6
-*/
-.fr-notice {
-    position: relative;
-
-    --title-spacing: 0;
-    --text-spacing: 0;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-    background-color: var(--background-contrast-grey);
-    color: var(--text-title-grey);
-}
-
-.fr-notice__body {
-    position: relative;
-    padding: 0 2.5rem 0 2.5rem;
-}
-
-.fr-notice__body::before {
-    --icon-size: 1.5rem;
-    flex: 0 0 auto;
-    display: inline-block;
-    vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
-    background-color: currentColor;
-    width: var(--icon-size);
-    height: var(--icon-size);
-    -webkit-mask-size: 100% 100%;
-    mask-size: 100% 100%;
-    position: absolute;
-    left: 0;
-}
-
-.fr-notice__title {
-    position: relative;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    font-weight: 700;
-}
-
 .fr-notice--warning .fr-notice__body {
     &:extend(.fr-icon-warning-line);
     &:extend([class^="fr-icon-"]);

udata_front/theme/gouvfr/assets/less/content/links.less

@@ -139,8 +139,9 @@ a {
 }
 
 .fr-enlarge-link .not-enlarged a {
+    background-image: var(--underline-img),var(--underline-img);
     &:hover {
-        background-image: var(--underline-img), var(--underline-img) !important;
+        &:extend([href]);
     }
     &::before {
         background: none;

udata_front/theme/gouvfr/assets/less/override.less

@@ -18,6 +18,21 @@ html {
     overflow-wrap: break-word;
 }
 
+:where(nav li):before {
+    content: "";
+    float: none;
+}
+
+:where(code, kbd, samp) {
+    font-family:
+        ui-monospace,
+        "Cascadia Mono", "Segoe UI Mono",
+        "Ubuntu Mono",
+        "Roboto Mono",
+        Menlo, Monaco, Consolas,
+        monospace;
+}
+
 // end of Sanitize.css overrides
 
 ul {
@@ -42,13 +57,3 @@ a:not([href]) {
     --li-bottom: 0;
     --text-spacing: 1em 0;
 }
-
-:where(code, kbd, samp) {
-    font-family:
-        ui-monospace,
-        "Cascadia Mono", "Segoe UI Mono",
-        "Ubuntu Mono",
-        "Roboto Mono",
-        Menlo, Monaco, Consolas,
-        monospace;
-}

udata_front/theme/gouvfr/assets/less/specific/footer.less

@@ -1,5 +1,9 @@
 @import (less) "@gouvfr/dsfr/dist/component/footer/footer.css";
 
+.fr-footer {
+    --border-plain-blue-france: @blue-400;
+}
+
 .fr-footer__top-link {
     &:extend(a.unstyled);
 }

udata_front/theme/gouvfr/assets/less/specific/translate.less

@@ -0,0 +1,8 @@
+@import (less) "@gouvfr/dsfr/dist/component/translate/translate.css";
+
+.fr-translate .fr-translate__btn[aria-expanded=true] {
+    --text-active-blue-france: @blue-400;
+    --background-open-blue-france: @background-action-low-blue-cumulus;
+    --background-open-blue-france-hover: @background-action-low-blue-cumulus-hover;
+    --background-open-blue-france-active: @background-action-low-blue-cumulus-active;
+}

udata_front/theme/gouvfr/assets/less/style.less

@@ -67,6 +67,7 @@
 @import "./specific/oauth.less";
 @import "./specific/oembed.less";
 @import "./specific/search.less";
+@import "./specific/translate.less";
 
 // Override some stuff not sanitized or coming from DSFR
 @import "./override.less";

udata_front/theme/gouvfr/templates/footer.html

@@ -117,7 +117,7 @@ <h3 class="fr-footer__top-cat">{{ _('Social networks') }}</h3>
         <div class="fr-container">
             <div class="fr-footer__body">
                 <div class="fr-footer__brand fr-enlarge-link">
-                    <a href="/" title="Retour à l’accueil">
+                    <a href="/" title="{{_('Go back to website home')}}">
                         <p class="fr-logo" title="république française">
                             république
                             <br>française
@@ -134,23 +134,35 @@ <h3 class="fr-footer__top-cat">{{ _('Social networks') }}</h3>
                     </ul>
                 </div>
                 <div class="fr-col-6 fr-col-sm-4 fr-col-md-3 fr-col-lg-2 fr-ml-auto self-end">
-                    <select
-                            aria-label="{{ _('Language selector') }}"
-                            class="fr-select"
-                            onchange="location = location.href.replace(new RegExp('\/\\w{2}\/'), '/' + this.value + '/', regex=true)"
-                        >
-                            {% for code, name in config['LANGUAGES'].items() %}
-                                {% if g.lang_code == code %}
-                                <option value={{code}} selected>
-                                    {{name}}
-                                </option>
-                                {% else %}
-                                <option value={{code}}>
-                                    {{name}}
-                                </option>
-                                {% endif %}
-                            {% endfor %}
-                        </select>
+                    <nav role="navigation" class="fr-translate fr-nav">
+                        <div class="fr-nav__item">
+                            <button
+                                class="fr-translate__btn fr-btn fr-btn--tertiary"
+                                aria-controls="translate-in-footer"
+                                aria-expanded="false"
+                                title="{{ _('Select a Language') }}"
+                            >
+                                {{g.lang_code|upper}} - {{current_language_name()}}
+                            </button>
+                            <div class="fr-collapse fr-translate__menu fr-menu" id="translate-in-footer">
+                                <ul class="fr-menu__list">
+                                {% for code, name in config['LANGUAGES'].items() %}
+                                    <li>
+                                        <a
+                                            class="fr-translate__language fr-nav__link"
+                                            hreflang="{{code}}"
+                                            lang="{{code}}"
+                                            href="{{language_url(code)}}"
+                                            {% if g.lang_code == code %}aria-current="true"{% endif %}
+                                        >
+                                            {{code|upper}} - {{name}}
+                                        </a>
+                                    </li>
+                                {% endfor %}
+                                </ul>
+                            </div>
+                        </div>
+                    </nav>
                 </div>
             </div>
             <div class="fr-footer__bottom">