Allow toggling elements with the keyboard

Using `<a>` tags with no `href` means these elements cannot be activated
by keyboard users, so we're replacing them with buttons.

In the future we probably want to add more consistency so all toggle
buttons use the same code. We might also add styles depending on the
`aria-expanded` property.

app/assets/stylesheets/dashboard.scss

@@ -133,6 +133,10 @@
     p {
       font-size: $small-font-size;
     }
+
+    button {
+      @include link;
+    }
   }
 
   .icon-check {
@@ -156,6 +160,12 @@
   }
 }
 
+.proposed-actions {
+  button {
+    @include link;
+  }
+}
+
 // 03. Resources
 // -------------
 
@@ -285,6 +295,12 @@
   }
 }
 
+.goals-section {
+  button {
+    @include link;
+  }
+}
+
 // 05. Sidebar
 // -----------
 

app/assets/stylesheets/layout.scss

@@ -1090,7 +1090,7 @@ form {
     }
   }
 
-  [type]:not(.close-button, [type=checkbox], [type=file], [type=radio], [type=submit]) {
+  [type]:not([type="button"], [type=checkbox], [type=file], [type=radio], [type=submit]) {
     background: #f8f8f8;
     height: $input-height;
     margin-bottom: rem-calc(16);
@@ -2060,10 +2060,8 @@ table {
 
 .flag-content {
 
-  .button {
+  button {
-    background: none;
+    @include link;
-    margin-bottom: 0;
-    padding: 0;
   }
 }
 

app/assets/stylesheets/participation.scss

@@ -1579,6 +1579,15 @@
 .poll-more-info,
 .poll-more-info-answers {
   border-top: 1px solid #eee;
+
+  .read-more {
+    margin-bottom: $line-height;
+    margin-top: $line-height;
+
+    button {
+      @include link;
+    }
+  }
 }
 
 .poll-more-info-answers {
@@ -1655,6 +1664,7 @@
   top: 24px;
   width: rem-calc(48);
   z-index: 9;
+  cursor: pointer;
 
   &:hover {
     background: $dark;

app/assets/stylesheets/sdg/goals/show.scss

@@ -69,6 +69,10 @@
       .read-more {
         text-align: center;
       }
+
+      .read-more button {
+        @include link;
+      }
     }
 
     .goal-description {

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

@@ -12,17 +12,17 @@
         <%= long_description %>
       </div>
       <div class="read-more">
-        <a id="read_more_goal_<%= goal.code %>"
+        <button type="button" id="read_more_goal_<%= goal.code %>"
            data-toggle="description_goal_<%= goal.code %> read_more_goal_<%= goal.code %> read_less_goal_<%= goal.code %>"
            data-toggler="hide">
           <%= t("sdg.goals.show.read_more", goal: goal.title) %>
-        </a>
+        </button>
-        <a id="read_less_goal_<%= goal.code %>"
+        <button type="button" id="read_less_goal_<%= goal.code %>"
            data-toggle="description_goal_<%= goal.code %> read_more_goal_<%= goal.code %> read_less_goal_<%= goal.code %>"
            data-toggler="hide"
            class="hide">
           <%= t("sdg.goals.show.read_less", goal: goal.title) %>
-        </a>
+        </button>
       </div>
     </div>
   </article>

app/views/dashboard/_next_goal.html.erb

@@ -1,5 +1,5 @@
 <% if next_goal.present? %>
-  <div id="goals-section">
+  <div id="goals-section" class="goals-section">
     <h3 class="title"><%= t("dashboard.next_goal.title") %></h3>
 
     <div id="next_goal" data-toggler=".hide">
@@ -7,9 +7,9 @@
 
       <% if course.count > 1 %>
         <div class="margin small">
-          <a id="see_complete_course_link" data-toggle="complete_course next_goal">
+          <button type="button" id="see_complete_course_link" data-toggle="complete_course next_goal">
             <%= t("dashboard.next_goal.see_complete_course") %>
-          </a>
+          </button>
         </div>
       <% end %>
     </div>
@@ -19,9 +19,9 @@
         <%= render partial: "goal", collection: course %>
 
         <div class="margin small">
-          <a data-toggle="complete_course next_goal">
+          <button type="button" data-toggle="complete_course next_goal">
             <%= t("dashboard.next_goal.hide_course") %>
-          </a>
+          </button>
         </div>
       </div>
     <% end %>

app/views/dashboard/_proposed_action.html.erb

@@ -33,10 +33,10 @@
                data-toggler=".hide">
             <%= proposed_action_description(proposed_action) %>
           </div>
-          <a data-toggle="proposed_action_description_<%= dom_id(proposed_action) %>
+          <button type="button" data-toggle="proposed_action_description_<%= dom_id(proposed_action) %>
                           truncated_description_<%= dom_id(proposed_action) %>">
             <small><%= t("dashboard.recommended_actions.show_description") %></small>
-          </a>
+          </button>
           <div id="proposed_action_description_<%= dom_id(proposed_action) %>" class="hide" data-toggler=".hide">
             <%= wysiwyg(proposed_action.description) %>
           </div>

app/views/dashboard/_recommended_actions_by_status.html.erb

@@ -1,15 +1,15 @@
 <h3 class="title"><%= t("dashboard.recommended_actions.#{status}_title") %></h3>
 <% if actions.any? %>
-  <div id="proposed_actions_<%= status %>">
+  <div id="proposed_actions_<%= status %>" class="proposed-actions">
     <% actions.first(4).each do |proposed_action| %>
       <%= render "proposed_action", proposed_action: proposed_action %>
     <% end %>
     <% if actions.count > 4 %>
       <div class="margin small" id="proposed_actions_<%= status %>_link" data-toggler=".hide">
         <% if toggle == true %>
-          <a id="see_proposed_actions_link_<%= status %>" data-toggle="last_proposed_actions_<%= status %> proposed_actions_<%= status %>_link">
+          <button type="button" id="see_proposed_actions_link_<%= status %>" data-toggle="last_proposed_actions_<%= status %> proposed_actions_<%= status %>_link">
             <strong><%= t("dashboard.recommended_actions.see_proposed_actions") %></strong>
-          </a>
+          </button>
         <% else %>
           <%= link_to recommended_actions_proposal_dashboard_path(proposal.to_param) do %>
             <strong><%= t("dashboard.recommended_actions.goto_proposed_actions") %></strong>
@@ -20,12 +20,12 @@
   </div>
   <% if toggle == true %>
     <% if actions.count > 4 %>
-      <div id="last_proposed_actions_<%= status %>" class="hide" data-toggler=".hide">
+      <div id="last_proposed_actions_<%= status %>" class="hide proposed-actions" data-toggler=".hide">
         <%= render partial: "proposed_action", collection: actions - actions.first(4) %>
         <div class="margin small">
-          <a data-toggle="last_proposed_actions_<%= status %> proposed_actions_<%= status %>_link">
+          <button type="button" data-toggle="last_proposed_actions_<%= status %> proposed_actions_<%= status %>_link">
             <strong><%= t("dashboard.recommended_actions.hide_proposed_actions") %></strong>
-          </a>
+          </button>
         </div>
       </div>
     <% end %>

app/views/layouts/_header.html.erb

@@ -16,7 +16,7 @@
     <div class="top-bar">
 
       <span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="float-right">
-        <span class="menu-icon dark" data-toggle></span>
+        <button type="button" class="menu-icon dark" data-toggle></button>
         <%= t("application.menu") %>
       </span>
 

app/views/legislation/processes/_header.html.erb

@@ -27,9 +27,9 @@
           <% end %>
         </div>
 
-        <a class="button" data-toggle="legislation_info">
+        <button type="button" class="button" data-toggle="legislation_info">
           <%= t("legislation.processes.header.more_info") %>
-        </a>
+        </button>
       <% else %>
         <%= render "legislation/processes/header_full", process: @process %>
       <% end %>

app/views/legislation/processes/_header_full.html.erb

@@ -12,10 +12,10 @@
     <%= markdown @process.additional_info if @process.additional_info %>
   </div>
 
-  <a class="button" data-toggle="additional_info"
+  <button type="button" class="button" data-toggle="additional_info"
     <% if banner_color? %>
       style="background:<%= process.font_color %>; color:<%= process.background_color %>;"
     <% end %>>
     <%= t("legislation.processes.header.additional_info") %>
-  </a>
+  </button>
 <% end %>

app/views/legislation/processes/_help_gif.html.erb

@@ -1,10 +1,10 @@
 <div class="row">
   <div class="small-12 column">
     <div class="float-right">
-      <a class="button hollow" data-toggle="annotator-help">
+      <button type="button" class="button hollow" data-toggle="annotator-help">
         <sub><span class="icon-edit"></span></sub>&nbsp;
         <%= t("annotator.help.title") %>
-      </a>
+      </button>
 
       <div class="dropdown-pane" id="annotator-help" data-dropdown data-auto-focus="true">
         <% if user_signed_in? %>

app/views/polls/_gallery.html.erb

@@ -1,8 +1,8 @@
 <div class="orbit margin-bottom" role="region" aria-label="<%= answer.title %>" data-orbit data-auto-play="false" data-use-m-u-i="false">
-  <a data-toggle="answer_<%= answer.id %> zoom_<%= answer.id %>" class="zoom-link hide-for-small-only">
+  <button type="button" data-toggle="answer_<%= answer.id %> zoom_<%= answer.id %>" class="zoom-link hide-for-small-only">
     <span id="zoom_<%= answer.id %>" class="icon-search-plus" data-toggler="icon-search-plus icon-search-minus"></span>
     <span class="show-for-sr"><%= t("polls.show.zoom_plus") %></span>
-  </a>
+  </button>
 
   <ul class="orbit-container">
     <li>

app/views/polls/show.html.erb

@@ -63,18 +63,18 @@
               <div id="answer_description_<%= answer.id %>" class="answer-description short" data-toggler="short">
                 <%= wysiwyg(answer.description) %>
               </div>
-              <div class="margin">
+              <div class="read-more">
-                <a id="read_more_<%= answer.id %>"
+                <button type="button" id="read_more_<%= answer.id %>"
                    data-toggle="answer_description_<%= answer.id %> read_more_<%= answer.id %> read_less_<%= answer.id %>"
                    data-toggler="hide">
                   <%= t("polls.show.read_more", answer: answer.title) %>
-                </a>
+                </button>
-                <a id="read_less_<%= answer.id %>"
+                <button type="button" id="read_less_<%= answer.id %>"
                    data-toggle="answer_description_<%= answer.id %> read_more_<%= answer.id %> read_less_<%= answer.id %>"
                    data-toggler="hide"
                    class="hide">
                   <%= t("polls.show.read_less", answer: answer.title) %>
-                </a>
+                </button>
               </div>
             </div>
           <% end %>

app/views/shared/_flag_actions.html.erb

@@ -4,9 +4,9 @@
       <span class="divider">&nbsp;|&nbsp;</span>
     <% end %>
 
-    <a data-toggle="flag-drop-<%= dom_id(flaggable) %>" title="<%= t("shared.flag") %>">
+    <button type="button" data-toggle="flag-drop-<%= dom_id(flaggable) %>" title="<%= t("shared.flag") %>">
       <span class="icon-flag flag-disable"></span>
-    </a>
+    </button>
     <span class="dropdown-pane" id="flag-drop-<%= dom_id(flaggable) %>" data-dropdown data-auto-focus="true">
       <%= link_to t("shared.flag"), polymorphic_path(flaggable, action: :flag), method: :put, remote: true %>
     </span>
@@ -17,9 +17,9 @@
       <span class="divider">&nbsp;|&nbsp;</span>
     <% end %>
 
-    <a data-toggle="unflag-drop-<%= dom_id(flaggable) %>" title="<%= t("shared.unflag") %>">
+    <button type="button" data-toggle="unflag-drop-<%= dom_id(flaggable) %>" title="<%= t("shared.unflag") %>">
       <span class="icon-flag flag-active"></span>
-    </a>
+    </button>
     <span class="dropdown-pane" id="unflag-drop-<%= dom_id(flaggable) %>" data-dropdown data-auto-focus="true">
       <%= link_to t("shared.unflag"), polymorphic_path(flaggable, action: :unflag), method: :put, remote: true %>
     </span>

app/views/verification/residence/new.html.erb

@@ -47,10 +47,10 @@
             <%= f.label t("verification.residence.new.document_number") %>
           </div>
 
-          <div class="inline-block" data-toggle="info-document-number">
+          <button type="button" class="inline-block" data-toggle="info-document-number">
             <span class="icon-help"></span>
             <span class="show-for-sr"><%= t("verification.residence.new.document_number_help_title") %></span>
-          </div>
+          </button>
 
           <div class="dropdown-pane" id="info-document-number" data-dropdown
                data-hover="true" data-hover-pane="true">

config/locales/en/general.yml

@@ -946,7 +946,7 @@ en:
     help:
       alt: Select the text you want to comment and press the button with the pencil.
       text: To comment this document you must %{sign_in} or %{sign_up}. Then select the text you want to comment and press the button with the pencil.
-      title: How I can comment this document?
+      title: How can I comment this document?
   links:
     form:
       delete_button: Delete

spec/shared/system/flaggable.rb

@@ -26,10 +26,10 @@ shared_examples "flaggable" do |factory_name, admin: false|
     visit path
 
     within "##{dom_id(flaggable)} .flag-content" do
-      find(".icon-flag").click
+      click_button "Flag as inappropriate"
       click_link "Flag as inappropriate"
 
-      expect(page).to have_css ".flag-active"
+      expect(page).to have_button "Unflag"
       expect(page).to have_link "Unflag", visible: :hidden
       expect(page).not_to have_link "Flag as inappropriate", visible: :all
     end
@@ -49,12 +49,12 @@ shared_examples "flaggable" do |factory_name, admin: false|
     visit path
 
     within "##{dom_id(flaggable)} .flag-content" do
-      expect(page).to have_css ".flag-active"
+      expect(page).to have_button "Unflag"
 
-      find(".icon-flag").click
+      click_button "Unflag"
       click_link "Unflag"
 
-      expect(page).not_to have_css ".flag-active"
+      expect(page).not_to have_button "Unflag"
       expect(page).to have_link "Flag as inappropriate", visible: :hidden
       expect(page).not_to have_link "Unflag", visible: :all
     end
@@ -72,15 +72,15 @@ shared_examples "flaggable" do |factory_name, admin: false|
     visit path
 
     within "##{dom_id(flaggable)} .flag-content" do
-      find(".icon-flag").click
+      click_button "Flag as inappropriate"
       click_link "Flag as inappropriate"
 
-      expect(page).to have_css ".flag-active"
+      expect(page).to have_button "Unflag"
 
-      find(".icon-flag").click
+      click_button "Unflag"
       click_link "Unflag"
 
-      expect(page).not_to have_css ".flag-active"
+      expect(page).not_to have_button "Unflag"
     end
 
     visit path
@@ -100,14 +100,14 @@ shared_examples "flaggable" do |factory_name, admin: false|
     visit path
 
     within "##{dom_id(flaggable)} > .comment-body .flag-content" do
-      find(".icon-flag").click
+      click_button "Flag as inappropriate"
       click_link "Flag as inappropriate"
 
-      expect(page).to have_css ".flag-active"
+      expect(page).to have_button "Unflag"
     end
 
     within "##{dom_id(child_comment)} .flag-content" do
-      expect(page).not_to have_css ".flag-active"
+      expect(page).not_to have_button "Unflag"
     end
   end
 end

spec/system/dashboard/dashboard_spec.rb

@@ -41,10 +41,15 @@ describe "Proposal's dashboard" do
       expect(page).to have_content(goal.title)
       expect(page).not_to have_content(future_goal.title)
 
-      find(:css, "#see_complete_course_link").click
+      click_button "Check out the complete course"
 
       expect(page).to have_content(goal.title)
       expect(page).to have_content(future_goal.title)
+
+      click_button "Hide course"
+
+      expect(page).to have_content(goal.title)
+      expect(page).not_to have_content(future_goal.title)
     end
   end
 
@@ -69,7 +74,7 @@ describe "Proposal's dashboard" do
     expect(page).to have_content(action.description)
     expect(page).to have_content("This is a really very long description for a proposed")
     expect(page).to have_selector("#truncated_description_dashboard_action_#{action_long.id}")
-    expect(page).to have_selector("a", text: "Show description")
+    expect(page).to have_button("Show description")
   end
 
   scenario "Dashboard progress do not display from the fourth proposed actions", js: true do
@@ -420,9 +425,13 @@ describe "Proposal's dashboard" do
     action_5 = create(:dashboard_action, :proposed_action, :active)
 
     visit recommended_actions_proposal_dashboard_path(proposal.to_param)
-    find(:css, "#see_proposed_actions_link_pending").click
+    click_button "Check out recommended actions"
 
     expect(page).to have_content(action_5.title)
+
+    click_button "Hide recommended actions"
+
+    expect(page).not_to have_content(action_5.title)
   end
 
   scenario "On recommended actions section display four proposed actions", js: true do

spec/system/legislation/draft_versions_spec.rb

@@ -72,6 +72,25 @@ describe "Legislation Draft Versions" do
       expect(page).to have_content("Current version")
     end
 
+    scenario "show more info button", :js do
+      process.update!(additional_info: "Text for additional info of the process")
+      visit legislation_process_draft_version_path(process, original)
+
+      expect(page).not_to have_content "Text for additional info of the process"
+
+      click_button "More information and context"
+
+      expect(page).to have_content "Text for additional info of the process"
+    end
+
+    scenario "show help gif", :js do
+      visit legislation_process_draft_version_path(process, original)
+
+      click_button text: "How can I comment this document?"
+
+      expect(page).to have_content "select the text you want to comment and press the button with the pencil"
+    end
+
     context "for final versions" do
       it "does not show the comments panel" do
         final_version = create(:legislation_draft_version, process: process, title: "Final version",

spec/system/legislation/processes_spec.rb

@@ -187,13 +187,16 @@ describe "Legislation" do
         end
       end
 
-      scenario "show additional info button" do
+      scenario "show additional info button", :js do
         process = create(:legislation_process, additional_info: "Text for additional info of the process")
 
         visit legislation_process_path(process)
 
-        expect(page).to have_content("Additional information")
+        expect(page).not_to have_content "Text for additional info of the process"
-        expect(page).to have_content("Text for additional info of the process")
+
+        click_button "Additional information"
+
+        expect(page).to have_content "Text for additional info of the process"
       end
 
       scenario "do not show additional info button if it is empty" do
@@ -201,7 +204,7 @@ describe "Legislation" do
 
         visit legislation_process_path(process)
 
-        expect(page).not_to have_content("Additional information")
+        expect(page).not_to have_button "Additional information"
       end
 
       scenario "Shows another translation when the default locale isn't available" do

spec/system/sdg/goals_spec.rb

@@ -106,16 +106,16 @@ describe "SDG Goals", :js do
       end
     end
 
-    scenario "has links to read more and read less for long description" do
+    scenario "has buttons to read more and read less for long description" do
       visit sdg_goal_path(15)
 
-      expect(page).to have_css("div.read-more a", text: "Read more about Life on Land")
+      expect(page).to have_button "Read more about Life on Land"
-      expect(page).to have_css("div.read-more a", text: "Read less about Life on Land", visible: :hidden)
+      expect(page).to have_button "Read less about Life on Land", visible: :hidden
 
-      find("div.read-more a", text: "Read more about Life on Land").click
+      click_button "Read more about Life on Land"
 
-      expect(page).to have_css("div.read-more a", text: "Read more about Life on Land", visible: :hidden)
+      expect(page).to have_button "Read more about Life on Land", visible: :hidden
-      expect(page).to have_css("div.read-more a", text: "Read less about Life on Land")
+      expect(page).to have_button "Read less about Life on Land"
     end
 
     scenario "has tab target section" do