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

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

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/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()">