Discussion topic toggle a11y

Fixes CNVS-30174

Test Plan:
 - On the discussions page using a SR navigate
 - to the discussion section toggle
 - Notice that the SR announces that the toggle
   is now a button
 - Notice that there is no more hidden screen
   reader only weirdness and the message in
   that hidden screen reader element is now
   announced with the button
 - Pressing the button toggles the discussion
   section and announces the expanded/collapsed
   state

Change-Id: I5774c25da8c046dfb601a06ff287e4666996df50
Reviewed-on: https://gerrit.instructure.com/83648
Tested-by: Jenkins
Reviewed-by: Joel Hough <joel@instructure.com>
QA-Review: David Tan <dtan@instructure.com>
Product-Review: Matthew Sessions <msessions@instructure.com>

app/stylesheets/bundles/discussions_list.scss

@@ -202,6 +202,15 @@ $announcements_disscussion-summary-color: $ic-color-dark;
   .loader {
     height: 40px;
   }
+
+  .element_toggler {
+    background: none;
+    border: none;
+
+    .icon-mini-arrow-down {
+      vertical-align: initial;
+    }
+  }
 }
 
 .discussion {
@@ -384,4 +393,3 @@ $announcements_disscussion-summary-color: $ic-color-dark;
   @include accessibility-prompt;
   @include fontSize(14px);
 }
-

app/views/jst/DiscussionTopics/discussionList.handlebars

@@ -1,12 +1,13 @@
 <div class="ig-header">
-  <h2 class="ig-header-title element_toggler"
-     aria-controls="{{listID}}"
-     aria-expanded="true"
-     tabindex="0">
+  <button
+    class="ig-header-title element_toggler"
+    aria-controls="{{listID}}"
+    aria-expanded="true"
+  >
     <i class="icon-mini-arrow-down"></i>
     {{title}}
-    <a href="#" role="button" class="screenreader-only" tabindex="-1">{{toggleMessage}}</a>
-  </h2>
+    <span class="screenreader-only">{{toggleMessage}}</span>
+  </button>
   {{#if titleHelp}}
     <span class="pull-right title-help">{{titleHelp}}</span>
   {{/if}}