Address DSFR 1.10 changes

MTES-MCT · Sep 14, 2023 · ee86ca6 · ee86ca6
1 parent e174675
commit ee86ca6
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 16 deletions.
diff --git a/assets/styles/app.scss b/assets/styles/app.scss
@@ -111,7 +111,7 @@ label.required > .fr-x-label-content::after, legend.required > .fr-x-label-conte
 }
 
 .fr-x-background-alt--blue-france {
-    background-color: var(--blue-france-975-75);
+    background-color: var(--background-alt-blue-france);
 }
 
 .fr-x-autocomplete-wrapper {
@@ -300,11 +300,9 @@ li.app-card + li.app-card {
 }
 
 .app-vehicle-image {
+    position: relative;
     display: grid !important;
     place-content: center;
-    /* Without a 'height', DSFR default image separator would not span entire height. This is a problem especially on mobile. */
-    /* We also account for the 2x0.25rem space that DSFR leaves between the image separator and the rich radio top and bottom borders. */
-    height: calc(100% - 0.5rem) !important;
 }
 
 .app-vehicle-image__close {
@@ -314,9 +312,25 @@ li.app-card + li.app-card {
 }
 
 .app-someVehicles__radiogroup > input[type="radio"]:checked + label {
-    box-shadow: none; // Drop the DSFR default, we'll place the borders ourselves.
-    border: 1px solid var(--border-action-high-blue-france);
+    // DSFR uses a background-image trick to place borders AND the custom checkbox.
+    // Copy DSFR default and tweak it to use a grey bottom border.
+    background-image:
+        linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), // border-top
+        linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), // border-right
+        linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), // border-bottom -> We make it grey
+        linear-gradient(0deg, var(--background-action-high-blue-france), var(--background-action-high-blue-france)), // border-left
+        radial-gradient(transparent 6px, var(--background-action-high-blue-france) 7px, transparent 8px), // Checkbox contour
+        radial-gradient(var(--background-action-high-blue-france) 3px, transparent 4px); // Checkbox dot
+}
+
+.app-someVehicles__radiogroup > input[type="radio"]:checked ~ .fr-radio-rich__pictogram {
+    // DSFR uses a background-image trick to place borders.
+    // We want to use grey left and bottom borders. Drop the default and place actual borders ourselves.
+    background-image: none;
+    border-top: 1px solid var(--border-action-high-blue-france);
+    border-right: 1px solid var(--border-action-high-blue-france);
     border-bottom: 1px solid var(--border-default-grey);
+    border-left: 1px solid var(--border-default-grey);
 }
 
 .app-someVehicles__form {

diff --git a/public/images/restriction/all_vehicles.no.svg b/public/images/restriction/all_vehicles.no.svg
diff --git a/public/images/restriction/all_vehicles.yes.svg b/public/images/restriction/all_vehicles.yes.svg
diff --git a/templates/common/form/dsfr_theme.html.twig b/templates/common/form/dsfr_theme.html.twig
@@ -97,7 +97,7 @@ https://github.com/symfony/symfony/blob/6.3/src/Symfony/Bridge/Twig/Resources/vi
 
 {% block form_errors %}
   {% if errors|length > 0 %}
-    <div class="fr-messages-group" id="{{ id }}_error" aria-live="assertive">
+    <div class="fr-messages-group" id="{{ id }}_error" aria-live="polite">
       {%- for error in errors -%}
         <p class="fr-message fr-message--error">
           {{ error.message }}

diff --git a/templates/index.html.twig b/templates/index.html.twig
@@ -23,7 +23,7 @@
             </div>
         </div>
     </section>
-    <section class="how-it-works fr-x-background-alt--blue-france" aria-labelledby="how-it-works">
+    <section class="how-it-works fr-background-alt-blue-france" aria-labelledby="how-it-works">
         <div class="fr-container fr-py-4w">
             <h2 id="how-it-works">{{ 'landing.for-who.title'|trans }}</h2>
             <div class="fr-grid-row fr-grid-row--gutters fr-grid-row">

diff --git a/templates/login.html.twig b/templates/login.html.twig
@@ -43,7 +43,7 @@
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div id="credentials-message" class="fr-messages-group" aria-live="assertive">
+                                                <div id="credentials-message" class="fr-messages-group" aria-live="polite">
                                                     {% if error %}
                                                         <p class="fr-message fr-message--error">
                                                             {{ error.messageKey|trans(error.messageData, 'security') }}

diff --git a/templates/regulation/_vehicle_set_form.html.twig b/templates/regulation/_vehicle_set_form.html.twig
@@ -27,9 +27,11 @@
                     },
                 }) }}
                 {{ form_label(option, null, { help: (option.vars.label ~ '.help')|trans }) }}
-                <div class="fr-radio-rich__img app-vehicle-image">
-                    <img src="{{ asset('images/restriction/all_vehicles.' ~ option.vars.value ~ '.svg') }}" alt=""  />
-                    <img class="app-vehicle-image__close" src="{{ asset('images/restriction/close.svg') }}" alt="" />
+                <div class="fr-radio-rich__pictogram app-vehicle-image">
+                    <svg class="fr-artwork" aria-hidden="true" viewBox="0 0 26 26" width="26px" height="26px">
+                        <use class="fr-artwork-major" xlink:href="{{ asset('images/restriction/all_vehicles.' ~ option.vars.value ~ '.svg') }}#artwork-major"></use>
+                    </svg>
+                    <img class="app-vehicle-image__close" aria-hidden="true" src="{{ asset('images/restriction/close.svg') }}" />
                 </div>
             </div>
         </div>