(PC-33975)[PRO] feat: Replace adage multiselect placeholderw with ind…

pro/src/pages/AdageIframe/app/components/OffersInstantSearch/OffersSearch/OfferFilters/OfferFilters.tsx

@@ -273,9 +273,9 @@ export const OfferFilters = ({
                     title="Choisir un département"
                   >
                     <AdageMultiselect
-                      placeholder="Ex: 59 ou Hauts-de-France"
+                      indication="Par exemple : 59 ou Hauts-de-France"
                       name="departments"
-                      label="Départements"
+                      label="Rechercher un département"
                       options={departmentOptions}
                       isOpen={modalOpenStatus['localisation']}
                     />
@@ -291,9 +291,9 @@ export const OfferFilters = ({
                     title="Choisir une académie"
                   >
                     <AdageMultiselect
-                      placeholder="Ex: Nantes"
+                      indication="Par exemple : Nantes"
                       name="academies"
-                      label="Académies"
+                      label="Rechercher une académie"
                       options={academiesOptions}
                       isOpen={modalOpenStatus['localisation']}
                     />
@@ -336,9 +336,9 @@ export const OfferFilters = ({
                   title="Choisir un domaine artistique"
                 >
                   <AdageMultiselect
-                    placeholder="Ex: Cinéma"
+                    indication="Par exemple : Cinéma"
                     name="domains"
-                    label="Domaine artistique"
+                    label="Rechercher un domaine artistique"
                     options={domainsOptions}
                     isOpen={modalOpenStatus['domains']}
                   />
@@ -360,9 +360,9 @@ export const OfferFilters = ({
                   title="Choisir un format"
                 >
                   <AdageMultiselect
-                    placeholder="Ex: Représentation"
+                    indication="Par exemple : Représentation"
                     name="formats"
-                    label="Format"
+                    label="Rechercher un format"
                     options={formatsOptions}
                     isOpen={modalOpenStatus['formats']}
                   />
@@ -381,12 +381,12 @@ export const OfferFilters = ({
                 <ModalFilterLayout
                   onClean={() => onReset('students', [])}
                   onSearch={() => onSearch('students')}
-                  title="Pour quel niveau scolaire ?"
+                  title="Choisir un niveau scolaire"
                 >
                   <AdageMultiselect
-                    placeholder="Ex: Collège"
+                    indication="Par exemple : Collège"
                     name="students"
-                    label="Niveau scolaire"
+                    label="Rechercher un niveau scolaire"
                     options={studentsOptionsFiltered}
                     isOpen={modalOpenStatus['students']}
                     sortOptions={(options, selectedOptions) => {

pro/src/pages/AdageIframe/app/components/OffersInstantSearch/OffersSearch/OfferFilters/__specs__/OfferFilters.spec.tsx

@@ -189,13 +189,13 @@ describe('OfferFilters', () => {
     renderOfferFilters(initialValues, LocalisationFilterStates.DEPARTMENTS)
 
     expect(
-      screen.getByPlaceholderText('Ex: 59 ou Hauts-de-France')
+      screen.getByText('Par exemple : 59 ou Hauts-de-France')
     ).toBeInTheDocument()
   })
   it('should display academies options in localisation filter modal', () => {
     renderOfferFilters(initialValues, LocalisationFilterStates.ACADEMIES)
 
-    expect(screen.getByPlaceholderText('Ex: Nantes')).toBeInTheDocument()
+    expect(screen.getByText('Par exemple : Nantes')).toBeInTheDocument()
   })
 
   it('should display radius range input in localisation filter modal', () => {

pro/src/pages/AdageIframe/app/components/OffersInstantSearch/OffersSearch/__spec__/OffersSearch.spec.tsx

@@ -257,7 +257,7 @@ describe('offersSearch component', () => {
 
     // Then
     expect(
-      screen.getByPlaceholderText('Ex: 59 ou Hauts-de-France')
+      screen.getByText('Par exemple : 59 ou Hauts-de-France')
     ).toBeInTheDocument()
   })
 
@@ -288,7 +288,7 @@ describe('offersSearch component', () => {
     )
 
     // Then
-    expect(screen.getByPlaceholderText('Ex: Nantes')).toBeInTheDocument()
+    expect(screen.getByText('Par exemple : Nantes')).toBeInTheDocument()
   })
 
   it('should display radius input filter if user has selected around me filter', async () => {

pro/src/ui-kit/form/AdageMultiselect/AdageMultiselect.module.scss

@@ -6,7 +6,6 @@
 .container {
   display: flex;
   flex-direction: column;
-  gap: rem.torem(18px);
   height: rem.torem(250px);
 }
 
@@ -17,17 +16,13 @@
   max-height: rem.torem(400px);
   overflow-y: scroll;
   padding: rem.torem(8px) 0 0 rem.torem(8px);
+  margin-top: rem.torem(18px);
 
   li:last-child {
     margin-bottom: rem.torem(20px);
   }
 }
 
-.search-input {
-  @include forms.input-theme;
-  @include forms.input-theme-nested;
-}
-
 input[type="search"]::-webkit-search-cancel-button {
   appearance: none;
   width: rem.torem(20px);
@@ -43,3 +38,9 @@ input[type="search"]::-webkit-search-cancel-button {
 .visually-hidden {
   @include a11y.visually-hidden;
 }
+
+.search-indication {
+  @include fonts.body-xs;
+
+  color: var(--color-grey-dark);
+}

pro/src/ui-kit/form/AdageMultiselect/AdageMultiselect.stories.tsx

@@ -39,7 +39,7 @@ const options = [
 export const Default: StoryObj<typeof AdageMultiselect> = {
   args: {
     options,
-    placeholder: 'Ex: Théâtre',
+    indication: 'Ex: Théâtre',
     name: 'educationalDomains',
     label: 'Rechercher un domaine artistique',
     isOpen: true,

pro/src/ui-kit/form/AdageMultiselect/AdageMultiselect.tsx

@@ -1,7 +1,8 @@
 import { useCombobox } from 'downshift'
 import { useField, useFormikContext } from 'formik'
-import { useEffect, useState } from 'react'
+import { useEffect, useId, useState } from 'react'
 
+import strokeSearch from 'icons/stroke-search.svg'
 import { BaseCheckbox } from 'ui-kit/form/shared/BaseCheckbox/BaseCheckbox'
 
 import { BaseInput } from '../shared/BaseInput/BaseInput'
@@ -15,7 +16,7 @@ export interface ItemProps {
 
 interface AdageMultiselectProps {
   options: ItemProps[]
-  placeholder: string
+  indication: string
   name: string
   label: string
   isOpen: boolean
@@ -74,7 +75,7 @@ const isIncluded = (
 
 export const AdageMultiselect = ({
   options,
-  placeholder,
+  indication,
   name,
   label,
   isOpen,
@@ -86,6 +87,7 @@ export const AdageMultiselect = ({
   const [field] = useField<ItemProps['value'][]>(name)
   const { setFieldValue } = useFormikContext<any>()
   const [sortedOptions, setSortedOptions] = useState<ItemProps[]>([])
+  const indicationId = useId()
 
   const {
     getLabelProps,
@@ -160,11 +162,15 @@ export const AdageMultiselect = ({
         type="search"
         name="search"
         className={styles['search-input']}
-        placeholder={placeholder}
         maxLength={filterMaxLength}
         value={inputValue}
+        aria-describedby={indicationId}
+        leftIcon={strokeSearch}
         {...getInputProps()}
       />
+      <p className={styles['search-indication']} id={indicationId}>
+        {indication}
+      </p>
       <ul
         className={styles['search-list']}
         {...getMenuProps({

pro/src/ui-kit/form/AdageMultiselect/__specs__/AdageMultiselect.spec.tsx

@@ -24,7 +24,7 @@ const renderAdageMultiselect = (
     >
       <AdageMultiselect
         options={customOptions}
-        placeholder="Ex: Théâtre"
+        indication="Ex: Théâtre"
         name="educationalDomains"
         label="Rechercher un domaine artistique"
         isOpen={true}
@@ -37,7 +37,7 @@ describe('AdageMultiselect', () => {
   it('should filter options when user type in input', async () => {
     renderAdageMultiselect()
 
-    const input = screen.getByPlaceholderText('Ex: Théâtre')
+    const input = screen.getByRole('combobox')
     await userEvent.type(input, 'Th')
 
     expect(screen.getByText('Théatre')).toBeInTheDocument()
@@ -69,7 +69,7 @@ describe('AdageMultiselect', () => {
   it('should display all options when user erase input value', async () => {
     renderAdageMultiselect()
 
-    const input = screen.getByPlaceholderText('Ex: Théâtre')
+    const input = screen.getByRole('combobox')
 
     await userEvent.type(input, 'Th')