user settings: Improve accessibility for new delete profile picture button.

This commit is contained in:
Cynthia Lin 2019-07-06 03:39:11 +00:00 committed by Tim Abbott
parent ffaa0ee120
commit e5d0448505
3 changed files with 5 additions and 5 deletions

View File

@ -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({

View File

@ -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 {

View File

@ -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>