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 {
-    background: none;
-    margin-bottom: 0;
-    padding: 0;
+  button {
+    @include link;
   }
 }
 

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>
-        <a id="read_less_goal_<%= goal.code %>"
+        </button>
+        <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">
-                <a id="read_more_<%= answer.id %>"
+              <div class="read-more">
+                <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>
-                <a id="read_less_<%= answer.id %>"
+                </button>
+                <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">