Infra-Mirrors/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-08-16 10:11:14 -04:00
Code Issues Projects Releases Packages Wiki Activity

accessible ActionSelect/ ActionInput (#4132)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

22
src/components/ActionSelect.vue
View file

@ -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