From 4e61185136f9e971b7b9a85dfd06acb5cbcc57d5 Mon Sep 17 00:00:00 2001
From: Lars Kiesow <lkiesow@uos.de>
Date: Thu, 29 Dec 2022 21:29:11 +0100
Subject: [PATCH] Fix keyboard navigation in user settings

This patch makes sure that the option in the user settings are
accessible via keyboard navigation and that the labels, if users use a
screen reader, actually make sense.

This patch introduces new strings which need to be translated. Although
I did already provide a German translation.
---
 client/components/tables/UsersTable.vue | 6 +++---
 client/strings/de.json                  | 2 ++
 client/strings/en-us.json               | 2 ++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/components/tables/UsersTable.vue b/client/components/tables/UsersTable.vue
index a3b99ae8..2f19a7ba 100644
--- a/client/components/tables/UsersTable.vue
+++ b/client/components/tables/UsersTable.vue
@@ -35,13 +35,13 @@
             </ui-tooltip>
           </td>
           <td class="py-0">
-            <div class="w-full flex justify-center">
+            <div class="w-full flex justify-left">
               <!-- Dont show edit for non-root users -->
               <div v-if="user.type !== 'root' || userIsRoot" class="h-8 w-8 flex items-center justify-center text-white text-opacity-50 hover:text-opacity-100 cursor-pointer" @click.stop="editUser(user)">
-                <span class="material-icons text-base">edit</span>
+                <button :aria-label="$getString('ButtonUserEdit', [user.username])" class="material-icons text-base">edit</button>
               </div>
               <div v-show="user.type !== 'root'" class="h-8 w-8 flex items-center justify-center text-white text-opacity-50 hover:text-error cursor-pointer" @click.stop="deleteUserClick(user)">
-                <span class="material-icons text-base">delete</span>
+                <button :aria-label="$getString('ButtonUserDelete', [user.username])" class="material-icons text-base">delete</button>
               </div>
             </div>
           </td>
diff --git a/client/strings/de.json b/client/strings/de.json
index b307859c..ab043941 100644
--- a/client/strings/de.json
+++ b/client/strings/de.json
@@ -75,6 +75,8 @@
   "ButtonUploadBackup": "Sicherung hochladen",
   "ButtonUploadCover": "Titelbild hochladen",
   "ButtonUploadOPMLFile": "OPML-Datei hochladen",
+  "ButtonUserEdit": "Benutzer {0} editieren",
+  "ButtonUserDelete": "Benutzer {0} löschen",
   "ButtonViewAll": "Alles anzeigen",
   "ButtonYes": "Ja",
   "HeaderAccount": "Konto",
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index 7b986bf4..3b46b1e6 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -75,6 +75,8 @@
   "ButtonUploadBackup": "Upload Backup",
   "ButtonUploadCover": "Upload Cover",
   "ButtonUploadOPMLFile": "Upload OPML File",
+  "ButtonUserEdit": "Edit user {0}",
+  "ButtonUserDelete": "Delete user {0}",
   "ButtonViewAll": "View All",
   "ButtonYes": "Yes",
   "HeaderAccount": "Account",