delete avatar: Improve accessibility by converting <span> to <button>.

Since it's a button, it doesn't need the "keydown" event. So,
removed it. This fixes the bug where pressing any key while the
avatar's delete_button was in focus would pop up the modal.
It was introduced in e5d0448505.

static/js/avatar.js

@@ -74,7 +74,7 @@ export function build_user_avatar_widget(upload_function) {
         $("#user-avatar-source").hide();
     }
 
-    $("#user-avatar-upload-widget .image-delete-button").on("click keydown", (e) => {
+    $("#user-avatar-upload-widget .image-delete-button").on("click", (e) => {
         e.preventDefault();
         e.stopPropagation();
         function delete_user_avatar() {

static/styles/image_upload_widget.css

@@ -24,9 +24,12 @@
     }
 
     .image-delete-button {
+        background: none;
+        border: none;
         cursor: pointer;
         color: hsl(0, 0%, 75%);
         opacity: 0;
+        padding: 3px 0;
         position: absolute;
         font-size: 2rem;
         top: 10px;
@@ -35,7 +38,9 @@
         line-height: 20px;
     }
 
+    .image-delete-button:focus,
     .image-delete-button:hover {
+        opacity: 1;
         color: hsl(0, 0%, 100%);
     }
 
@@ -87,10 +92,6 @@
     }
 
     &:hover {
-        .image-delete-button {
-            opacity: 1;
-        }
-
         .image-upload-text {
             visibility: visible;
         }

static/templates/settings/image_upload_widget.hbs

@@ -1,9 +1,9 @@
 <div id ="{{widget}}-upload-widget" class="inline-block image_upload_widget">
     <div class="image_upload_button {{#unless is_editable_by_current_user}}hide{{/unless}}">
         <div class="image-upload-background"></div>
-        <span class="image-delete-button" aria-label="{{ delete_text }}" role="button" tabindex="0">
+        <button class="image-delete-button" aria-label="{{ delete_text }}" role="button" tabindex="0">
             &times;
-        </span>
+        </button>
         <span class="image-delete-text" aria-label="{{ delete_text }}" tabindex="0">
             {{ delete_text }}
         </span>