make appointment group calendar sections KO + VO friendly

fixes CNVS-33159

test plan:
- as a teacher, navigate to the calendar
- create a new event with the + button in the top right
- select the appointment group tab
- tab down to the "Select Calendars" button
- press enter to expand a list of courses
- tab through and note that the icons to expand/collapse the courses
 are highlighted and display an appropriate label
- note that course sections are tab-able as expected

Change-Id: Ia1611a56e0cdb16f793ec2a469968b019b227b61
Reviewed-on: https://gerrit.instructure.com/94865
Tested-by: Jenkins
Reviewed-by: Steven Burnett <sburnett@instructure.com>
QA-Review: Nathan Rogowski <nathan@instructure.com>
Product-Review: Felix Milea-Ciobanu <fmileaciobanu@instructure.com>

Author: Felix Milea-Ciobanu

app/coffeescripts/calendar/ContextSelector.coffee

@@ -1,10 +1,11 @@
 define [
   'jquery'
   'underscore'
+  'i18n!context_sector'
   'jst/calendar/contextSelector'
   'jst/calendar/contextSelectorItem'
   'compiled/fn/preventDefault'
-], ($, _, contextSelectorTemplate, contextSelectorItemTemplate, preventDefault) ->
+], ($, _, I18n, contextSelectorTemplate, contextSelectorItemTemplate, preventDefault) ->
 
   class ContextSelectorItem
     constructor: (@context) ->
@@ -23,8 +24,14 @@ define [
       @$sectionCheckboxes.change @sectionChange
 
     toggleSections: (e) =>
-      @$listItem.find('.ag_sections_toggle').toggleClass('ag-sections-expanded')
       @$sectionsList.toggleClass('hidden')
+      $toggle = @$listItem.find('.ag_sections_toggle')
+      $toggle.toggleClass('ag-sections-expanded')
+
+      if $toggle.hasClass('ag-sections-expanded')
+        $toggle.find('.screenreader-only').text(I18n.t('Hide course sections for course %{name}', { name: @context.name }))
+      else
+        $toggle.find('.screenreader-only').text(I18n.t('Show course sections for course %{name}', { name: @context.name }))
 
     change: =>
       newState =  switch @state

app/stylesheets/pages/calendar/_scheduler.scss

@@ -217,6 +217,8 @@
   float: left;
   background-image: url(/images/jqueryui/icon_sprite.png);
   background-position: (-16px) -80px;
+  border: none;
+  background-color: transparent;
 }
 
 .ag-sections-expanded {

app/views/jst/calendar/contextSelectorItem.handlebars

@@ -1,13 +1,15 @@
 <li>
-  <a class="ag_sections_toggle"></a>
   <input type="checkbox" name="context_codes[]" value="{{asset_string}}" id="option_{{asset_string}}">
   <label for="option_{{asset_string}}">{{name}}</label>
+  <button class="ag_sections_toggle">
+    <span class="screenreader-only">{{#t}}Show course sections for course {{name}}{{/t}}</span>
+  </button>
   <ul class="ag_sections hidden">
     {{#each course_sections}}
       {{#if can_create_ag}}
         <li>
           <input type="checkbox" name="sections[]" value="{{asset_string}}" id="option_{{asset_string}}">
-          <label for="option_{{asset_string}}">{{name}}</label>
+          <label for="option_{{asset_string}}" aria-label="{{#t}}Course Section {{name}}{{/t}}">{{name}}</label>
         </li>
       {{/if}}
     {{/each}}