Merge pull request #10314 from mfo/US/enhance-a11y-on-carte-champs
ETQ Usager je souhaite que le champ carte soit plus accessible
This commit is contained in:
commit
cb2dd3dd3a
9 changed files with 57 additions and 30 deletions
|
@ -357,11 +357,6 @@
|
|||
}
|
||||
|
||||
[data-reach-combobox-input] {
|
||||
min-height: 62px;
|
||||
border-radius: 4px;
|
||||
border: solid 1px $border-grey;
|
||||
padding: $default-padding;
|
||||
|
||||
&:not([class^='width-']) {
|
||||
width: 100%;
|
||||
min-width: 50%;
|
||||
|
|
|
@ -111,7 +111,11 @@ module Dsfr
|
|||
end
|
||||
|
||||
def default_hint
|
||||
I18n.t("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}")
|
||||
if I18n.exists?("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}")
|
||||
I18n.t("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}")
|
||||
elsif I18n.exists?("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}_html")
|
||||
I18n.t("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}_html").html_safe
|
||||
end
|
||||
end
|
||||
|
||||
def password?
|
||||
|
@ -129,7 +133,10 @@ module Dsfr
|
|||
def hint?
|
||||
return true if get_slot(:hint).present?
|
||||
|
||||
I18n.exists?("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}")
|
||||
maybe_hint = I18n.exists?("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}")
|
||||
maybe_hint_html = I18n.exists?("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}_html")
|
||||
|
||||
maybe_hint || maybe_hint_html
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
class EditableChamp::CarteComponent < EditableChamp::EditableChampBaseComponent
|
||||
include ApplicationHelper
|
||||
def dsfr_champ_container
|
||||
:fieldset
|
||||
end
|
||||
|
||||
def initialize(**args)
|
||||
super(**args)
|
||||
|
|
|
@ -1,11 +1,14 @@
|
|||
= render @autocomplete_component
|
||||
.fr-fieldset__element
|
||||
= 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"))
|
||||
= react_component("MapEditor",
|
||||
{ featureCollection: @champ.to_feature_collection,
|
||||
champId: @champ.input_id,
|
||||
url: champs_carte_features_path(@champ),
|
||||
options: @champ.render_options,
|
||||
autocompleteAnnounceTemplateId: @autocomplete_component.announce_template_id,
|
||||
autocompleteScreenReaderInstructions: t("combo_search_component.screen_reader_instructions") },
|
||||
{class: 'width-100'})
|
||||
|
||||
.geo-areas{ id: dom_id(@champ, :geo_areas) }
|
||||
= render Dossiers::GeoAreasComponent.new(champ: @champ, editing: true)
|
||||
.geo-areas{ id: dom_id(@champ, :geo_areas) }
|
||||
= render Dossiers::GeoAreasComponent.new(champ: @champ, editing: true)
|
||||
|
|
|
@ -9,7 +9,7 @@ export function AddressInput(
|
|||
comboProps: Pick<
|
||||
ComboSearchProps,
|
||||
'screenReaderInstructions' | 'announceTemplateId'
|
||||
> & { featureCollection: FeatureCollection }
|
||||
> & { featureCollection: FeatureCollection; champId: string }
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
|
@ -18,9 +18,9 @@ export function AddressInput(
|
|||
}}
|
||||
>
|
||||
<ComboAdresseSearch
|
||||
className="no-margin"
|
||||
placeholder="Rechercher une adresse : saisissez au moins 2 caractères"
|
||||
className="fr-input fr-mt-1w"
|
||||
allowInputValues={false}
|
||||
id={comboProps.champId}
|
||||
onChange={(_, feature) => {
|
||||
fire(document, 'map:zoom', {
|
||||
featureCollection: comboProps.featureCollection,
|
||||
|
|
|
@ -19,13 +19,15 @@ export default function MapEditor({
|
|||
url,
|
||||
options,
|
||||
autocompleteAnnounceTemplateId,
|
||||
autocompleteScreenReaderInstructions
|
||||
autocompleteScreenReaderInstructions,
|
||||
champId
|
||||
}: {
|
||||
featureCollection: FeatureCollection;
|
||||
url: string;
|
||||
options: { layers: string[] };
|
||||
autocompleteAnnounceTemplateId: ComboSearchProps['announceTemplateId'];
|
||||
autocompleteScreenReaderInstructions: ComboSearchProps['screenReaderInstructions'];
|
||||
champId: string;
|
||||
}) {
|
||||
const [cadastreEnabled, setCadastreEnabled] = useState(false);
|
||||
|
||||
|
@ -36,20 +38,15 @@ export default function MapEditor({
|
|||
|
||||
return (
|
||||
<>
|
||||
<p className="fr-hint-text fr-mb-2w">
|
||||
Besoin d'aide ?
|
||||
<a
|
||||
href="https://doc.demarches-simplifiees.fr/pour-aller-plus-loin/cartographie"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
consulter les tutoriels video
|
||||
</a>
|
||||
</p>
|
||||
{error && <FlashMessage message={error} level="alert" fixed={true} />}
|
||||
|
||||
<ImportFileInput featureCollection={featureCollection} {...actions} />
|
||||
<label className="fr-label" htmlFor={champId}>
|
||||
Rechercher une Adresse
|
||||
<span className="fr-hint-text">Saisissez au moins 2 caractères</span>
|
||||
</label>
|
||||
<AddressInput
|
||||
champId={champId}
|
||||
featureCollection={featureCollection}
|
||||
screenReaderInstructions={autocompleteScreenReaderInstructions}
|
||||
announceTemplateId={autocompleteAnnounceTemplateId}
|
||||
|
|
|
@ -3,6 +3,14 @@ class Champs::CarteChamp < Champ
|
|||
DEFAULT_LON = 2.428462
|
||||
DEFAULT_LAT = 46.538192
|
||||
|
||||
def legend_label?
|
||||
true
|
||||
end
|
||||
|
||||
def html_label?
|
||||
false
|
||||
end
|
||||
|
||||
# We are not using scopes here as we want to access
|
||||
# the following collections on unsaved records.
|
||||
def cadastres
|
||||
|
|
7
config/locales/models/champs/carte_champ/en.yml
Normal file
7
config/locales/models/champs/carte_champ/en.yml
Normal file
|
@ -0,0 +1,7 @@
|
|||
en:
|
||||
activerecord:
|
||||
attributes:
|
||||
champs/carte_champ:
|
||||
hints:
|
||||
value_html: |
|
||||
Need help ? <a href="https://doc.demarches-simplifiees.fr/pour-aller-plus-loin/cartographie" target="_blank" rel="noreferrer">Check our video tutorial</a>"
|
7
config/locales/models/champs/carte_champ/fr.yml
Normal file
7
config/locales/models/champs/carte_champ/fr.yml
Normal file
|
@ -0,0 +1,7 @@
|
|||
fr:
|
||||
activerecord:
|
||||
attributes:
|
||||
champs/carte_champ:
|
||||
hints:
|
||||
value_html: |
|
||||
Besoin d’aide ? <a href="https://doc.demarches-simplifiees.fr/pour-aller-plus-loin/cartographie" target="_blank" rel="noreferrer">consulter les tutoriels video</a>
|
Loading…
Reference in a new issue