fix: fix dsfr des champs géré via AutoCompleteAccessible (#1481)

gip-inclusion · Oct 31, 2024 · 6107675 · 6107675
1 parent b823940
commit 6107675
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 35 deletions.
diff --git a/lemarche/static/itou_marche/itou_marche.scss b/lemarche/static/itou_marche/itou_marche.scss
@@ -151,7 +151,6 @@ ul.summary-grid-list {
 }
 
 .cmsfr-background-dark {
-
     & h1,
     h2,
     h3,
@@ -164,7 +163,7 @@ ul.summary-grid-list {
 }
 
 .fr-header__service-title em {
-    font-weight: lighter
+    font-weight: lighter;
 }
 
 .cmsfr-author_card__header {
@@ -181,4 +180,27 @@ ul.summary-grid-list {
 
 .fr-content-media {
     margin: 0;
-}
+}
+
+.autocomplete__input,
+.autocomplete__input--default {
+    --idle: transparent;
+    --hover: var(--background-contrast-grey-hover);
+    --active: var(--background-contrast-grey-active);
+    background-color: var(--background-contrast-grey);
+    border-radius: 0.25rem 0.25rem 0 0;
+    box-shadow: inset 0 -2px 0 0 var(--border-plain-grey);
+    color: var(--text-default-grey);
+    display: block;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    padding: 0.5rem 1rem;
+    width: 100%;
+    border: 0;
+}
+.autocomplete__menu {
+    /* Style DSFR pour le menu */
+    border: 1px solid #000091;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 8px;
+}
diff --git a/lemarche/static/js/perimeter_autocomplete_field.js b/lemarche/static/js/perimeter_autocomplete_field.js
@@ -36,20 +36,20 @@ async function fetchSource(query, kind = undefined) {
 }
 
 class PerimeterAutocomplete {
-  constructor(perimeter_container_name, perimeter_input_id, perimeter_placeholder='Région, ville…', perimeter_kind = undefined) {
-    this.perimeter_container_name= perimeter_container_name;
-    this.perimeter_input_id= perimeter_input_id;
-    this.perimeter_kind= perimeter_kind;
-    this.perimeter_placeholder= perimeter_placeholder;
-    this.perimeter_name_input_id= `${this.perimeter_input_id}_name`;
+  constructor(perimeter_container_name, perimeter_input_id, perimeter_placeholder = 'Région, ville…', perimeter_kind = undefined) {
+    this.perimeter_container_name = perimeter_container_name;
+    this.perimeter_input_id = perimeter_input_id;
+    this.perimeter_kind = perimeter_kind;
+    this.perimeter_placeholder = perimeter_placeholder;
+    this.perimeter_name_input_id = `${this.perimeter_input_id}_name`;
     this.perimeterAutocompleteContainer = document.getElementById(perimeter_container_name);
     this.perimeterInput = document.getElementById(perimeter_input_id);  // hidden
     this.initial_value_name = this.perimeterAutocompleteContainer.dataset.inputValue;
     this.isInit = false;
   }
 
   init() {
-    if(!this.isInit) {
+    if (!this.isInit) {
       this.isInit = true;
       accessibleAutocomplete({
         element: this.perimeterAutocompleteContainer,
@@ -98,7 +98,7 @@ class PerimeterAutocomplete {
 
   inputValue(result) {
     // strip html from suggestion
-    if(!result) {
+    if (!result) {
       return result;
     }
     let resultName, resultKind = '';
@@ -137,12 +137,12 @@ class PerimeterAutocomplete {
   }
 
   cleanPerimeter() {
-    this.perimeterInputName.value ='';
-    this.perimeterInput.value ='';
+    this.perimeterInputName.value = '';
+    this.perimeterInput.value = '';
   }
 
-  disablePerimeter(disable_it=true) {
-    if(disable_it){
+  disablePerimeter(disable_it = true) {
+    if (disable_it) {
       this.cleanPerimeter();
       this.perimeterInput.setAttribute('disabled', true);
       this.perimeterInputName.setAttribute('disabled', true);
@@ -155,11 +155,11 @@ class PerimeterAutocomplete {
 
 class PerimetersMultiAutocomplete {
   constructor(
-    perimeter_autocomplete_id='id_perimeters',
-    perimeter_autocomplete_container_selector='#dir_form_perimeters',
-    perimeter_selected_container_selector='#perimeters-selected',
-    perimeter_hidden_input_selector_prefix='hiddenPerimeter',
-    perimeter_current_id='current-perimeters') {
+    perimeter_autocomplete_id = 'id_perimeters',
+    perimeter_autocomplete_container_selector = '#dir_form_perimeters',
+    perimeter_selected_container_selector = '#perimeters-selected',
+    perimeter_hidden_input_selector_prefix = 'hiddenPerimeter',
+    perimeter_current_id = 'current-perimeters') {
     this.perimeter_autocomplete_id = perimeter_autocomplete_id;
     this.perimeter_autocomplete_container_selector = perimeter_autocomplete_container_selector;
     this.perimeter_autocomplete_container = document.querySelector(this.perimeter_autocomplete_container_selector);
@@ -173,9 +173,8 @@ class PerimetersMultiAutocomplete {
   }
 
   init() {
-    if(!this.isInit) {
+    if (!this.isInit) {
       this.isInit = true;
-
       accessibleAutocomplete({
         element: this.perimeter_autocomplete_container,
         id: this.perimeter_autocomplete_id,
@@ -185,6 +184,8 @@ class PerimetersMultiAutocomplete {
         defaultValue: "",
         source: debounce(this.getSource, 300),
         displayMenu: 'overlay',
+        inputClasses: 'fr-input',
+        menuClasses: 'fr-menu',
         templates: {
           inputValue: this.inputValue,  // returns the string value to be inserted into the input
           suggestion: this.suggestion,  // used when rendering suggestions, and should return a string, which can contain HTML
@@ -278,18 +279,18 @@ class PerimetersMultiAutocomplete {
     let removeIcon = $('<span>', { class: "fr-icon-close-line", "aria-hidden": true });
     let resultIdString = `${this.perimeter_hidden_input_selector_prefix}-${resultId}`;
     $('<input>', {
-        type: 'hidden',
-        id: resultIdString,
-        name: this.perimeter_autocomplete_container_input_name,
-        value: resultId
+      type: 'hidden',
+      id: resultIdString,
+      name: this.perimeter_autocomplete_container_input_name,
+      value: resultId
     }).appendTo(this.perimeter_selected_container);
     let button = $('<button>', {
-        type: 'button',
-        class: "fr-badge fr-mr-1v fr-mb-1v",
-        title: `Retirer ${resultName}`,
-        text: `${resultName}`,
-        'data-refInput': resultIdString,
-        click: this.removeInputOnClick
+      type: 'button',
+      class: "fr-badge fr-mr-1v fr-mb-1v",
+      title: `Retirer ${resultName}`,
+      text: `${resultName}`,
+      'data-refInput': resultIdString,
+      click: this.removeInputOnClick
     });
     removeIcon.appendTo(button);
     button.appendTo(this.perimeter_selected_container);

diff --git a/lemarche/templates/siaes/search_results.html b/lemarche/templates/siaes/search_results.html
@@ -41,8 +41,7 @@
                                     aria-selected="false"
                                     aria-controls="search-semantic">
                                 Recherche par mot clé
-                                <span class="fr-badge fr-badge--sm fr-badge--green-emeraude fr-mx-2v">Beta</span>
-                                <span class="fr-badge fr-badge--sm fr-badge--green-emeraude">Nouveauté</span>
+                                <span class="fr-badge fr-badge--sm fr-mx-2v">Beta</span>
                             </button>
                         </li>
                     </ul>
@@ -64,7 +63,7 @@
                             <div class="fr-grid-row fr-grid-row--gutters">
                                 <div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
                                     <div class="fr-input-group">
-                                        <label for="id_perimeters" class="fr-label">{{ form.perimeters.label }}</label>
+                                        <label for="id_perimeters" class="fr-label fr-mb-2v">{{ form.perimeters.label }}</label>
                                         <div id="dir_form_perimeters" data-input-name="{{ form.perimeters.name }}"></div>
                                         <div id="perimeters-selected" class="fr-mt-2v"></div>
                                         {{ current_perimeters|json_script:"current-perimeters" }}