a11y(bloc-repetable): ETQ usager qui navigue au clavier, lorsque j'ajoute un champs repetable, le focus vient sur le 1er champs du bloc repetable

This commit is contained in:
Martin 2023-02-27 15:33:25 +01:00 committed by mfo
parent 6a544c210a
commit a3f1e1926a
19 changed files with 104 additions and 28 deletions

View file

@ -2,9 +2,9 @@
%legend.mandatory-explanation %legend.mandatory-explanation
Sélectionnez une des valeurs Sélectionnez une des valeurs
%label %label
= @form.radio_button :value, Individual::GENDER_FEMALE = @form.radio_button :value, Individual::GENDER_FEMALE, id: @champ.female_input_id
= Individual.human_attribute_name('gender.female') = Individual.human_attribute_name('gender.female')
%label %label
= @form.radio_button :value, Individual::GENDER_MALE = @form.radio_button :value, Individual::GENDER_MALE, id: @champ.male_input_id
= Individual.human_attribute_name('gender.male') = Individual.human_attribute_name('gender.male')

View file

@ -1,16 +1,18 @@
.cnaf-inputs .cnaf-inputs
%div %div
= @form.label :numero_allocataire, t('.numero_allocataire_label') = @form.label :numero_allocataire, t('.numero_allocataire_label'), for: @champ.numero_allocataire_input_id
%p.notice= t('.numero_allocataire_notice') %p.notice= t('.numero_allocataire_notice')
= @form.text_field :numero_allocataire, = @form.text_field :numero_allocataire,
required: @champ.required?, required: @champ.required?,
aria: { describedby: @champ.describedby_id }, aria: { describedby: @champ.describedby_id },
class: "width-33-desktop" class: "width-33-desktop", id: @champ.numero_allocataire_input_id
%div %div
= @form.label :code_postal, t('.code_postal_label') = @form.label :code_postal, t('.code_postal_label'), for: @champ.code_postal_input_id
%p.notice= t('.code_postal_notice') %p.notice= t('.code_postal_notice')
= @form.text_field :code_postal, = @form.text_field :code_postal,
required: @champ.required?, required: @champ.required?,
aria: { describedby: @champ.describedby_id }, aria: { describedby: @champ.describedby_id },
class: "width-33-desktop" class: "width-33-desktop",
id: @champ.code_postal_input_id

View file

@ -1,16 +1,16 @@
.dgfip-inputs .dgfip-inputs
%div %div
= @form.label :numero_fiscal, t('.numero_fiscal_label') = @form.label :numero_fiscal, t('.numero_fiscal_label'), for: @champ.numero_fiscal_input_id
%p.notice= t('.numero_fiscal_notice') %p.notice= t('.numero_fiscal_notice')
= @form.text_field :numero_fiscal, = @form.text_field :numero_fiscal,
required: @champ.required?, required: @champ.required?,
aria: { describedby: @champ.describedby_id }, aria: { describedby: @champ.describedby_id },
class: "width-33-desktop" class: "width-33-desktop", id: @champ.numero_fiscal_input_id
%div %div
= @form.label :reference_avis, t('.reference_avis_label') = @form.label :reference_avis, t('.reference_avis_label'), for: @champ.reference_avis_input_id
%p.notice= t('.reference_avis_notice') %p.notice= t('.reference_avis_notice')
= @form.text_field :reference_avis, = @form.text_field :reference_avis,
required: @champ.required?, required: @champ.required?,
aria: { describedby: @champ.describedby_id }, aria: { describedby: @champ.describedby_id },
class: "width-33-desktop" class: "width-33-desktop", id: @champ.reference_avis_input_id

View file

@ -15,10 +15,6 @@ class EditableChamp::EpciComponent < EditableChamp::EditableChampBaseComponent
end end
end end
def departement_input_id
"#{@champ.input_id}-departement"
end
def departement_select_options def departement_select_options
{ selected: @champ.code_departement }.merge(@champ.mandatory? ? { prompt: '' } : { include_blank: '' }) { selected: @champ.code_departement }.merge(@champ.mandatory? ? { prompt: '' } : { include_blank: '' })
end end

View file

@ -1,4 +1,5 @@
%label.notice{ for: departement_input_id } Le département de lEPCI %label.notice{ for: @champ.code_departement_input_id } Le département de lEPCI
= @form.select :code_departement, departement_options, departement_select_options, required: @champ.required?, id: departement_input_id, class: "width-33-desktop width-100-mobile" = @form.select :code_departement, departement_options, departement_select_options, required: @champ.required?, id: @champ.code_departement_input_id, class: "width-33-desktop width-100-mobile"
- if @champ.departement? - if @champ.departement?
= @form.select :value, epci_options, epci_select_options, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, class: "width-33-desktop width-100-mobile" = @form.label "EPCI", for: @champ.epci_input_id
= @form.select :value, epci_options, epci_select_options, required: @champ.required?, id: @champ.epci_input_id, aria: { describedby: @champ.describedby_id }, class: "width-33-desktop width-100-mobile"

View file

@ -1,9 +1,9 @@
.mesri-inputs .mesri-inputs
%div %div
= @form.label :ine, t('.ine_label') = @form.label :ine, t('.ine_label'), for: @champ.input_id
%p.notice= t('.ine_notice') %p.notice= t('.ine_notice')
= @form.text_field :ine, = @form.text_field :ine,
required: @champ.required?, required: @champ.required?,
aria: { describedby: @champ.describedby_id }, aria: { describedby: @champ.describedby_id },
class: "width-33-desktop" class: "width-33-desktop", id: @champ.input_id

View file

@ -1,9 +1,10 @@
- # TODO, manage input id for focus on add repetition
- if @champ.options? - if @champ.options?
- if @champ.render_as_checkboxes? - if @champ.render_as_checkboxes?
= @form.collection_check_boxes(:value, @champ.enabled_non_empty_options, :to_s, :to_s) do |b| = @form.collection_check_boxes(:value, @champ.enabled_non_empty_options, :to_s, :to_s) do |b|
- tag.div(class: 'editable-champ editable-champ-checkbox') do - tag.div(class: 'editable-champ editable-champ-checkbox') do
- b.label do - b.label(for: @champ.checkbox_id(b.value)) do
- b.check_box({ multiple: true, checked: @champ&.selected_options&.include?(b.value), aria: { describedby: @champ.describedby_id } }) + b.text - b.check_box({ multiple: true, checked: @champ&.selected_options&.include?(b.value), aria: { describedby: @champ.describedby_id }, id: @champ.checkbox_id(b.value) }) + b.text
- else - else
= @form.hidden_field :value = @form.hidden_field :value
= react_component("ComboMultipleDropdownList", = react_component("ComboMultipleDropdownList",

View file

@ -1,8 +1,8 @@
.pole-emploi-inputs .pole-emploi-inputs
%div %div
= @form.label :identifiant, t('.identifiant_label') = @form.label :identifiant, t('.identifiant_label'), for: @champ.input_id
%p.notice= t('.identifiant_notice') %p.notice= t('.identifiant_notice')
= @form.text_field :identifiant, = @form.text_field :identifiant,
required: @champ.required?, required: @champ.required?,
aria: { describedby: @champ.describedby_id }, aria: { describedby: @champ.describedby_id },
class: "width-33-desktop" class: "width-33-desktop", id: @champ.input_id

View file

@ -1,8 +1,8 @@
%fieldset.radios %fieldset.radios
%label %label{ for: @champ.yes_input_id }
= @form.radio_button :value, true = @form.radio_button :value, true, id: @champ.yes_input_id
Oui Oui
%label %label{ for: @champ.no_input_id }
= @form.radio_button :value, false = @form.radio_button :value, false, id: @champ.no_input_id
Non Non

View file

@ -232,6 +232,10 @@ class Champ < ApplicationRecord
end end
end end
def focusable_input_id
input_id
end
private private
def html_id def html_id

View file

@ -26,4 +26,16 @@ class Champs::CiviliteChamp < Champ
def html_label? def html_label?
false false
end end
def female_input_id
"#{input_id}-female"
end
def male_input_id
"#{input_id}-male"
end
def focusable_input_id
female_input_id
end
end end

View file

@ -51,4 +51,16 @@ class Champs::CnafChamp < Champs::TextChamp
{ code_postal: code_postal, numero_allocataire: numero_allocataire }.to_json { code_postal: code_postal, numero_allocataire: numero_allocataire }.to_json
end end
end end
def numero_allocataire_input_id
"#{input_id}-numero_alocataire"
end
def code_postal_input_id
"#{input_id}-code_postal"
end
def focusable_input_id
numero_allocataire_input_id
end
end end

View file

@ -51,4 +51,16 @@ class Champs::DgfipChamp < Champs::TextChamp
{ reference_avis: reference_avis, numero_fiscal: numero_fiscal }.to_json { reference_avis: reference_avis, numero_fiscal: numero_fiscal }.to_json
end end
end end
def numero_fiscal_input_id
"#{input_id}-numero_fiscal"
end
def reference_avis_input_id
"#{input_id}-reference_avis"
end
def focusable_input_id
numero_fiscal_input_id
end
end end

View file

@ -70,6 +70,18 @@ class Champs::EpciChamp < Champs::TextChamp
end end
end end
def code_departement_input_id
"#{input_id}-code_departement"
end
def epci_input_id
"#{input_id}-epci"
end
def focusable_input_id
code_departement_input_id
end
private private
def on_departement_change def on_departement_change

View file

@ -79,6 +79,14 @@ class Champs::MultipleDropDownListChamp < Champ
update_column(:value, (selected_options - options).to_json) update_column(:value, (selected_options - options).to_json)
end end
def focusable_input_id
render_as_checkboxes? ? checkbox_id(options.find(&:present?)) : input_id
end
def checkbox_id(value)
"#{input_id}-#{value.parameterize}"
end
private private
def format_before_save def format_before_save

View file

@ -28,6 +28,7 @@ class Champs::RepetitionChamp < Champ
champs.group_by(&:row_id).values champs.group_by(&:row_id).values
end end
def add_row(revision) def add_row(revision)
added_champs = [] added_champs = []
transaction do transaction do

View file

@ -21,4 +21,15 @@
# type_de_champ_id :integer # type_de_champ_id :integer
# #
class Champs::YesNoChamp < Champs::BooleanChamp class Champs::YesNoChamp < Champs::BooleanChamp
def yes_input_id
"#{input_id}-yes"
end
def no_input_id
"#{input_id}-no"
end
def focusable_input_id
yes_input_id
end
end end

View file

@ -1,3 +1,6 @@
- if @champs.present? - if @champs.present?
= fields_for @champ.input_name, @champ do |form| = fields_for @champ.input_name, @champ do |form|
= turbo_stream.append dom_id(@champ, :rows), render(EditableChamp::RepetitionRowComponent.new(form: form, champ: @champ, row: @champs)) = turbo_stream.append dom_id(@champ, :rows), render(EditableChamp::RepetitionRowComponent.new(form: form, champ: @champ, row: @champs))
- first_champ_id = @champs.map(&:focusable_input_id).compact.first
- if first_champ_id
= turbo_stream.focus(first_champ_id)

View file

@ -23,7 +23,8 @@ shared_examples "the user has got a prefilled dossier, owned by themselves" do
expect(page).to have_css('label', text: type_de_champ_multiple_drop_down_list.libelle) expect(page).to have_css('label', text: type_de_champ_multiple_drop_down_list.libelle)
expect(page).to have_content(multiple_drop_down_list_values.first) expect(page).to have_content(multiple_drop_down_list_values.first)
expect(page).to have_content(multiple_drop_down_list_values.last) expect(page).to have_content(multiple_drop_down_list_values.last)
expect(page).to have_field(type_de_champ_epci.libelle, with: epci_value.last) expect(page).to have_field("Le département de lEPCI", with: epci_value.first)
expect(page).to have_selector("option[value='#{epci_value.last}'][selected]")
expect(page).to have_field(type_de_champ_dossier_link.libelle, with: dossier_link_value) expect(page).to have_field(type_de_champ_dossier_link.libelle, with: dossier_link_value)
expect(page).to have_field(commune_libelle, with: '01457') expect(page).to have_field(commune_libelle, with: '01457')
expect(page).to have_content(annuaire_education_value.last) expect(page).to have_content(annuaire_education_value.last)