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
GitHub
parent
9fb95fe95e
commit
9c9a086788
|
|
@ -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" ],
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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()">
|
||||
|
|
|
|||
|
|
@ -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}",
|
||||
|
|
|
|||
|
|
@ -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'"
|
||||
|
|
|
|||
Loading…
Reference in New Issue