From d702fbbfc767c26c4b2e5e5988943b7538e1915c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 10 Sep 2021 01:09:05 +0200 Subject: [PATCH] Add a caption to headings table in budgets admin Captions benefit blind screen reader users who navigate through tables, particularly in this case because we potentially have several tables with headings (one table per group), so when navigating through tables it might be hard to know which group the headings belong to. In this case they also benefit sighted users. Usability tests have shown the "Groups and headings" section is a bit confusing, so adding a caption like "Headings in Districts" helps clarifying Districts is a group and the table refers to headings in that group. The very same table is rendered in the "headings" step of the budget creation wizard. However, in that case the information of the caption is redundant because the page is specific for headings belonging to a certain group. We're making the element invisible but still keeping it for screen reader users in order to ease their navigation through tables. --- app/assets/stylesheets/admin.scss | 5 ++++- .../admin/budget_phases/phases.scss | 4 ++++ .../admin/budgets_wizard/headings/index.scss | 6 ++++++ .../headings_component.html.erb | 1 + .../headings/index_component.html.erb | 20 ++++++++++--------- config/locales/en/admin.yml | 1 + config/locales/es/admin.yml | 1 + .../admin/budgets_wizard/wizard_spec.rb | 14 ++++++------- 8 files changed, 35 insertions(+), 17 deletions(-) create mode 100644 app/assets/stylesheets/admin/budgets_wizard/headings/index.scss diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index ca75123e0..4fdfca770 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -179,7 +179,10 @@ $table-header: #ecf1f6; table { caption { - @include element-invisible; + font-style: italic; + font-weight: normal; + padding: 0; + text-align: $global-left; } thead { diff --git a/app/assets/stylesheets/admin/budget_phases/phases.scss b/app/assets/stylesheets/admin/budget_phases/phases.scss index 0efe9037f..d627cf055 100644 --- a/app/assets/stylesheets/admin/budget_phases/phases.scss +++ b/app/assets/stylesheets/admin/budget_phases/phases.scss @@ -1,5 +1,9 @@ .budget-phases-table { + caption { + @include element-invisible; + } + [aria-pressed] { @include switch; margin-bottom: 0; diff --git a/app/assets/stylesheets/admin/budgets_wizard/headings/index.scss b/app/assets/stylesheets/admin/budgets_wizard/headings/index.scss new file mode 100644 index 000000000..f3cc8a169 --- /dev/null +++ b/app/assets/stylesheets/admin/budgets_wizard/headings/index.scss @@ -0,0 +1,6 @@ +.admin-budgets-wizard-headings-index { + + caption { + @include element-invisible; + } +} diff --git a/app/components/admin/budget_headings/headings_component.html.erb b/app/components/admin/budget_headings/headings_component.html.erb index e18ecaa94..189d7166d 100644 --- a/app/components/admin/budget_headings/headings_component.html.erb +++ b/app/components/admin/budget_headings/headings_component.html.erb @@ -1,5 +1,6 @@ <% if headings.any? %> + diff --git a/app/components/admin/budgets_wizard/headings/index_component.html.erb b/app/components/admin/budgets_wizard/headings/index_component.html.erb index 211f74d63..b5989b9de 100644 --- a/app/components/admin/budgets_wizard/headings/index_component.html.erb +++ b/app/components/admin/budgets_wizard/headings/index_component.html.erb @@ -1,12 +1,14 @@ -<%= back_link_to admin_budgets_wizard_budget_groups_path(budget, url_params), back_link_text %> +
+ <%= back_link_to admin_budgets_wizard_budget_groups_path(budget, url_params), back_link_text %> -<%= header %> + <%= header %> -<%= render Admin::Budgets::HelpComponent.new("headings") %> -<%= render Admin::BudgetsWizard::CreationTimelineComponent.new("headings") %> + <%= render Admin::Budgets::HelpComponent.new("headings") %> + <%= render Admin::BudgetsWizard::CreationTimelineComponent.new("headings") %> -<% unless single_heading? %> - <%= render Admin::BudgetsWizard::Headings::GroupSwitcherComponent.new(group) %> - <%= render Admin::BudgetHeadings::HeadingsComponent.new(headings) %> -<% end %> -<%= render Admin::BudgetsWizard::Headings::CreationStepComponent.new(new_heading) %> + <% unless single_heading? %> + <%= render Admin::BudgetsWizard::Headings::GroupSwitcherComponent.new(group) %> + <%= render Admin::BudgetHeadings::HeadingsComponent.new(headings) %> + <% end %> + <%= render Admin::BudgetsWizard::Headings::CreationStepComponent.new(new_heading) %> +
diff --git a/config/locales/en/admin.yml b/config/locales/en/admin.yml index 44a84c073..6a468d3b8 100644 --- a/config/locales/en/admin.yml +++ b/config/locales/en/admin.yml @@ -157,6 +157,7 @@ en: add_group: "Add group" add_heading: "Add heading" groups_and_headings: "Groups and headings" + headings_caption: "Headings in %{group}" winners: calculate: Calculate Winner Investments calculated: Winners being calculated, it may take a minute. diff --git a/config/locales/es/admin.yml b/config/locales/es/admin.yml index b8d19a4f7..8459dfa9e 100644 --- a/config/locales/es/admin.yml +++ b/config/locales/es/admin.yml @@ -157,6 +157,7 @@ es: add_group: "Añadir grupo" add_heading: "Añadir partida" groups_and_headings: "Grupos y partidas" + headings_caption: "Partidas del grupo %{group}" winners: calculate: Calcular proyectos ganadores calculated: Calculando ganadores, puede tardar un minuto. diff --git a/spec/system/admin/budgets_wizard/wizard_spec.rb b/spec/system/admin/budgets_wizard/wizard_spec.rb index 97fcd3d51..cfadc5869 100644 --- a/spec/system/admin/budgets_wizard/wizard_spec.rb +++ b/spec/system/admin/budgets_wizard/wizard_spec.rb @@ -70,7 +70,7 @@ describe "Budgets creation wizard", :admin do click_button "Create new heading" expect(page).to have_content "Heading created successfully!" - within("table") { expect(page).to have_content "All city" } + within_table("Headings in All city") { expect(page).to have_content "All city" } expect(page).not_to have_content "There are no headings." click_link "Manage headings from the Districts group." @@ -82,7 +82,7 @@ describe "Budgets creation wizard", :admin do click_button "Create new heading" expect(page).to have_content "Heading created successfully!" - within("table") { expect(page).to have_content "North" } + within_table("Headings in Districts") { expect(page).to have_content "North" } expect(page).not_to have_content "There are no headings." click_button "Add new heading" @@ -91,7 +91,7 @@ describe "Budgets creation wizard", :admin do click_button "Create new heading" expect(page).to have_content "Heading created successfully!" - within("table") { expect(page).to have_content "South" } + within_table("Headings in Districts") { expect(page).to have_content "South" } click_link "Continue to phases" @@ -113,15 +113,15 @@ describe "Budgets creation wizard", :admin do within "section", text: "Groups and headings" do within "section", text: "All city" do - within "tbody" do - expect(page).to have_css "tr", count: 1 + within_table "Headings in All city" do + expect(page).to have_css "tbody tr", count: 1 expect(page).to have_content "All city" end end within "section", text: "Districts" do - within "tbody" do - expect(page).to have_css "tr", count: 2 + within_table "Headings in Districts" do + expect(page).to have_css "tbody tr", count: 2 expect(page).to have_content "North" expect(page).to have_content "South" end
<%= t("admin.budgets.show.headings_caption", group: group.name) %>
<%= Budget::Heading.human_attribute_name(:name) %>