From 3f15647b8eea753400e1c8e1ece5547d02b6b966 Mon Sep 17 00:00:00 2001 From: Colin Darie Date: Mon, 27 Feb 2023 11:59:38 +0100 Subject: [PATCH] refactor(a11y/combosearch): every combo with screen reader better support --- .../editable_champ/annuaire_education_component.rb | 3 +-- .../annuaire_education_component.html.haml | 5 ++++- app/components/editable_champ/carte_component.rb | 6 ++++++ .../carte_component/carte_component.html.haml | 9 ++++++++- app/components/editable_champ/communes_component.rb | 3 +-- .../communes_component/communes_component.html.haml | 4 +++- app/javascript/components/ComboSearch.tsx | 2 +- .../components/MapEditor/components/AddressInput.tsx | 9 ++++++++- app/javascript/components/MapEditor/index.tsx | 12 ++++++++++-- 9 files changed, 42 insertions(+), 11 deletions(-) diff --git a/app/components/editable_champ/annuaire_education_component.rb b/app/components/editable_champ/annuaire_education_component.rb index 2dd780eb1..f5e394a0e 100644 --- a/app/components/editable_champ/annuaire_education_component.rb +++ b/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 diff --git a/app/components/editable_champ/annuaire_education_component/annuaire_education_component.html.haml b/app/components/editable_champ/annuaire_education_component/annuaire_education_component.html.haml index 1a60a1278..0dcfe97d0 100644 --- a/app/components/editable_champ/annuaire_education_component/annuaire_education_component.html.haml +++ b/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) diff --git a/app/components/editable_champ/carte_component.rb b/app/components/editable_champ/carte_component.rb index 737ffdf87..d4417ebb1 100644 --- a/app/components/editable_champ/carte_component.rb +++ b/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 diff --git a/app/components/editable_champ/carte_component/carte_component.html.haml b/app/components/editable_champ/carte_component/carte_component.html.haml index eb3096b26..ce5df6c7e 100644 --- a/app/components/editable_champ/carte_component/carte_component.html.haml +++ b/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 } diff --git a/app/components/editable_champ/communes_component.rb b/app/components/editable_champ/communes_component.rb index cc5bfee0b..a586a994b 100644 --- a/app/components/editable_champ/communes_component.rb +++ b/app/components/editable_champ/communes_component.rb @@ -1,3 +1,2 @@ -class EditableChamp::CommunesComponent < EditableChamp::EditableChampBaseComponent - include ApplicationHelper +class EditableChamp::CommunesComponent < EditableChamp::ComboSearchComponent end diff --git a/app/components/editable_champ/communes_component/communes_component.html.haml b/app/components/editable_champ/communes_component/communes_component.html.haml index ba2f155a0..8723e541b 100644 --- a/app/components/editable_champ/communes_component/communes_component.html.haml +++ b/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) diff --git a/app/javascript/components/ComboSearch.tsx b/app/javascript/components/ComboSearch.tsx index 23cb597cf..2115d6be6 100644 --- a/app/javascript/components/ComboSearch.tsx +++ b/app/javascript/components/ComboSearch.tsx @@ -24,7 +24,7 @@ type TransformResult = ( result: Result ) => [key: string, value: string, label?: string]; -export type ComboSearchProps = { +export type ComboSearchProps = { onChange?: (value: string | null, result?: Result) => void; value?: string; scope: string; diff --git a/app/javascript/components/MapEditor/components/AddressInput.tsx b/app/javascript/components/MapEditor/components/AddressInput.tsx index f1745d97a..51b559852 100644 --- a/app/javascript/components/MapEditor/components/AddressInput.tsx +++ b/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 (
{ fire(document, 'map:zoom', { feature }); }} + {...comboProps} />
); diff --git a/app/javascript/components/MapEditor/index.tsx b/app/javascript/components/MapEditor/index.tsx index d5acd5710..7de243a35 100644 --- a/app/javascript/components/MapEditor/index.tsx +++ b/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 && } - +