refactor(a11y/combosearch): every combo with screen reader better support

app/components/editable_champ/annuaire_education_component.rb

@@ -1,3 +1,2 @@
-class EditableChamp::AnnuaireEducationComponent < EditableChamp::EditableChampBaseComponent
-  include ApplicationHelper
+class EditableChamp::AnnuaireEducationComponent < EditableChamp::ComboSearchComponent
 end

app/components/editable_champ/annuaire_education_component/annuaire_education_component.html.haml

@@ -1,6 +1,9 @@
+- render_parent
+
 = @form.hidden_field :value
 = @form.hidden_field :external_id
 = react_component("ComboAnnuaireEducationSearch",
   required: @champ.required?,
   id: @champ.input_id,
-  describedby: @champ.describedby_id)
+  describedby: @champ.describedby_id,
+  **react_combo_props)

app/components/editable_champ/carte_component.rb

@@ -1,3 +1,9 @@
 class EditableChamp::CarteComponent < EditableChamp::EditableChampBaseComponent
   include ApplicationHelper
+
+  def initialize(**args)
+    super(**args)
+
+    @autocomplete_component = EditableChamp::ComboSearchComponent.new(**args)
+  end
 end

app/components/editable_champ/carte_component/carte_component.html.haml

@@ -1,4 +1,11 @@
-= react_component("MapEditor", featureCollection: @champ.to_feature_collection, url: champs_carte_features_path(@champ), options: @champ.render_options)
+= render @autocomplete_component
+
+= react_component("MapEditor",
+  featureCollection: @champ.to_feature_collection,
+  url: champs_carte_features_path(@champ),
+  options: @champ.render_options,
+  autocompleteAnnounceTemplateId: @autocomplete_component.announce_template_id,
+  autocompleteScreenReaderInstructions: t("combo_search_component.screen_reader_instructions"))
 
 .geo-areas{ id: dom_id(@champ, :geo_areas) }
   = render partial: 'shared/champs/carte/geo_areas', locals: { champ: @champ, editing: true }

app/components/editable_champ/communes_component.rb

@@ -1,3 +1,2 @@
-class EditableChamp::CommunesComponent < EditableChamp::EditableChampBaseComponent
-  include ApplicationHelper
+class EditableChamp::CommunesComponent < EditableChamp::ComboSearchComponent
 end

app/components/editable_champ/communes_component/communes_component.html.haml

@@ -1,3 +1,4 @@
+- render_parent
 = @form.hidden_field :value
 = @form.hidden_field :external_id
 = @form.hidden_field :departement
@@ -7,4 +8,5 @@
   id: @champ.input_id,
   classNameDepartement: "width-33-desktop width-100-mobile",
   className: "width-66-desktop width-100-mobile",
-  describedby: @champ.describedby_id)
+  describedby: @champ.describedby_id,
+  **react_combo_props)

app/javascript/components/ComboSearch.tsx

@@ -24,7 +24,7 @@ type TransformResult<Result> = (
   result: Result
 ) => [key: string, value: string, label?: string];
 
-export type ComboSearchProps<Result> = {
+export type ComboSearchProps<Result = unknown> = {
   onChange?: (value: string | null, result?: Result) => void;
   value?: string;
   scope: string;

app/javascript/components/MapEditor/components/AddressInput.tsx

@@ -2,8 +2,14 @@ import React from 'react';
 import { fire } from '@utils';
 
 import ComboAdresseSearch from '../../ComboAdresseSearch';
+import { ComboSearchProps } from '~/components/ComboSearch';
 
-export function AddressInput() {
+export function AddressInput(
+  comboProps: Pick<
+    ComboSearchProps,
+    'screenReaderInstructions' | 'announceTemplateId'
+  >
+) {
   return (
     <div
       style={{
@@ -17,6 +23,7 @@ export function AddressInput() {
         onChange={(_, feature) => {
           fire(document, 'map:zoom', { feature });
         }}
+        {...comboProps}
       />
     </div>
   );

app/javascript/components/MapEditor/index.tsx

@@ -12,15 +12,20 @@ import { AddressInput } from './components/AddressInput';
 import { PointInput } from './components/PointInput';
 import { ImportFileInput } from './components/ImportFileInput';
 import { FlashMessage } from '../shared/FlashMessage';
+import { ComboSearchProps } from '../ComboSearch';
 
 export default function MapEditor({
   featureCollection: initialFeatureCollection,
   url,
-  options
+  options,
+  autocompleteAnnounceTemplateId,
+  autocompleteScreenReaderInstructions
 }: {
   featureCollection: FeatureCollection;
   url: string;
   options: { layers: string[] };
+  autocompleteAnnounceTemplateId: ComboSearchProps['announceTemplateId'];
+  autocompleteScreenReaderInstructions: ComboSearchProps['screenReaderInstructions'];
 }) {
   const [cadastreEnabled, setCadastreEnabled] = useState(false);
 
@@ -46,7 +51,10 @@ export default function MapEditor({
       {error && <FlashMessage message={error} level="alert" fixed={true} />}
 
       <ImportFileInput featureCollection={featureCollection} {...actions} />
-      <AddressInput />
+      <AddressInput
+        screenReaderInstructions={autocompleteScreenReaderInstructions}
+        announceTemplateId={autocompleteAnnounceTemplateId}
+      />
 
       <MapLibre layers={options.layers}>
         <DrawLayer