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 {