Browse Source

fix(files_sharing): add accessible labels in link share creation

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
pull/47807/head
Grigorii K. Shartsev 1 year ago
parent
commit
9348c1efba
  1. 30
      apps/files_sharing/src/components/SharingEntryLink.vue

30
apps/files_sharing/src/components/SharingEntryLink.vue

@ -59,38 +59,32 @@
</NcActionText> </NcActionText>
<!-- password --> <!-- password -->
<NcActionText v-if="pendingEnforcedPassword">
<template #icon>
<LockIcon :size="20" />
</template>
{{ t('files_sharing', 'Password protection (enforced)') }}
</NcActionText>
<NcActionCheckbox v-else-if="pendingPassword"
<NcActionCheckbox v-if="pendingPassword"
:checked.sync="isPasswordProtected" :checked.sync="isPasswordProtected"
:disabled="config.enforcePasswordForPublicLink || saving" :disabled="config.enforcePasswordForPublicLink || saving"
class="share-link-password-checkbox" class="share-link-password-checkbox"
@uncheck="onPasswordDisable"> @uncheck="onPasswordDisable">
{{ t('files_sharing', 'Password protection') }}
{{ config.enforcePasswordForPublicLink ? t('files_sharing', 'Password protection (enforced)') : t('files_sharing', 'Password protection') }}
</NcActionCheckbox> </NcActionCheckbox>
<NcActionInput v-if="pendingEnforcedPassword || share.password" <NcActionInput v-if="pendingEnforcedPassword || share.password"
class="share-link-password" class="share-link-password"
:label="t('files_sharing', 'Enter a password')"
:value.sync="share.password" :value.sync="share.password"
:disabled="saving" :disabled="saving"
:required="config.enableLinkPasswordByDefault || config.enforcePasswordForPublicLink" :required="config.enableLinkPasswordByDefault || config.enforcePasswordForPublicLink"
:minlength="isPasswordPolicyEnabled && config.passwordPolicy.minLength" :minlength="isPasswordPolicyEnabled && config.passwordPolicy.minLength"
icon=""
autocomplete="new-password" autocomplete="new-password"
@submit="onNewLinkShare"> @submit="onNewLinkShare">
{{ t('files_sharing', 'Enter a password') }}
<template #icon>
<LockIcon :size="20" />
</template>
</NcActionInput> </NcActionInput>
<!-- expiration date --> <!-- expiration date -->
<NcActionText v-if="pendingExpirationDate" icon="icon-calendar-dark">
{{ t('files_sharing', 'Expiration date (enforced)') }}
</NcActionText>
<NcActionInput v-if="pendingExpirationDate" <NcActionInput v-if="pendingExpirationDate"
class="share-link-expire-date" class="share-link-expire-date"
:label="t('files_sharing', 'Expiration date (enforced)')"
:disabled="saving" :disabled="saving"
:is-native-picker="true" :is-native-picker="true"
:hide-label="true" :hide-label="true"
@ -98,10 +92,10 @@
type="date" type="date"
:min="dateTomorrow" :min="dateTomorrow"
:max="maxExpirationDateEnforced" :max="maxExpirationDateEnforced"
@input="onExpirationChange">
<!-- let's not submit when picked, the user
might want to still edit or copy the password -->
{{ t('files_sharing', 'Enter a date') }}
@input="onExpirationChange /* let's not submit when picked, the user might want to still edit or copy the password */">
<template #icon>
<IconCalendarBlank :size="20" />
</template>
</NcActionInput> </NcActionInput>
<NcActionButton @click.prevent.stop="onNewLinkShare"> <NcActionButton @click.prevent.stop="onNewLinkShare">
@ -230,6 +224,7 @@ import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js' import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
import Tune from 'vue-material-design-icons/Tune.vue' import Tune from 'vue-material-design-icons/Tune.vue'
import IconCalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
import IconQr from 'vue-material-design-icons/Qrcode.vue' import IconQr from 'vue-material-design-icons/Qrcode.vue'
import ErrorIcon from 'vue-material-design-icons/Exclamation.vue' import ErrorIcon from 'vue-material-design-icons/Exclamation.vue'
import LockIcon from 'vue-material-design-icons/Lock.vue' import LockIcon from 'vue-material-design-icons/Lock.vue'
@ -263,6 +258,7 @@ export default {
NcDialog, NcDialog,
VueQrcode, VueQrcode,
Tune, Tune,
IconCalendarBlank,
IconQr, IconQr,
ErrorIcon, ErrorIcon,
LockIcon, LockIcon,

Loading…
Cancel
Save