From 8730bd8b94848e32b52082fe6d9bbadcc1ca4e78 Mon Sep 17 00:00:00 2001
From: Ganesh Pawar <pawarg256@gmail.com>
Date: Sat, 23 Oct 2021 22:10:05 +0530
Subject: [PATCH] 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 e5d04485057cdb3ee330106075f0c266572967a7.
---
 static/js/avatar.js                               | 2 +-
 static/styles/image_upload_widget.css             | 9 +++++----
 static/templates/settings/image_upload_widget.hbs | 4 ++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/static/js/avatar.js b/static/js/avatar.js
index 7bc9a70833..dfb7fd916d 100644
--- a/static/js/avatar.js
+++ b/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() {
diff --git a/static/styles/image_upload_widget.css b/static/styles/image_upload_widget.css
index 7fcfc0789b..8f182602ba 100644
--- a/static/styles/image_upload_widget.css
+++ b/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;
         }
diff --git a/static/templates/settings/image_upload_widget.hbs b/static/templates/settings/image_upload_widget.hbs
index 30f175ce51..30ef46e8fe 100644
--- a/static/templates/settings/image_upload_widget.hbs
+++ b/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>