From 311434c26754d3fa37686d376eff62106555be76 Mon Sep 17 00:00:00 2001
From: Matthew Sessions <msessions@instructure.com>
Date: Mon, 27 Jun 2016 10:32:57 -0600
Subject: [PATCH] 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       | 10 +++++++++-
 .../jst/DiscussionTopics/discussionList.handlebars  | 13 +++++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/app/stylesheets/bundles/discussions_list.scss b/app/stylesheets/bundles/discussions_list.scss
index 840c2d5236d..0ec7988a70a 100644
--- a/app/stylesheets/bundles/discussions_list.scss
+++ b/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);
 }
-
diff --git a/app/views/jst/DiscussionTopics/discussionList.handlebars b/app/views/jst/DiscussionTopics/discussionList.handlebars
index f346a322601..1c26cbd525d 100644
--- a/app/views/jst/DiscussionTopics/discussionList.handlebars
+++ b/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}}