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:
mfo 2024-04-14 13:25:06 +00:00 committed by GitHub
commit cb2dd3dd3a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 57 additions and 30 deletions

View file

@ -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%;

View file

@ -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

View file

@ -1,5 +1,8 @@
class EditableChamp::CarteComponent < EditableChamp::EditableChampBaseComponent
include ApplicationHelper
def dsfr_champ_container
:fieldset
end
def initialize(**args)
super(**args)

View file

@ -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)

View file

@ -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,

View file

@ -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&apos;aide ?&nbsp;
<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}

View file

@ -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

View 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>"

View file

@ -0,0 +1,7 @@
fr:
activerecord:
attributes:
champs/carte_champ:
hints:
value_html: |
Besoin daide ? <a href="https://doc.demarches-simplifiees.fr/pour-aller-plus-loin/cartographie" target="_blank" rel="noreferrer">consulter les tutoriels video</a>