amelioration(formulaire-usager): groupes les champs suivant un titre de section dans une balise html de type <fieldset> de sorte a améliorer l'accessibilite de la plateforme

This commit is contained in:
Martin 2023-03-24 11:08:31 +01:00 committed by mfo
parent b9faa26560
commit ad77b9321b
21 changed files with 350 additions and 34 deletions

View file

@ -438,14 +438,6 @@
}
}
.header-section {
display: inline-block;
color: $blue-france-500;
font-size: 30px;
margin-bottom: 3 * $default-padding;
border-bottom: 3px solid $blue-france-500;
}
.header-subsection {
font-size: 22px;
color: $blue-france-500;

View file

@ -1,11 +1,54 @@
.counter-start-header-section {
counter-reset: headerSectionCounter;
}
counter-reset: h1 h2 h3 h4 h5 h6;
.header-section {
counter-increment: headerSectionCounter;
.reset-h1 {
counter-reset: h2;
}
&.header-section-counter::before {
content: counter(headerSectionCounter) ". ";
.reset-h2 {
counter-reset: h3;
}
.reset-h3 {
counter-reset: h4;
}
.reset-h4 {
counter-reset: h5;
}
.reset-h5 {
counter-reset: h6;
}
.header-section.fr-h1::before {
counter-increment: h1;
content: counter(h1) ". ";
}
.header-section.fr-h2::before {
counter-increment: h2;
content: counter(h1) "."counter(h2) ". ";
}
.header-section.fr-h3::before {
counter-increment: h3;
content: counter(h1) "."counter(h2) "." counter(h3) ". ";
}
.header-section.fr-h4::before {
counter-increment: h4;
content: counter(h1) "."counter(h2) "." counter(h3) "." counter(h4) ". ";
}
.header-section.fr-h5::before {
counter-increment: h5;
content: counter(h1) "."counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
}
.header-section.fr-h6::before {
counter-increment: h6;
content: counter(h1) "."counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
}
}

View file

@ -0,0 +1,42 @@
module Champs::Treeable
extend ActiveSupport::Concern
MAX_DEPTH = 6 # deepest level for header_sections is 3.
# but a repetition can be nested an header_section, so 3+3=6=MAX_DEPTH
included do
# as we progress in the list of ordered champs
# we keep a reference to each level of nesting (depth_cache)
# when we encounter an header_section, it depends of its own depth of nesting minus 1, ie:
# h1 belongs to prior (root)
# h2 belongs to prior h1
# h3 belongs to prior h2
# h1 belongs to prior (root)
# then, each and every champs which are not an header_section
# are added to the most_recent_subtree
# given a root_depth at 0, we build a full tree
# given a root_depth > 0, we build a partial tree (aka, a repetition)
def to_tree(champs:, root_depth:, build_champs_subtree_component:)
root = build_champs_subtree_component(header_section: nil)
depth_cache = Array.new(MAX_DEPTH)
depth_cache[root_depth] = root
most_recent_subtree = root
champs.each do |champ|
if champ.header_section?
champs_subtree = build_champs_subtree_component(header_section: champ)
depth_cache[champs_subtree.level - 1].add_node(champs_subtree)
most_recent_subtree = depth_cache[champs_subtree.level] = champs_subtree
else
most_recent_subtree.add_node(champ)
end
end
root
end
# must be implemented to render subtree
def build_champs_subtree_component(header_section:)
raise NotImplementedError
end
end
end

View file

@ -0,0 +1,41 @@
class EditableChamp::ChampsSubtreeComponent < ApplicationComponent
include ApplicationHelper
attr_reader :header_section, :nodes
def initialize(header_section:)
@header_section = header_section
@nodes = []
end
# a nodes can be either a champs, or a subtree
def add_node(node)
nodes.push(node)
end
def render_within_fieldset?
header_section && !empty_section?
end
def render_header_section_only?
header_section && empty_section?
end
def empty_section?
nodes.none? { |node| node.is_a?(Champ) }
end
def level
if header_section.parent.present?
header_section.header_section_level_value.to_i + header_section.parent.current_section_level
elsif header_section
header_section.header_section_level_value.to_i
else
0
end
end
def tag_for_depth
"h#{level + 1}"
end
end

View file

@ -0,0 +1,17 @@
- if render_within_fieldset?
= tag.fieldset(class: "reset-#{tag_for_depth}") do
= tag.legend do
= render EditableChamp::HeaderSectionComponent.new(champ: header_section, form: nil, level: level)
- @nodes.each do |champ_or_section|
- if champ_or_section.is_a?(Champ)
= render EditableChamp::FieldsForChampComponent.new(champ: champ_or_section, seen_at: nil)
- else
= render champ_or_section
- elsif render_header_section_only?
= render EditableChamp::HeaderSectionComponent.new(champ: header_section, form: nil, level: level)
- else
- @nodes.each do |champ_or_section|
- if champ_or_section.is_a?(Champ)
= render EditableChamp::FieldsForChampComponent.new(champ: champ_or_section, seen_at: nil)
- else
= render champ_or_section

View file

@ -0,0 +1,13 @@
class EditableChamp::ChampsTreeComponent < ApplicationComponent
include Champs::Treeable
attr_reader :root
def initialize(champs:, root_depth:)
@root = to_tree(champs:, root_depth:, build_champs_subtree_component: method(:build_champs_subtree_component))
end
def build_champs_subtree_component(header_section:)
EditableChamp::ChampsSubtreeComponent.new(header_section:)
end
end

View file

@ -0,0 +1,5 @@
class EditableChamp::FieldsForChampComponent < ApplicationComponent
def initialize(champ:, seen_at: nil)
@champ, @seen_at = champ, seen_at
end
end

View file

@ -0,0 +1,2 @@
= fields_for @champ.input_name, @champ do |form|
= render EditableChamp::EditableChampComponent.new form: form, champ: @champ, seen_at: @seen_at

View file

@ -1,2 +1,22 @@
class EditableChamp::HeaderSectionComponent < EditableChamp::EditableChampBaseComponent
class EditableChamp::HeaderSectionComponent < ApplicationComponent
def initialize(form:, champ:, seen_at: nil, level: 1)
@champ = champ
@form = form
@level = level
end
def libelle
@champ.libelle
end
def header_section_classnames
class_names = ["fr-h#{@level}", 'header-section']
class_names << 'header-section-counter' if @champ.dossier.auto_numbering_section_headers_for?(@champ)
class_names
end
def tag_for_depth
"h#{@level + 1}"
end
end

View file

@ -0,0 +1,2 @@
= tag.send(tag_for_depth, class: header_section_classnames) do
= libelle

View file

@ -1,8 +1,6 @@
- row_id = "safe-row-selector-#{@row.first.row_id}"
.row{ id: row_id }
- @row.each do |champ|
= fields_for champ.input_name, champ do |form|
= render EditableChamp::EditableChampComponent.new form: form, champ: champ, seen_at: @seen_at
= render EditableChamp::ChampsTreeComponent.new(champs: @row, root_depth: @champ.current_section_level)
.flex.row-reverse{ 'data-turbo': 'true' }
= render NestedForms::OwnedButtonComponent.new(formaction: champs_repetition_path(@champ.id, row_id: @row.first.row_id), http_method: :delete, opt: { class: "fr-btn fr-btn--sm fr-btn--tertiary fr-text-action-high--red-marianne", title: t(".delete_title", row_number: @champ.rows.find_index(@row))}) do

View file

@ -9,7 +9,7 @@ class TypesDeChampEditor::HeaderSectionComponent < ApplicationComponent
def header_section_options_for_select
closest_level = @tdc.previous_section_level(@upper_tdcs)
next_level = [MAX_LEVEL, closest_level + 1].min
next_level = [closest_level + 1, MAX_LEVEL].min
available_levels = (1..next_level).map(&method(:option_for_level))
disabled_levels = errors? ? (next_level + 1..MAX_LEVEL).map(&method(:option_for_level)) : []
@ -21,7 +21,7 @@ class TypesDeChampEditor::HeaderSectionComponent < ApplicationComponent
end
def errors
@tdc.check_nesting(@upper_tdcs)
@tdc.check_coherent_header_level(@upper_tdcs)
end
private

View file

@ -83,7 +83,12 @@ class RootController < ApplicationController
end
end
@dossier.association(:revision).target = @dossier.procedure.build_draft_revision
draft_revision = @dossier.procedure.build_draft_revision(types_de_champ_public: all_champs.map(&:type_de_champ))
@dossier.association(:revision).target = draft_revision
@dossier.champs_public.map(&:type_de_champ).map do |tdc|
tdc.association(:revision_type_de_champ).target = tdc.build_revision_type_de_champ(revision: draft_revision)
tdc.association(:revision).target = draft_revision
end
end
def suivi

View file

@ -48,7 +48,7 @@ class Champ < ApplicationRecord
:drop_down_secondary_description,
:collapsible_explanation_enabled?,
:collapsible_explanation_text,
:header_section_level,
:header_section_level_value,
:current_section_level,
:exclude_from_export?,
:exclude_from_view?,

View file

@ -418,7 +418,7 @@ class ProcedureRevision < ApplicationRecord
tdcs
.map.with_index
.filter_map { |tdc, i| tdc.header_section? ? [tdc, i] : nil }
.map { |tdc, i| [tdc, tdc.check_nesting(tdcs.take(i))] }
.map { |tdc, i| [tdc, tdc.check_coherent_header_level(tdcs.take(i))] }
.filter { |_tdc, errors| errors.present? }
.each { |tdc, message| errors.add(:header_section, message, type_de_champ: tdc) }
end

View file

@ -423,7 +423,7 @@ class TypeDeChamp < ApplicationRecord
previous_header_section.header_section_level_value.to_i
end
def check_nesting(upper_tdcs)
def check_coherent_header_level(upper_tdcs)
errs = []
previous_level = previous_section_level(upper_tdcs)

View file

@ -42,9 +42,5 @@
= f.select :groupe_instructeur_id,
dossier.procedure.groupe_instructeurs.active.map { |gi| [gi.label, gi.id] },
{ include_blank: dossier.brouillon? }
- dossier.champs_public.each do |champ|
= fields_for champ.input_name, champ do |form|
= render EditableChamp::EditableChampComponent.new form: form, champ: champ
= render EditableChamp::ChampsTreeComponent.new(champs: dossier.champs_public, root_depth: 0)
= render Dossiers::EditFooterComponent.new(dossier: dossier, annotation: false)

View file

@ -3,9 +3,7 @@
%section.counter-start-header-section
= render NestedForms::FormOwnerComponent.new
= form_for dossier, url: annotations_instructeur_dossier_path(dossier.procedure, dossier), html: { class: 'form', multipart: true } do |f|
- dossier.champs_private.each do |champ|
= fields_for champ.input_name, champ do |form|
= render EditableChamp::EditableChampComponent.new form: form, champ: champ, seen_at: seen_at
= render EditableChamp::ChampsTreeComponent.new(champs: dossier.champs_private, root_depth: 0)
= render Dossiers::EditFooterComponent.new(dossier: dossier, annotation: true)
- else

View file

@ -0,0 +1,142 @@
describe EditableChamp::ChampsTreeComponent, type: :component do
let(:component) { described_class.new(champs: champs, root_depth: 0) }
subject { component.root }
describe "to_tree" do
let(:header_1) { build(:champ_header_section_level_1) }
let(:header_1_2) { build(:champ_header_section_level_2) }
let(:header_2) { build(:champ_header_section_level_1) }
let(:champ_text) { build(:champ_text) }
let(:champ_textarea) { build(:champ_textarea) }
let(:champ_explication) { build(:champ_explication) }
let(:champ_communes) { build(:champ_communes) }
context 'without section' do
let(:champs) do
[
champ_text, champ_textarea
]
end
it 'chunk by uniq champs' do
expect(subject.header_section).to eq(nil)
expect(subject.nodes.size).to eq(champs.size)
expect(subject.nodes).to eq(champs)
end
end
context 'with sections only' do
let(:champs) do
[
header_1,
champ_explication,
champ_text,
header_2,
champ_textarea
]
end
it 'chunk by uniq champs' do
expect(subject.nodes.size).to eq(2)
expect(subject.nodes[0].header_section).to eq(header_1)
expect(subject.nodes[0].nodes).to eq([champ_explication, champ_text])
expect(subject.nodes[1].header_section).to eq(header_2)
expect(subject.nodes[1].nodes).to eq([champ_textarea])
end
end
context 'leading champs, and in between sections only' do
let(:champs) do
[
champ_text,
champ_textarea,
header_1,
champ_explication,
champ_communes,
header_2,
champ_textarea
]
end
it 'chunk by uniq champs' do
expect(subject.nodes.size).to eq(4)
expect(subject.nodes[0]).to eq(champ_text)
expect(subject.nodes[1]).to eq(champ_textarea)
expect(subject.nodes[2].header_section).to eq(header_1)
expect(subject.nodes[2].nodes).to eq([champ_explication, champ_communes])
expect(subject.nodes[3].header_section).to eq(header_2)
expect(subject.nodes[3].nodes).to eq([champ_textarea])
end
end
context 'with one sub sections' do
let(:champs) do
[
header_1,
champ_explication,
header_1_2,
champ_communes,
header_2,
champ_textarea
]
end
it 'chunk by uniq champs' do
expect(subject.nodes.size).to eq(2)
expect(subject.nodes[0].header_section).to eq(header_1)
expect(subject.nodes[0].nodes.size).to eq(2)
expect(subject.nodes[0].nodes[1].header_section).to eq(header_1_2)
expect(subject.nodes[0].nodes[1].nodes).to eq([champ_communes])
expect(subject.nodes[1].header_section).to eq(header_2)
expect(subject.nodes[1].nodes).to eq([champ_textarea])
end
end
context 'with consecutive subsection' do
let(:header_1) { build(:champ_header_section_level_1) }
let(:header_1_2_1) { build(:champ_header_section_level_2) }
let(:header_1_2_2) { build(:champ_header_section_level_2) }
let(:header_1_2_3) { build(:champ_header_section_level_2) }
let(:champs) do
[
header_1,
header_1_2_1,
build(:champ_text),
header_1_2_2,
build(:champ_text),
header_1_2_3,
build(:champ_text)
]
end
it 'chunk by uniq champs' do
expect(subject.nodes.size).to eq(1)
end
end
context 'with one sub sections and one subsub section' do
let(:header_1_2_3) { build(:champ_header_section_level_3) }
let(:champs) do
[
header_1,
champ_explication,
header_1_2,
champ_communes,
header_1_2_3,
champ_text,
header_2,
champ_textarea
]
end
it 'chunk by uniq champs' do
expect(subject.nodes.size).to eq(2)
expect(subject.nodes[0].header_section).to eq(header_1)
expect(subject.nodes[0].nodes.size).to eq(2)
expect(subject.nodes[0].nodes[1].header_section).to eq(header_1_2)
expect(subject.nodes[0].nodes[1].nodes.size).to eq(2)
expect(subject.nodes[0].nodes[1].nodes.first).to eq(champ_communes)
expect(subject.nodes[0].nodes[1].nodes[1].header_section).to eq(header_1_2_3)
expect(subject.nodes[0].nodes[1].nodes[1].nodes).to eq([champ_text])
expect(subject.nodes[1].header_section).to eq(header_2)
expect(subject.nodes[1].nodes).to eq([champ_textarea])
end
end
end
end

View file

@ -198,9 +198,8 @@ describe 'As an administrateur I can edit types de champ', js: true do
context 'header section' do
scenario 'invalid order, it pops up errors summary' do
add_champ
wait_until { procedure.active_revision.types_de_champ_public.size == 1 }
first_header = procedure.active_revision.types_de_champ_public.first
select('Titre de section', from: 'Type de champ')
first_header = procedure.active_revision.types_de_champ_public.first
select('Titre de niveau 1', from: dom_id(first_header, :header_section_level))
add_champ