Use a <main> tag on every page

Many pages had this tag, but many other didn't, which made navigation
inconsistent for people using screen readers.

Note that there are slight changes in two pages:

* The homepage now includes the banner and the content of the
  `shared/header` element inside the <main> tag
* The budgets index now includes the banner inside the <main> tag

I see both potential advantages and disadvantages of this approach,
since banners aren't necessarily related to the main content of a page
but on the other hand they aren't the same across pages and people using
screen readers might accidentally skip them if they jump to the <main>
tag.

So I'm choosing the option that is easier to implement.

Note we're adding a `public-content` class to the <main> element in the
application layout. This might be redundat because the element could
already be accessed through the `.public main` selector, but this is
consistent with the `admin-content` class used in the admin section, and
without it the <main> element would sometimes have an empty class
attribute and we'd have to use `if content_for?(:main_class)` or
`tag.main` which IMHO makes the code less consistent.

The Capybara::DSL monkey-patch is only done on the `visit` method
because it's the only reliable one. Other methods like `click_link`
generate AJAX requests, so `expect(page).to have_css "main", count: 1`
might be executed before the AJAX request is finished, meaning it
wouldn't properly test anything.

app/components/admin/budgets/show_component.html.erb

@@ -1,24 +1,24 @@
-<main class="admin-budgets-show">
+<% provide :main_class, "admin-budgets-show" %>
-  <%= back_link_to admin_budgets_path %>
 
-  <%= header %>
+<%= back_link_to admin_budgets_path %>
 
-  <%= render Admin::Budgets::DraftingComponent.new(budget) %>
+<%= header %>
-  <%= render Admin::Budgets::LinksComponent.new(budget) %>
 
-  <section class="groups-and-headings" aria-labelledby="groups_and_headings_header">
+<%= render Admin::Budgets::DraftingComponent.new(budget) %>
+<%= render Admin::Budgets::LinksComponent.new(budget) %>
+
+<section class="groups-and-headings" aria-labelledby="groups_and_headings_header">
   <h3 id="groups_and_headings_header"><%= t("admin.budgets.show.groups_and_headings") %></h3>
   <%= render Admin::Budgets::GroupsAndHeadingsComponent.new(budget) %>
-  </section>
+</section>
 
-  <section class="phases" aria-labelledby="phases_header">
+<section class="phases" aria-labelledby="phases_header">
   <h3 id="phases_header"><%= t("admin.budgets.edit.phases_caption") %></h3>
   <span class="help-text"><%= t("admin.budgets.edit.phases_table_help_text") %></span>
   <%= render Admin::BudgetPhases::PhasesComponent.new(budget) %>
-  </section>
+</section>
 
-  <section aria-labelledby="actions_header">
+<section aria-labelledby="actions_header">
   <h3 id="actions_header"><%= t("admin.budgets.edit.actions") %></h3>
   <%= render Admin::Budgets::ActionsComponent.new(budget) %>
-  </section>
+</section>
-</main>

app/components/admin/budgets_wizard/headings/index_component.html.erb

@@ -1,14 +1,14 @@
-<main class="admin-budgets-wizard-headings-index">
+<% provide :main_class, "admin-budgets-wizard-headings-index" %>
-  <%= back_link_to admin_budgets_wizard_budget_groups_path(budget, url_params), back_link_text %>
 
-  <%= header %>
+<%= back_link_to admin_budgets_wizard_budget_groups_path(budget, url_params), back_link_text %>
 
-  <%= render Admin::Budgets::HelpComponent.new("headings") %>
+<%= header %>
-  <%= render Admin::BudgetsWizard::CreationTimelineComponent.new("headings") %>
 
-  <% unless single_heading? %>
+<%= 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 %>
+<% end %>
-  <%= render Admin::BudgetsWizard::Headings::CreationStepComponent.new(new_heading) %>
+<%= render Admin::BudgetsWizard::Headings::CreationStepComponent.new(new_heading) %>
-</main>

app/components/budgets/groups/index_component.html.erb

@@ -1,8 +1,8 @@
+<% provide :main_class, "budget-groups-index" %>
+
 <% content_for :canonical do %>
   <%= render "shared/canonical", href: budget_groups_url %>
 <% end %>
 
-<main class="budget-groups-index">
+<%= header(before: back_link_to(budget_path(budget))) %>
-  <%= header(before: back_link_to(budget_path(budget))) %>
+<%= render Budgets::GroupsAndHeadingsComponent.new(budget) %>
-  <%= render Budgets::GroupsAndHeadingsComponent.new(budget) %>
-</main>

app/components/budgets/investments/new_component.html.erb

@@ -1,7 +1,7 @@
-<main class="budget-investment-new">
+<% provide :main_class, "budget-investment-new" %>
-  <%= back_link_to budgets_path %>
 
-  <%= header %>
+<%= back_link_to budgets_path %>
 
-  <%= render "/budgets/investments/form", form_url: budget_investments_path(budget) %>
+<%= header %>
-</main>
+
+<%= render "/budgets/investments/form", form_url: budget_investments_path(budget) %>

app/components/debates/new_component.html.erb

@@ -1,11 +1,12 @@
-<main class="debate-new">
+<% provide :main_class, "debate-new" %>
-  <%= back_link_to debates_path, t("debates.index.section_header.title") %>
 
-  <%= header do %>
+<%= back_link_to debates_path, t("debates.index.section_header.title") %>
+
+<%= header do %>
   <%= new_window_link_to t("debates.new.more_info"), help_path(anchor: "debates") %>
-  <% end %>
+<% end %>
 
-  <aside>
+<aside>
   <h2><%= t("debates.new.recommendations_title") %></h2>
 
   <ul class="recommendations">
@@ -14,7 +15,6 @@
     <li><%= t("debates.new.recommendation_three") %></li>
     <li><%= t("debates.new.recommendation_four") %></li>
   </ul>
-  </aside>
+</aside>
 
-  <%= render Debates::FormComponent.new(debate) %>
+<%= render Debates::FormComponent.new(debate) %>
-</main>

app/components/moderation/users/index_component.html.erb

@@ -1,9 +1,10 @@
-<main class="moderation-users-index">
+<% provide :main_class, "moderation-users-index" %>
-  <h2><%= t("moderation.users.index.title") %></h2>
 
-  <%= render Admin::SearchComponent.new(label: t("moderation.users.index.search_placeholder")) %>
+<h2><%= t("moderation.users.index.title") %></h2>
 
-  <% if users.present? %>
+<%= render Admin::SearchComponent.new(label: t("moderation.users.index.search_placeholder")) %>
+
+<% if users.present? %>
   <h3><%= page_entries_info users %></h3>
 
   <table id="moderation_users" class="moderation-users">
@@ -43,5 +44,4 @@
   </table>
 
   <%= paginate users %>
-  <% end %>
+<% end %>
-</main>

app/components/proposals/new_component.html.erb

@@ -1,11 +1,12 @@
-<main class="proposal-new">
+<% provide :main_class, "proposal-new" %>
-  <%= back_link_to proposals_path, t("proposals.index.section_header.title") %>
 
-  <%= header do %>
+<%= back_link_to proposals_path, t("proposals.index.section_header.title") %>
+
+<%= header do %>
   <%= new_window_link_to t("proposals.new.more_info"), help_path(anchor: "proposals") %>
-  <% end %>
+<% end %>
 
-  <aside>
+<aside>
   <h2><%= t("proposals.new.recommendations_title") %></h2>
 
   <ul class="recommendations">
@@ -13,7 +14,6 @@
     <li><%= t("proposals.new.recommendation_two") %></li>
     <li><%= t("proposals.new.recommendation_three") %></li>
   </ul>
-  </aside>
+</aside>
 
-  <%= render Proposals::FormComponent.new(proposal, url: proposals_path) %>
+<%= render Proposals::FormComponent.new(proposal, url: proposals_path) %>
-</main>

app/components/sdg/goals/index_component.html.erb

@@ -1,19 +1,19 @@
 <% provide(:title) { title } %>
+<% provide :main_class, "sdg-goals-index" %>
 
-<main class="sdg-goals-index">
+<% if header.present? %>
-  <% if header.present? %>
   <%= render "shared/header", header: header %>
-  <% else %>
+<% else %>
   <header class="section-header">
     <h1><%= title %></h1>
   </header>
-  <% end %>
+<% end %>
 
-  <%= render Shared::BannerComponent.new("sdg") %>
+<%= render Shared::BannerComponent.new("sdg") %>
 
-  <%= link_list(*goal_links, class: "sdg-goal-list") %>
+<%= link_list(*goal_links, class: "sdg-goal-list") %>
 
-  <% phases.each do |phase| %>
+<% phases.each do |phase| %>
   <section class="sdg-phase" id="sdg_phase_<%= phase.kind %>">
     <header>
       <h2 class="title"><%= phase.title %></h2>
@@ -21,5 +21,4 @@
 
     <%= render "shared/cards", cards: phase.cards.sort_by_order %>
   </section>
-  <% end %>
+<% end %>
-</main>

app/components/sdg/goals/show_component.html.erb

@@ -1,9 +1,9 @@
 <% provide(:title) { goal.title } %>
+<% provide :main_class, "sdg-goal-show" %>
 
-<main class="sdg-goal-show">
+<%= back_link_to sdg_goals_path %>
-  <%= back_link_to sdg_goals_path %>
 
-  <article class="sdg-goal sdg-goal-<%= code %>">
+<article class="sdg-goal sdg-goal-<%= code %>">
   <header>
     <h1><%= heading %></h1>
   </header>
@@ -25,15 +25,14 @@
       </button>
     </div>
   </div>
-  </article>
+</article>
 
-  <%= render ::Widget::Feeds::ParticipationComponent.new(feeds) %>
+<%= render ::Widget::Feeds::ParticipationComponent.new(feeds) %>
 
-  <% if processes_feed %>
+<% if processes_feed %>
   <div class="feeds-list">
     <%= render ::Widget::Feeds::FeedComponent.new(processes_feed) %>
   </div>
-  <% end %>
+<% end %>
 
-  <%= render SDG::Goals::TargetsComponent.new(goal) %>
+<%= render SDG::Goals::TargetsComponent.new(goal) %>
-</main>

app/components/subscriptions/edit_component.html.erb

@@ -1,5 +1,6 @@
-<main class="subscriptions-edit">
+<% provide :main_class, "subscriptions-edit" %>
-  <%= form_for user, url: subscriptions_path(token: user.subscriptions_token) do |f| %>
+
+<%= form_for user, url: subscriptions_path(token: user.subscriptions_token) do |f| %>
   <h2><%= t("account.show.notifications") %></h2>
 
   <div><%= f.check_box :email_on_comment %></div>
@@ -9,5 +10,4 @@
   <div><%= f.check_box :email_on_direct_message %></div>
 
   <%= f.submit t("account.show.save_changes_submit"), class: "button margin-top" %>
-  <% end %>
+<% end %>
-</main>

app/views/budgets/ballot/show.html.erb

@@ -1,3 +1,5 @@
-<main id="ballot" class="budget-ballot-show">
+<% provide :main_class, "budget-ballot-show" %>
+
+<div id="ballot">
   <%= render "budgets/ballot/ballot" %>
-</main>
+</div>

app/views/budgets/groups/show.html.erb

@@ -1,10 +1,11 @@
-<main class="budget-group-show">
+<% provide :main_class, "budget-group-show" %>
-  <header>
+
+<header>
   <%= back_link_to budget_path(@budget) %>
   <h1><%= t("budgets.groups.show.title") %></h1>
-  </header>
+</header>
 
-  <div class="row margin">
+<div class="row margin">
   <div id="headings" class="small-12 medium-7 column select-district">
     <div class="row">
       <% @group.headings.sort_by_name.each_slice(7) do |slice| %>
@@ -24,5 +25,4 @@
   <div class="medium-5 column show-for-medium text-center">
     <%= image_tag(image_path_for("map.jpg")) %>
   </div>
-  </div>
+</div>
-</main>

app/views/budgets/index.html.erb

@@ -1,19 +1,19 @@
 <%= render Shared::BannerComponent.new("budgets") %>
 
 <% provide :title do %><%= t("budgets.index.title") %><% end %>
+<% provide :main_class, "budgets-index" %>
 
 <% content_for :canonical do %>
   <%= render "shared/canonical", href: budgets_url %>
 <% end %>
 
-<main class="budgets-index">
+<% if @budget.present? %>
-  <% if @budget.present? %>
   <%= render Budgets::BudgetComponent.new(@budget) %>
 
   <% if @finished_budgets.present? %>
     <%= render "finished", budgets: @finished_budgets %>
   <% end %>
-  <% else %>
+<% else %>
   <header>
     <h1><%= t("budgets.index.title") %></h1>
   </header>
@@ -25,7 +25,6 @@
       </div>
     </div>
   </div>
-  <% end %>
+<% end %>
 
-  <%= render Budgets::FooterComponent.new %>
+<%= render Budgets::FooterComponent.new %>
-</main>

app/views/budgets/investments/index.html.erb

@@ -15,18 +15,17 @@
   <% end %>
 <% end %>
 
-<main id="budget-investments-main">
+<% if @search_terms || @advanced_search_terms %>
-  <% if @search_terms || @advanced_search_terms %>
   <%= render Shared::SearchResultsSummaryComponent.new(
     results: @investments,
     search_terms: @search_terms,
     advanced_search_terms: @advanced_search_terms
   ) %>
-  <% else %>
+<% else %>
   <%= render "/budgets/investments/header" %>
-  <% end %>
+<% end %>
 
-  <div class="row">
+<div class="row">
   <div id="budget-investments" class="budget-investments-list small-12 medium-9 column">
 
     <% if @current_filter == "unfeasible" %>
@@ -86,5 +85,4 @@
     </aside>
   </div>
 
-  </div>
+</div>
-</main>

app/views/debates/index.html.erb

@@ -8,24 +8,23 @@
   <%= render "shared/canonical", href: debates_url %>
 <% end %>
 
-<main>
+<% if @search_terms || @advanced_search_terms %>
-  <% if @search_terms || @advanced_search_terms %>
   <%= render Shared::SearchResultsSummaryComponent.new(
     results: @debates,
     search_terms: @search_terms,
     advanced_search_terms: @advanced_search_terms
   ) %>
-  <% else %>
+<% else %>
   <%= render "shared/section_header", i18n_namespace: "debates.index.section_header", image: "debates" %>
-  <% end %>
+<% end %>
 
-  <% if feature?("user.recommendations") && @recommended_debates.present? %>
+<% if feature?("user.recommendations") && @recommended_debates.present? %>
   <%= render "shared/recommended_index", recommended: @recommended_debates,
                                          disable_recommendations_path: recommendations_disable_debates_path,
                                          namespace: "debates" %>
-  <% end %>
+<% end %>
 
-  <div class="row">
+<div class="row">
   <div id="debates" class="debates-list small-12 medium-9 column">
 
     <%= render Shared::BannerComponent.new("debates") %>
@@ -82,6 +81,4 @@
       <%= render "shared/tag_cloud", taggable: "Debate" %>
     </aside>
   </div>
-
+</div>
-  </div>
-</main>

app/views/layouts/admin.html.erb

@@ -22,7 +22,7 @@
         <% end %>
       </nav>
 
-      <div class="admin-content <%= yield(:main_class) %>">
+      <main class="admin-content <%= yield(:main_class) %>">
         <%= label_tag :show_menu, t("admin.menu.admin"),
                       "aria-hidden": true, class: "button hollow expanded" %>
 

app/views/layouts/application.html.erb

@@ -17,9 +17,11 @@
 
     <div class="wrapper <%= yield(:wrapper_class) %>">
       <%= render "layouts/header", with_subnavigation: true %>
-      <%= render "layouts/flash" %>
 
+      <main class="public-content <%= yield(:main_class) %>">
+        <%= render "layouts/flash" %>
         <%= yield %>
+      </main>
     </div>
 
     <div class="footer">

app/views/layouts/dashboard.html.erb

@@ -26,7 +26,7 @@
         <%= render "dashboard/menu" %>
       </nav>
 
-      <div class="admin-content">
+      <main class="admin-content <%= yield(:main_class) %>">
         <%= label_tag :show_menu, t("admin.menu.admin"),
                       "aria-hidden": true, class: "button hollow expanded" %>
 
@@ -34,7 +34,7 @@
         <%= render "layouts/dashboard/proposal_totals" %>
         <%= render "layouts/dashboard/proposal_header" %>
         <%= yield %>
-      </div>
+      </main>
     </div>
   </body>
 </html>

app/views/layouts/devise.html.erb

@@ -21,11 +21,11 @@
       <div class="small-12 medium-9 column">
         <div class="row">
           <div class="small-12 medium-9 large-7 small-centered column">
-            <div class="auth-form margin">
+            <main class="auth-form margin <%= yield(:main_class) %>">
               <%= render "layouts/flash" %>
 
               <%= yield %>
-            </div>
+            </main>
           </div>
         </div>
       </div>

app/views/proposals/index.html.erb

@@ -8,8 +8,7 @@
   <%= render "shared/canonical", href: proposals_url %>
 <% end %>
 
-<main>
+<% if [
-  <% if [
         @search_terms,
         @advanced_search_terms,
         params[:retired].present?,
@@ -26,17 +25,17 @@
       <h2><%= t("proposals.index.selected_proposals") %></h2>
     <% end %>
   <% end %>
-  <% else %>
+<% else %>
   <%= render "shared/section_header", i18n_namespace: "proposals.index.section_header", image: "proposals" %>
-  <% end %>
+<% end %>
 
-  <% if show_recommended_proposals? %>
+<% if show_recommended_proposals? %>
   <%= render "shared/recommended_index", recommended: @recommended_proposals,
                                          disable_recommendations_path: recommendations_disable_proposals_path,
                                          namespace: "proposals" %>
-  <% end %>
+<% end %>
 
-  <div class="row">
+<div class="row">
   <div id="proposals" class="proposals-list small-12 medium-9 column">
 
     <%= render Shared::BannerComponent.new("proposals") %>
@@ -125,6 +124,4 @@
       <%= render "proposals_lists" %>
     </aside>
   </div>
-
+</div>
-  </div>
-</main>

app/views/proposals/summary.html.erb

@@ -1,5 +1,4 @@
-<main>
+<div class="row proposals-summary">
-  <div class="row proposals-summary">
   <div id="proposals" class="proposals-list small-12 medium-9 column">
     <%= back_link_to %>
 
@@ -49,5 +48,4 @@
       <%= render Proposals::GeozonesComponent.new %>
     </aside>
   </div>
-  </div>
+</div>
-</main>

app/views/topics/edit.html.erb

@@ -1,7 +1,7 @@
-<main class="topic-edit">
+<% provide :main_class, "topic-edit" %>
-  <%= back_link_to community_path(@community) %>
 
-  <h1><%= t("community.topic.edit") %></h1>
+<%= back_link_to community_path(@community) %>
 
-  <%= render "form" %>
+<h1><%= t("community.topic.edit") %></h1>
-</main>
+
+<%= render "form" %>

app/views/topics/new.html.erb

@@ -1,9 +1,10 @@
-<main class="topic-new">
+<% provide :main_class, "topic-new" %>
-  <%= back_link_to community_path(@community) %>
 
-  <h1><%= t("community.topic.create") %></h1>
+<%= back_link_to community_path(@community) %>
 
-  <aside>
+<h1><%= t("community.topic.create") %></h1>
+
+<aside>
   <h2><%= t("community.topic.sidebar.recommendations_title") %></h2>
 
   <ul class="recommendations">
@@ -11,7 +12,6 @@
     <li><%= t("community.topic.sidebar.recommendation_two") %></li>
     <li><%= t("community.topic.sidebar.recommendation_three") %></li>
   </ul>
-  </aside>
+</aside>
 
-  <%= render "form" %>
+<%= render "form" %>
-</main>

app/views/users/show.html.erb

@@ -1,5 +1,4 @@
-<main>
+<div class="activity row margin-top">
-  <div class="activity row margin-top">
   <div class="small-12 column">
 
     <% if @user != current_user %>
@@ -24,5 +23,4 @@
 
     <%= render Users::PublicActivityComponent.new(@user) %>
   </div>
-  </div>
+</div>
-</main>

app/views/welcome/index.html.erb

@@ -13,10 +13,9 @@
 
 <%= render "shared/header", header: @header %>
 
-<main>
+<%= render "feeds" %>
-  <%= render "feeds" %>
 
-  <div class="row">
+<div class="row">
   <% if @cards.any? %>
     <div class="small-12 column <%= "large-8" if feed_processes_enabled? %>">
       <h2 class="title"><%= t("welcome.cards.title") %></h2>
@@ -30,11 +29,10 @@
       <%= render "processes" %>
     </div>
   <% end %>
-  </div>
+</div>
 
-  <% if feature?("user.recommendations") && (@recommended_debates.present? || @recommended_proposals.present?) %>
+<% if feature?("user.recommendations") && (@recommended_debates.present? || @recommended_proposals.present?) %>
   <%= render "recommended",
              recommended_debates: @recommended_debates,
              recommended_proposals: @recommended_proposals %>
-  <% end %>
+<% end %>
-</main>

public/403.html

@@ -33,9 +33,9 @@
 </head>
 
 <body>
-  <div class="error">
+  <main class="error">
     <h1>403</h1>
     <h2>Access to this page has been disabled by the administrators.</h2>
-  </div>
+  </main>
 </body>
 </html>

public/404.html

@@ -33,9 +33,9 @@
 </head>
 
 <body>
-  <div class="error">
+  <main class="error">
     <h1>404</h1>
     <h2>Not found.</h2>
-  </div>
+  </main>
 </body>
 </html>

public/422.html

@@ -33,9 +33,9 @@
 </head>
 
 <body>
-  <div class="error">
+  <main class="error">
     <h1>422</h1>
     <h2>The change you wanted was rejected.</h2>
-  </div>
+  </main>
 </body>
 </html>

public/500.html

@@ -33,9 +33,9 @@
 </head>
 
 <body>
-  <div class="error">
+  <main class="error">
     <h1>500</h1>
     <h2>Internal server error.</h2>
-  </div>
+  </main>
 </body>
 </html>

spec/rails_helper.rb

@@ -53,6 +53,20 @@ end
 
 FactoryBot.use_parent_strategy = false
 
+module Capybara
+  module DSL
+    alias_method :original_visit, :visit
+
+    def visit(url, ...)
+      original_visit(url, ...)
+
+      unless url.match?("robots.txt") || url.match?("active_storage/representations")
+        expect(page).to have_css "main", count: 1
+      end
+    end
+  end
+end
+
 Capybara.register_driver :headless_chrome do |app|
   options = Selenium::WebDriver::Chrome::Options.new.tap do |opts|
     opts.add_argument "--headless"