fix attachment button to work with keyboard-only

closes: CNVS-16994

this worked before but it broke in
2cfd50d
when we tried to get it to work in IE10

Test plan:
- Perform the following without and with a screen
  reader, in IE10, IE11, firefox, safari, & chrome
- Navigate to the compose dialog in conversations.
- Using the keyboard, tab to the "Add Attachment" button.
- Using the keyboard, verify that an attachment can in fact be attached to
  a message, and that message sent.
- Reverify the above in IE with Jaws, Firefox with NVDA, and Safari with VO.

Change-Id: Iad232a019fcb3102bb33def46e147b49d5b03b07
Reviewed-on: https://gerrit.instructure.com/46970
Tested-by: Jenkins
Reviewed-by: Andrew Butterfield <abutterfield@instructure.com>
QA-Review: Steven Shepherd <sshepherd@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>

Author: ryankshaw

app/coffeescripts/views/conversations/MessageFormDialog.coffee

@@ -147,7 +147,7 @@ define [
       @$fullDialog.addClass('compose-message-dialog')
 
       # add attachment and media buttons to bottom bar
-      @$fullDialog.find('.ui-dialog-buttonpane').prepend composeButtonBarTemplate()
+      @$fullDialog.find('.ui-dialog-buttonpane').prepend composeButtonBarTemplate({isIE10: INST.browser.ie10})
 
       @$addMediaComment = @$fullDialog.find('.attach-media')
 
@@ -338,14 +338,20 @@ define [
       ($attachments.length * $attachments.outerWidth()) > @$attachmentsPane.width()
 
     addAttachment: ->
-      # when you click on the "label" that references the input it automatically open the file input
-      # we're exploiting this to get around the fact that IE won't let you submit the form when you try to
-      # "click" it through the javascript
-
       $('#file_input').attr('id', _.uniqueId('file_input'))
       @appendAddAttachmentTemplate()
       @updateAttachmentOverflow()
-      @focusAddAttachment()
+
+      # Hacky crazyness for ie10.
+      # If you try to use javascript to 'click' on a file input element,
+      # when you go to submit the form it will give you an "access denied" error.
+      # So, for IE10, we make the paperclip icon a <label>  that references the input it automatically open the file input.
+      # But making it a <label> makes it so you can't tab to it. so for everyone else me make it a <button> and open the file
+      # input dialog with a javascript "click"
+      if INST.browser.ie10
+        @focusAddAttachment()
+      else
+        @$fullDialog.find('.file_input:last').click()
 
     appendAddAttachmentTemplate: ->
       $attachment = $(addAttachmentTemplate())

app/views/jst/conversations/composeButtonBar.handlebars

@@ -1,14 +1,15 @@
 <div class="ui-dialog-buttonset attachments">
-  <label for="file_input" class="ui-button ui-widget ui-state-default ui-corner-all attach-file"
-          type="button" role="button"
+  <{{#if isIE10}}label for="file_input" role="button"{{else}}button{{/if}}
+          class="ui-button ui-widget ui-state-default ui-corner-all attach-file"
+          type="button"
           title="{{#t "titles.add_attachment"}}Add an attachment{{/t}}">
     <span class="ui-button-text">
       <i class="icon-paperclip"></i>
       <span class="screenreader-only">
         {{#t "titles.add_attachment"}}Add an attachment{{/t}}
       </span>
     </span>
-  </label>
+  </{{#if isIE10}}label{{else}}button{{/if}}>
 
   <button class="ui-button ui-widget ui-state-default ui-corner-all attach-media"
           type="button"