accessible `ActionSelect`/ `ActionInput` (#4132)

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

* fixed linting error

* improved the ActionInputs accessibility
This commit is contained in:
Frank Elsinga 2023-12-01 07:34:37 +01:00 committed by GitHub
parent 9fb95fe95e
commit 9c9a086788
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 39 additions and 10 deletions

View File

@ -8,9 +8,9 @@
:placeholder="placeholder" :placeholder="placeholder"
:disabled="!enabled" :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" /> <font-awesome-icon :icon="icon" />
</a> </button>
</div> </div>
</template> </template>
@ -66,6 +66,13 @@ export default {
action: { action: {
type: Function, type: Function,
default: () => {}, default: () => {},
},
/**
* The aria-label of the action button
*/
actionAriaLabel: {
type: String,
required: true,
} }
}, },
emits: [ "update:modelValue" ], emits: [ "update:modelValue" ],

View File

@ -1,11 +1,11 @@
<template> <template>
<div class="input-group mb-3"> <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> <option v-for="option in options" :key="option" :value="option.value" :disabled="option.disabled">{{ option.label }}</option>
</select> </select>
<a class="btn btn-outline-primary" :class="{ disabled: actionDisabled }" @click="action()"> <button class="btn btn-outline-primary" :class="{ disabled: actionDisabled }" :aria-label="actionAriaLabel" @click="action()">
<font-awesome-icon :icon="icon" /> <font-awesome-icon :icon="icon" aria-hidden="true" />
</a> </button>
</div> </div>
</template> </template>
@ -20,6 +20,13 @@ export default {
type: Array, type: Array,
default: () => [], 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. * The value of the select field.
*/ */
@ -51,6 +58,13 @@ export default {
type: Function, type: Function,
default: () => {}, default: () => {},
}, },
/**
* The aria-label of the action button
*/
actionAriaLabel: {
type: String,
required: true,
},
/** /**
* Whether the action button is disabled. * Whether the action button is disabled.
* @example true * @example true

View File

@ -27,13 +27,13 @@
<div class="mt-1 mb-3 ps-2 cert-exp-days col-12 col-xl-6"> <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"> <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> <span>{{ day }} {{ $tc("day", day) }}</span>
<button type="button" class="btn-rm-expiry btn btn-outline-danger ms-2 py-1" @click="removeExpiryNotifDay(day)"> <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 class="" icon="times" /> <font-awesome-icon icon="times" />
</button> </button>
</div> </div>
</div> </div>
<div class="col-12 col-xl-6"> <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>
<div> <div>
<button class="btn btn-primary" type="button" @click="saveSettings()"> <button class="btn btn-primary" type="button" @click="saveSettings()">

View File

@ -334,6 +334,8 @@
"Fingerprint:": "Fingerprint:", "Fingerprint:": "Fingerprint:",
"No status pages": "No status pages", "No status pages": "No status pages",
"Domain Name Expiry Notification": "Domain Name Expiry Notification", "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", "Proxy": "Proxy",
"Date Created": "Date Created", "Date Created": "Date Created",
"Footer Text": "Footer Text", "Footer Text": "Footer Text",
@ -656,6 +658,8 @@
"Notify Channel": "Notify Channel", "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.", "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", "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", "Icon Emoji": "Icon Emoji",
"signalImportant": "IMPORTANT: You cannot mix groups and numbers in recipients!", "signalImportant": "IMPORTANT: You cannot mix groups and numbers in recipients!",
"aboutWebhooks": "More info about Webhooks on: {0}", "aboutWebhooks": "More info about Webhooks on: {0}",

View File

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