fix screenreader focus on numbers in sidebar

fixes MC-230

Test Plan:
-Create a blueprint course
-Create a seperate course
-Add an associated course to the blueprint course
-Turn on screenreader and focus on the sidebar
-Notice that the number isn't focusable with the screenreader
-the number of associations is listed when focusing on button
-Repeat with unsynced changes

Change-Id: Iac0bc1130ad1f378e7a5c7dee356cf226a25e874
Reviewed-on: https://gerrit.instructure.com/114274
Tested-by: Jenkins
Reviewed-by: Felix Milea-Ciobanu <fmileaciobanu@instructure.com>
QA-Review: David Tan <dtan@instructure.com>
Product-Review: Felix Milea-Ciobanu <fmileaciobanu@instructure.com>

app/jsx/blueprint_courses/components/CourseSidebar.js

@@ -16,7 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import I18n from 'i18n!blueprint_settings'
+import I18n from 'i18n!blueprint_course_sidebar'
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
@@ -27,6 +27,7 @@ import Button from 'instructure-ui/lib/components/Button'
 import Typography from 'instructure-ui/lib/components/Typography'
 import Spinner from 'instructure-ui/lib/components/Spinner'
 import Tooltip from 'instructure-ui/lib/components/Tooltip'
+import PresentationContent from 'instructure-ui/lib/components/PresentationContent'
 
 import propTypes from '../propTypes'
 import actions from '../actions'
@@ -254,6 +255,7 @@ export default class CourseSidebar extends Component {
       return (
         <div className="bcs__row">
           <Button
+            aria-label={I18n.t({ one: 'There is 1 Unsynced Change', other: 'There are %{count} Unsynced Changes' }, { count: this.props.unsyncedChanges.length })}
             id="mcUnsyncedChangesBtn"
             ref={(c) => { this.unsyncedChangesBtn = c }}
             variant="link"
@@ -261,7 +263,9 @@ export default class CourseSidebar extends Component {
           >
             <Typography>{I18n.t('Unsynced Changes')}</Typography>
           </Button>
-          <Typography><span className="bcs__row-right-content">{this.props.unsyncedChanges.length}</span></Typography>
+          <PresentationContent>
+            <Typography><span className="bcs__row-right-content">{this.props.unsyncedChanges.length}</span></Typography>
+          </PresentationContent>
           <MigrationOptions />
         </div>
       )
@@ -273,12 +277,22 @@ export default class CourseSidebar extends Component {
   maybeRenderAssociations () {
     if (!this.props.canManageCourse) return null
     const isSyncing = MigrationStates.isLoadingState(this.props.migrationStatus) || this.props.isLoadingBeginMigration
+    const length = this.props.associations.length
     const button = (
       <div className="bcs__row bcs__row__associations">
-        <Button disabled={isSyncing} id="mcSidebarAsscBtn" ref={(c) => { this.asscBtn = c }} variant="link" onClick={this.handleAssociationsClick}>
+        <Button
+          aria-label={I18n.t({ one: 'There is 1 Association', other: 'There are %{count} Associations' }, { count: length })}
+          disabled={isSyncing}
+          id="mcSidebarAsscBtn"
+          ref={(c) => { this.asscBtn = c }}
+          variant="link"
+          onClick={this.handleAssociationsClick}
+        >
           <Typography>{I18n.t('Associations')}</Typography>
         </Button>
-        <Typography><span className="bcs__row-right-content">{this.props.associations.length}</span></Typography>
+        <PresentationContent>
+          <Typography><span className="bcs__row-right-content">{length}</span></Typography>
+        </PresentationContent>
       </div>
     )