Close buttons in list are more friendly to a11y

fixes CNVS-19259

Test plan:
* Generate a thread of conversation messages between a number of users
* if you don't have one already
* Navigate to Inbox
* Click on a message that has a string of replies
* Open the reply modal of this message
* Ensure that when you press enter or space bar (via keyboard) when the
  the circle x's of context messages have focus that the following behavior
  occurs
  * If focus is on the circle x of the top context message and you press
    space bar or enter, focus should go to the circle x of the next
    context message
  * If focus is on the circle x of a context message that has context messages
    before it and you press space bar or enter, focus should go to the circle
    x of the context message just before it
  * If focus is on the circle x of the last context message and you
    press space bar or enter, focus should go to the attachments button
    in the footer of the modal
* Ensure that this behavior still occurs when navigating the modal using
* a screen reader

Change-Id: Iad596b76fe0c30abb785e9287938b87d973673de
Reviewed-on: https://gerrit.instructure.com/50675
Tested-by: Jenkins
Reviewed-by: Jonathan Featherstone <jfeatherstone@instructure.com>
QA-Review: Derek Hansen <dhansen@instructure.com>
Product-Review: Cosme Salazar <cosme@instructure.com>

Author: Andrew Butterfield

app/coffeescripts/views/conversations/ContextMessageView.coffee

@@ -11,7 +11,7 @@ define [
 
     events:
       'click a.context-more': 'toggle'
-      'click a.delete-btn': 'remove'
+      'click .delete-btn': 'triggerRemoval'
 
     initialize: ->
       super
@@ -29,3 +29,6 @@ define [
       @model.set(isCondensed: !@model.get('isCondensed'))
       @render()
       @$('a').focus()
+
+    triggerRemoval: ->
+      @model.trigger("removeView", { view: @ })

app/coffeescripts/views/conversations/ContextMessagesView.coffee

@@ -5,3 +5,24 @@ define [
 
   class ContextMessagesView extends CollectionView
     itemView: ContextMessageView
+
+    initialize: (options) ->
+      super
+      @collection.each (model) =>
+        model.bind("removeView", @handleChildViewRemoval)
+
+    handleChildViewRemoval: (e) ->
+      el = e.view.$el
+      index = el.index()
+      hasSiblings = el.siblings().length > 0
+      prev = el.prev().find('.delete-btn')
+      next = el.next().find('.delete-btn')
+      e.view.remove()
+
+      if (index > 0)
+        prev.focus()
+      else
+        if (hasSiblings)
+          next.focus()
+        else
+          $('#add-message-attachment-button').focus()

app/stylesheets/pages/conversations/_compose_message_dialog.scss

@@ -292,6 +292,13 @@ $subtleBorderColor: #e5e5e5;
       margin-top: 7px;
       clear: both;
     }
+
+    .delete-btn {
+      background: none;
+      color: #555;
+      border: none;
+      padding: 0px;
+    }
   }
 
 }

app/views/jst/conversations/composeButtonBar.handlebars

@@ -1,5 +1,6 @@
 <div class="ui-dialog-buttonset attachments">
   <{{#if isIE10}}label for="file_input" role="button"{{else}}button{{/if}}
+          id="add-message-attachment-button"
           class="ui-button ui-widget ui-state-default ui-corner-all attach-file"
           type="button"
           title="{{#t "titles.add_attachment"}}Add an attachment{{/t}}">

app/views/jst/conversations/contextMessage.handlebars

@@ -2,7 +2,9 @@
 <div class="context-author pull-left">{{author.name}}</div>
 <div class="pull-right">
   <span class="context-date">{{friendlyDatetime created_at}}</span>
-  <a class="icon-x delete-btn" href="#" aria-label="{{#t "delete_message"}}Delete message{{/t}}"></a>
+  <button type="button" class="delete-btn" href="#" aria-label="{{#t "delete_message"}}Delete message{{/t}}">
+    <i class="icon-end"></i>
+  </button>
   </ul>
 </div>
 <div class="context-body" aria-live="polite">