From 9c9a086788f76a88dc833348eaa0fb042e9623f0 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Fri, 1 Dec 2023 07:34:37 +0100
Subject: [PATCH] accessible `ActionSelect`/ `ActionInput` (#4132)

* made sure that the ActionSelect'or has correct accessibiltiy tags

* fixed linting error

* improved the ActionInputs accessibility
---
 src/components/ActionInput.vue            | 11 +++++++++--
 src/components/ActionSelect.vue           | 22 ++++++++++++++++++----
 src/components/settings/Notifications.vue |  6 +++---
 src/lang/en.json                          |  4 ++++
 src/pages/EditMonitor.vue                 |  6 +++++-
 5 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/components/ActionInput.vue b/src/components/ActionInput.vue
index fe3504b17..44c9e586f 100644
--- a/src/components/ActionInput.vue
+++ b/src/components/ActionInput.vue
@@ -8,9 +8,9 @@
             :placeholder="placeholder"
             :disabled="!enabled"
         >
-        <a class="btn btn-outline-primary" @click="action()">
+        <button class="btn btn-outline-primary" @click="action()" :aria-label="actionAriaLabel">
             <font-awesome-icon :icon="icon" />
-        </a>
+        </button>
     </div>
 </template>
 
@@ -66,6 +66,13 @@ export default {
         action: {
             type: Function,
             default: () => {},
+        },
+        /**
+         * The aria-label of the action button
+         */
+        actionAriaLabel: {
+            type: String,
+            required: true,
         }
     },
     emits: [ "update:modelValue" ],
diff --git a/src/components/ActionSelect.vue b/src/components/ActionSelect.vue
index 78daebc26..b163cd3a0 100644
--- a/src/components/ActionSelect.vue
+++ b/src/components/ActionSelect.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="input-group mb-3">
-        <select ref="select" v-model="model" class="form-select" :disabled="disabled" :required="required">
+        <select :id="id" ref="select" v-model="model" class="form-select" :disabled="disabled" :required="required">
             <option v-for="option in options" :key="option" :value="option.value" :disabled="option.disabled">{{ option.label }}</option>
         </select>
-        <a class="btn btn-outline-primary" :class="{ disabled: actionDisabled }" @click="action()">
-            <font-awesome-icon :icon="icon" />
-        </a>
+        <button class="btn btn-outline-primary" :class="{ disabled: actionDisabled }" :aria-label="actionAriaLabel" @click="action()">
+            <font-awesome-icon :icon="icon" aria-hidden="true" />
+        </button>
     </div>
 </template>
 
@@ -20,6 +20,13 @@ export default {
             type: Array,
             default: () => [],
         },
+        /**
+         * The id of the form which will be targeted by a <label for=..
+         */
+        id: {
+            type: String,
+            required: true,
+        },
         /**
          * The value of the select field.
          */
@@ -51,6 +58,13 @@ export default {
             type: Function,
             default: () => {},
         },
+        /**
+         * The aria-label of the action button
+         */
+        actionAriaLabel: {
+            type: String,
+            required: true,
+        },
         /**
          * Whether the action button is disabled.
          * @example true
diff --git a/src/components/settings/Notifications.vue b/src/components/settings/Notifications.vue
index 5459f6f9c..af1e92dee 100644
--- a/src/components/settings/Notifications.vue
+++ b/src/components/settings/Notifications.vue
@@ -27,13 +27,13 @@
             <div class="mt-1 mb-3 ps-2 cert-exp-days col-12 col-xl-6">
                 <div v-for="day in settings.tlsExpiryNotifyDays" :key="day" class="d-flex align-items-center justify-content-between cert-exp-day-row py-2">
                     <span>{{ day }} {{ $tc("day", day) }}</span>
-                    <button type="button" class="btn-rm-expiry btn btn-outline-danger ms-2 py-1" @click="removeExpiryNotifDay(day)">
-                        <font-awesome-icon class="" icon="times" />
+                    <button type="button" class="btn-rm-expiry btn btn-outline-danger ms-2 py-1" @click="removeExpiryNotifDay(day)" :aria-label="$t('Remove the expiry notification')">
+                        <font-awesome-icon icon="times" />
                     </button>
                 </div>
             </div>
             <div class="col-12 col-xl-6">
-                <ActionInput v-model="expiryNotifInput" :type="'number'" :placeholder="$t('day')" :icon="'plus'" :action="() => addExpiryNotifDay(expiryNotifInput)" />
+                <ActionInput v-model="expiryNotifInput" :type="'number'" :placeholder="$t('day')" :icon="'plus'" :action="() => addExpiryNotifDay(expiryNotifInput)" :action-aria-label="$t('Add a new expiry notification day')" />
             </div>
             <div>
                 <button class="btn btn-primary" type="button" @click="saveSettings()">
diff --git a/src/lang/en.json b/src/lang/en.json
index 9f2feba78..ce150b21a 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -334,6 +334,8 @@
     "Fingerprint:": "Fingerprint:",
     "No status pages": "No status pages",
     "Domain Name Expiry Notification": "Domain Name Expiry Notification",
+    "Add a new expiry notification day": "Add a new expiry notification day",
+    "Remove the expiry notification": "Remove the expiry notification day",
     "Proxy": "Proxy",
     "Date Created": "Date Created",
     "Footer Text": "Footer Text",
@@ -656,6 +658,8 @@
     "Notify Channel": "Notify Channel",
     "aboutNotifyChannel": "Notify channel will trigger a desktop or mobile notification for all members of the channel, whether their availability is set to active or away.",
     "Uptime Kuma URL": "Uptime Kuma URL",
+    "setup a new monitor group": "setup a new monitor group",
+    "openModalTo": "open modal to {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/EditMonitor.vue b/src/pages/EditMonitor.vue
index cb04f138e..92454a267 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -288,7 +288,9 @@
                                 <div class="mb-3">
                                     <label for="docker-host" class="form-label">{{ $t("Docker Host") }}</label>
                                     <ActionSelect
+                                        id="docker-host"
                                         v-model="monitor.docker_host"
+                                        :action-aria-label="$t('openModalTo', $t('Setup Docker Host'))"
                                         :options="dockerHostOptionsList"
                                         :disabled="$root.dockerHostList == null || $root.dockerHostList.length === 0"
                                         :icon="'plus'"
@@ -498,9 +500,11 @@
 
                             <!-- Parent Monitor -->
                             <div class="my-3">
-                                <label for="parent" class="form-label">{{ $t("Monitor Group") }}</label>
+                                <label for="monitorGroupSelector" class="form-label">{{ $t("Monitor Group") }}</label>
                                 <ActionSelect
+                                    id="monitorGroupSelector"
                                     v-model="monitor.parent"
+                                    :action-aria-label="$t('openModalTo', 'setup a new monitor group')"
                                     :options="parentMonitorOptionsList"
                                     :disabled="sortedGroupMonitorList.length === 0 && draftGroupName == null"
                                     :icon="'plus'"