From e3396251a8d7c1ab22e073addc6a8b01deb15671 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Fri, 1 Dec 2023 08:05:01 +0100
Subject: [PATCH] accessible domain selector (#4133)

* made the status domain selector more accessible

* linting fix

* implemented the suggested changes

---------

Co-authored-by: Louis Lam <louislam@users.noreply.github.com>
---
 src/lang/en.json         | 2 ++
 src/pages/StatusPage.vue | 8 ++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/lang/en.json b/src/lang/en.json
index ce150b21..85825d7d 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -660,6 +660,8 @@
     "Uptime Kuma URL": "Uptime Kuma URL",
     "setup a new monitor group": "setup a new monitor group",
     "openModalTo": "open modal to {0}",
+    "Add a domain": "Add a domain",
+    "Remove domain": "Remove domain '{0}'",
     "Icon Emoji": "Icon Emoji",
     "signalImportant": "IMPORTANT: You cannot mix groups and numbers in recipients!",
     "aboutWebhooks": "More info about Webhooks on: {0}",
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 41b420ca..121b8622 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -69,13 +69,17 @@
                 <div class="my-3">
                     <label class="form-label">
                         {{ $t("Domain Names") }}
-                        <font-awesome-icon icon="plus-circle" class="btn-add-domain action text-primary" @click="addDomainField" />
+                        <button class="p-0 bg-transparent border-0" :aria-label="$t('Add a domain')" @click="addDomainField">
+                            <font-awesome-icon icon="plus-circle" class="action text-primary" />
+                        </button>
                     </label>
 
                     <ul class="list-group domain-name-list">
                         <li v-for="(domain, index) in config.domainNameList" :key="index" class="list-group-item">
                             <input v-model="config.domainNameList[index]" type="text" class="no-bg domain-input" placeholder="example.com" />
-                            <font-awesome-icon icon="times" class="action remove ms-2 me-3 text-danger" @click="removeDomain(index)" />
+                            <button class="p-0 bg-transparent border-0" :aria-label="$t('Remove domain', [ domain ])" @click="removeDomain(index)">
+                                <font-awesome-icon icon="times" class="action remove ms-2 me-3 text-danger" />
+                            </button>
                         </li>
                     </ul>
                 </div>