From 9bb2e8d3dea7c19011bedcebdfc408237899ae31 Mon Sep 17 00:00:00 2001
From: "Jan C. Borchardt" <hey@jancborchardt.net>
Date: Thu, 15 Apr 2021 13:22:53 +0200
Subject: [PATCH] Fix accessibility of profile picture section

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
---
 apps/settings/css/settings.scss                           | 3 +++
 apps/settings/js/settings/personalInfo.js                 | 7 +++++++
 .../templates/settings/personal/personal.info.php         | 8 ++++----
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index cc798868c53..e5d9071d5e9 100644
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -55,6 +55,9 @@ input {
 #uploadavatarbutton, #selectavatar, #removeavatar {
 	padding: 21px;
 }
+#selectavatar, #removeavatar {
+	vertical-align: top;
+}
 
 .jcrop-holder {
 	z-index: 500;
diff --git a/apps/settings/js/settings/personalInfo.js b/apps/settings/js/settings/personalInfo.js
index e71f4840123..f53e120dcf5 100644
--- a/apps/settings/js/settings/personalInfo.js
+++ b/apps/settings/js/settings/personalInfo.js
@@ -306,6 +306,13 @@ window.addEventListener('DOMContentLoaded', function () {
 
 	$('#uploadavatar').fileupload(uploadparms);
 
+	// Trigger upload action also with keyboard navigation on enter
+	$('#uploadavatarbutton').on('keyup', function(event) {
+		if (event.key === ' ' || event.key === 'Enter') {
+			$('#uploadavatar').trigger('click');
+		}
+	});
+
 	$('#selectavatar').click(function () {
 		OC.dialogs.filepicker(
 			t('settings', "Select a profile picture"),
diff --git a/apps/settings/templates/settings/personal/personal.info.php b/apps/settings/templates/settings/personal/personal.info.php
index d7505f37522..8bc7d9434a3 100644
--- a/apps/settings/templates/settings/personal/personal.info.php
+++ b/apps/settings/templates/settings/personal/personal.info.php
@@ -39,7 +39,7 @@ script('settings', [
 		<div>
 			<form id="avatarform" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
 				<h3>
-					<label><?php p($l->t('Profile picture')); ?></label>
+					<?php p($l->t('Profile picture')); ?>
 					<div class="federation-menu" tabindex="0" aria-label="<?php p($l->t('Change privacy level of profile picture')); ?>">
 						<span class="icon-federation-menu icon-password">
 							<span class="icon-triangle-s"></span>
@@ -50,9 +50,9 @@ script('settings', [
 					<div class="avatardiv"></div>
 					<div class="warning hidden"></div>
 					<?php if ($_['avatarChangeSupported']): ?>
-						<label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>"></label>
-						<div class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></div>
-						<div class="hidden button icon-delete svg" id="removeavatar" title="<?php p($l->t('Remove image')); ?>"></div>
+						<label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>" tabindex="0"></label>
+						<button class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></button>
+						<button class="hidden button icon-delete svg" id="removeavatar" title="<?php p($l->t('Remove image')); ?>"></button>
 						<input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield" accept="image/*">
 						<p><em><?php p($l->t('png or jpg, max. 20 MB')); ?></em></p>
 					<?php else: ?>