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

@@ -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}",

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>