Use buttons to toggle elements

Using `<a>` tags with no `href` means these elements cannot be activated by keyboard users. 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.
consuldemocracy · Mar 31, 2021 · f422dcd · f422dcd
1 parent bfbbda0
commit f422dcd
Show file tree

Hide file tree

Showing 22 changed files with 127 additions and 68 deletions.
diff --git a/app/assets/stylesheets/dashboard.scss b/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
 // -----------
 

diff --git a/app/assets/stylesheets/layout.scss b/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;
   }
 }
 

diff --git a/app/assets/stylesheets/participation.scss b/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;

diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss
@@ -69,6 +69,10 @@
       .read-more {
         text-align: center;
       }
+
+      .read-more button {
+        @include link;
+      }
     }
 
     .goal-description {

diff --git a/app/components/sdg/goals/show_component.html.erb b/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>

diff --git a/app/views/dashboard/_next_goal.html.erb b/app/views/dashboard/_next_goal.html.erb
@@ -1,15 +1,15 @@
 <% 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">
       <%= render "goal", goal: next_goal %>
 
       <% 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 %>

diff --git a/app/views/dashboard/_proposed_action.html.erb b/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>

diff --git a/app/views/dashboard/_recommended_actions_by_status.html.erb b/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 %>

diff --git a/app/views/layouts/_header.html.erb b/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>
 

diff --git a/app/views/legislation/processes/_header.html.erb b/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 %>

diff --git a/app/views/legislation/processes/_header_full.html.erb b/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 %>
diff --git a/app/views/legislation/processes/_help_gif.html.erb b/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? %>

diff --git a/app/views/polls/_gallery.html.erb b/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>

diff --git a/app/views/polls/show.html.erb b/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 %>

diff --git a/app/views/shared/_flag_actions.html.erb b/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>

diff --git a/app/views/verification/residence/new.html.erb b/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">

diff --git a/config/locales/en/general.yml b/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

diff --git a/spec/shared/system/flaggable.rb b/spec/shared/system/flaggable.rb
@@ -26,10 +26,10 @@
     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 @@
     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 @@
     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 @@
     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