add aria selected for canvas app center filters

fixes PLAT-556

test plan:

screen readers should be able to tell which filter is selected
you can tab through the apps now, and select one with space

Change-Id: Idf96f9418420dfe79ebe6d4451901cf2766589ab
Reviewed-on: https://gerrit.instructure.com/37767
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Brad Humphrey <brad@instructure.com>
QA-Review: Caleb Guanzon <cguanzon@instructure.com>
Product-Review: Nathan Mills <nathanm@instructure.com>

app/coffeescripts/views/ExternalTools/AppThumbnailView.coffee

@@ -11,6 +11,12 @@ define [
       'mouseenter': 'showDetails'
       'mouseleave': 'hideDetails'
       'click': 'hideDetails'
+      'focusin': 'showDetails'
+      'focusout': 'hideDetails'
+
+    attributes:
+      'role': 'button'
+      'tabindex': '0'
 
     initialize: ->
       super

app/coffeescripts/views/ExternalTools/IndexView.coffee

@@ -28,6 +28,7 @@ define [
       'click .view_tools_link': 'showExternalToolsView'
       'click .view_app_center_link': 'showAppCenterView'
       'click .app': 'showAppFullView'
+      'keyup .app': 'showAppFullView'
       'click .add_tool_link': 'addTool'
       'click [data-edit-external-tool]': 'editTool'
       'click [data-delete-external-tool]': 'deleteTool'
@@ -76,6 +77,7 @@ define [
       $(document).scrollTop(@currentAppCenterPosition)
 
     showAppFullView: (event) ->
+      if event.type != 'keyup' || event.keyCode == 32
         @hideExternalToolsView()
         @hideAppCenterView()
         view = @$(event.currentTarget).data('view')
@@ -139,6 +141,8 @@ define [
     toggleInstalledState: (event) =>
       elm = @$(event.currentTarget)
       @appCenterView.targetInstalledState = elm.data('toggle-installed-state')
+      @$('[data-installed-state] > a').attr('aria-selected', 'false')
       @$('[data-installed-state]').removeClass('active')
       @$('[data-installed-state="' + @appCenterView.targetInstalledState + '"]').addClass('active')
+      @$('[data-installed-state="' + @appCenterView.targetInstalledState + '"] > a').attr('aria-selected', 'true')
       @appCenterView.render()

app/views/jst/ExternalTools/AppThumbnailView.handlebars

@@ -1,4 +1,4 @@
-<div id="app_{{id}}">
+<div id="app_{{id}}" aria-label="{{name}}">
   <img class="banner_image" alt="{{name}}" src="{{banner_image_url}}"></img>
   <div class="details">
     <div class="content">

app/views/jst/ExternalTools/IndexView.handlebars

@@ -17,9 +17,9 @@
 <div class="clearfix" id="app_center_filter_wrapper">
   <input type="text" id="app_center_filter" class="input-large search-query pull-right" placeholder="{{#t "search_filter"}}Filter by name{{/t}}">
   <ul class="nav nav-pills" id="target-installed-state-items">
-    <li data-installed-state="all" class="active"><a href="#" data-toggle-installed-state="all">{{#t "all"}}All{{/t}}</a></li>
-    <li data-installed-state="not_installed"><a href="#" data-toggle-installed-state="not_installed">{{#t "not_installed"}}Not Installed{{/t}}</a></li>
-    <li data-installed-state="installed"><a href="#" data-toggle-installed-state="installed">{{#t "installed"}}Installed{{/t}}</a></li>
+    <li data-installed-state="all" class="active"><a href="#" data-toggle-installed-state="all" role="tab" aria-selected="true" >{{#t "all"}}All{{/t}}</a></li>
+    <li data-installed-state="not_installed"><a href="#" data-toggle-installed-state="not_installed" role="tab" aria-selected="false">{{#t "not_installed"}}Not Installed{{/t}}</a></li>
+    <li data-installed-state="installed"><a href="#" data-toggle-installed-state="installed" role="tab" aria-selected="false">{{#t "installed"}}Installed{{/t}}</a></li>
   </ul>
 </div>