made sure that the ActionSelect'or has correct accessibiltiy tags

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

src/lang/en.json

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

src/pages/EditMonitor.vue

@@ -288,6 +288,8 @@
                                 <div class="mb-3">
                                     <label for="docker-host" class="form-label">{{ $t("Docker Host") }}</label>
                                     <ActionSelect
+                                        id="docker-host"
+                                        :aria-label="$t('openModalTo', $t('Setup Docker Host'))"
                                         v-model="monitor.docker_host"
                                         :options="dockerHostOptionsList"
                                         :disabled="$root.dockerHostList == null || $root.dockerHostList.length === 0"
@@ -498,8 +500,10 @@
 
                             <!-- 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"
+                                    :aria-label="$t('openModalTo', 'setup a new monitor group')"
                                     v-model="monitor.parent"
                                     :options="parentMonitorOptionsList"
                                     :disabled="sortedGroupMonitorList.length === 0 && draftGroupName == null"