provide accessible label for LMGB heading

closes: OUT-60

Test plan:
1.  In supported screenreaders, visit the learning mastery
    gradebook for an individual student.  The heading of
    each outcome group should be treated like a single UI
    element.

Change-Id: I28051255071d5b0631757d9fe49277169f4721c5
Reviewed-on: https://gerrit.instructure.com/93428
Tested-by: Jenkins
Reviewed-by: Matt Berns <mberns@instructure.com>
QA-Review: Cemal Aktas <caktas@instructure.com>
Product-Review: Nathan Rogowski <nathan@instructure.com>

Author: Michael Brewer-Davis

app/stylesheets/bundles/grade_summary.scss

@@ -383,6 +383,10 @@ $outcome-border: 1px solid #BCC2CA;
     &:hover {
       background-color: #f7f7f7;
     }
+    &:focus {
+      outline-width: 4px;
+      outline-offset: -4px;
+    }
     .outcome-icon i {
       line-height: 40px;
     }

app/views/jst/grade_summary/group.handlebars

@@ -1,10 +1,13 @@
-<div class="group-description" role='button' tabindex='0' aria-controls="group_detail-{{id}}" aria-expanded='false'>
-  <div class="outcome-icon" aria-label="{{#t}}expand/collapse {{title}} Outcome Group{{/t}}">
+<div id="group_header-{{id}}" class="group-description" role='button' tabindex='0' aria-controls="group_detail-{{id}}" aria-expanded='false'>
+  <label class="screenreader-only" for="group_header-{{id}}">
+    {{#t}}Expand/collapse {{title}} Outcome Group, student meets mastery of {{mastery_count}} of {{count}} outcomes{{/t}}
+  </label>
+  <div class="outcome-icon">
     <i class="icon-mini-arrow-down collapsed-arrow"></i>
     <i class="icon-mini-arrow-up expanded-arrow"></i>
   </div>
-  <h3 class="group-title"><span role='button' tabindex='0'>{{title}}</span></h3>
-  <div class="group-status">
+  <h3 class="group-title" aria-hidden="true">{{title}}</h3>
+  <div class="group-status" aria-hidden="true">
     <ul class="pill">
       <li
       {{#if mastery_count}}