From e5d04485057cdb3ee330106075f0c266572967a7 Mon Sep 17 00:00:00 2001
From: Cynthia Lin <15116870+synicalsyntax@users.noreply.github.com>
Date: Sat, 6 Jul 2019 03:39:11 +0000
Subject: [PATCH] user settings: Improve accessibility for new delete profile
 picture button.

---
 static/js/avatar.js                                   | 2 +-
 static/styles/settings.scss                           | 4 ++--
 static/templates/settings/account-settings.handlebars | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/static/js/avatar.js b/static/js/avatar.js
index f9de36c971..a4d0207fc4 100644
--- a/static/js/avatar.js
+++ b/static/js/avatar.js
@@ -56,7 +56,7 @@ exports.build_user_avatar_widget = function (upload_function) {
         $("#user-avatar-source").hide();
     }
 
-    $("#user_avatar_delete_button").on('click', function (e) {
+    $("#user_avatar_delete_button").on('click keydown', function (e) {
         e.preventDefault();
         e.stopPropagation();
         channel.del({
diff --git a/static/styles/settings.scss b/static/styles/settings.scss
index 8960dd31d1..bd1268c3ad 100644
--- a/static/styles/settings.scss
+++ b/static/styles/settings.scss
@@ -1077,7 +1077,7 @@ input[type=checkbox].inline-block {
 
     #user_avatar_delete_button {
         cursor: pointer;
-        visibility: hidden;
+        opacity: 0;
         font-size: 3rem;
         position: absolute;
         top: 67px; // 31.5px + 5px + 30px
@@ -1109,7 +1109,7 @@ input[type=checkbox].inline-block {
         }
 
         #user_avatar_delete_button {
-            visibility: visible;
+            opacity: 1;
         }
 
         #user-avatar-source {
diff --git a/static/templates/settings/account-settings.handlebars b/static/templates/settings/account-settings.handlebars
index 7cbc53903c..5b6613bdaa 100644
--- a/static/templates/settings/account-settings.handlebars
+++ b/static/templates/settings/account-settings.handlebars
@@ -164,9 +164,9 @@
             <div class="inline-block">
                 <div id="user-settings-avatar">
                     <div id="user-avatar-block" style="background-image: url({{ page_params.avatar_url_medium }})" {{#if page_params.is_guest}} class="guest-avatar"{{/if}}/>
-                    <span id="user_avatar_delete_button"
+                    <span id="user_avatar_delete_button" aria-label="{{t 'Delete profile picture'}}" role="button" tabindex="0"
                       {{#unless page_params.is_admin}}{{#if page_params.realm_avatar_changes_disabled}}style="display:none"{{else}}{{#if page_params.server_avatar_changes_disabled}}style="display:none"{{/if}}{{/if}}{{/unless}}>
-                        ×
+                        &times;
                     </span>
                     <div id="user-avatar-source">
                         <a href="https://en.gravatar.com/" target="_blank">{{t "Avatar from Gravatar" }}</a>