diff options
Diffstat (limited to 'src/components/post_status_form')
| -rw-r--r-- | src/components/post_status_form/post_status_form.js | 4 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 80 |
2 files changed, 51 insertions, 33 deletions
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index eb55cfcc..b75fee69 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -8,6 +8,7 @@ import Gallery from 'src/components/gallery/gallery.vue' import StatusContent from '../status_content/status_content.vue' import fileTypeService from '../../services/file_type/file_type.service.js' import { findOffset } from '../../services/offset_finder/offset_finder.service.js' +import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js' import { reject, map, uniqBy, debounce } from 'lodash' import suggestor from '../emoji_input/suggestor.js' import { mapGetters, mapState } from 'vuex' @@ -629,6 +630,9 @@ const PostStatusForm = { }, openProfileTab () { this.$store.dispatch('openSettingsModalTab', 'profile') + }, + propsToNative (props) { + return propsToNative(props) } } } diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index c51639db..86c1f907 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -30,6 +30,9 @@ <span>{{ $t('post_status.scope_notice.public') }}</span> <a class="fa-scale-110 fa-old-padding dismiss" + :title="$t('post_status.scope_notice_dismiss')" + role="button" + tabindex="0" @click.prevent="dismissScopeNotice()" > <FAIcon icon="times" /> @@ -42,6 +45,9 @@ <span>{{ $t('post_status.scope_notice.unlisted') }}</span> <a class="fa-scale-110 fa-old-padding dismiss" + :title="$t('post_status.scope_notice_dismiss')" + role="button" + tabindex="0" @click.prevent="dismissScopeNotice()" > <FAIcon icon="times" /> @@ -54,6 +60,9 @@ <span>{{ $t('post_status.scope_notice.private') }}</span> <a class="fa-scale-110 fa-old-padding dismiss" + :title="$t('post_status.scope_notice_dismiss')" + role="button" + tabindex="0" @click.prevent="dismissScopeNotice()" > <FAIcon icon="times" /> @@ -124,14 +133,17 @@ :suggest="emojiSuggestor" class="form-control" > - <input - v-model="newStatus.spoilerText" - type="text" - :placeholder="$t('post_status.content_warning')" - :disabled="posting && !optimisticPosting" - size="1" - class="form-post-subject" - > + <template #default="inputProps"> + <input + v-model="newStatus.spoilerText" + type="text" + :placeholder="$t('post_status.content_warning')" + :disabled="posting && !optimisticPosting" + v-bind="propsToNative(inputProps)" + size="1" + class="form-post-subject" + > + </template> </EmojiInput> <EmojiInput ref="emoji-input" @@ -148,29 +160,32 @@ @sticker-upload-failed="uploadFailed" @shown="handleEmojiInputShow" > - <textarea - ref="textarea" - v-model="newStatus.status" - :placeholder="placeholder || $t('post_status.default')" - rows="1" - cols="1" - :disabled="posting && !optimisticPosting" - class="form-post-body" - :class="{ 'scrollable-form': !!maxHeight }" - @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)" - @keydown.meta.enter="postStatus($event, newStatus)" - @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)" - @input="resize" - @compositionupdate="resize" - @paste="paste" - /> - <p - v-if="hasStatusLengthLimit" - class="character-counter faint" - :class="{ error: isOverLengthLimit }" - > - {{ charactersLeft }} - </p> + <template #default="inputProps"> + <textarea + ref="textarea" + v-model="newStatus.status" + :placeholder="placeholder || $t('post_status.default')" + rows="1" + cols="1" + :disabled="posting && !optimisticPosting" + class="form-post-body" + :class="{ 'scrollable-form': !!maxHeight }" + v-bind="propsToNative(inputProps)" + @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)" + @keydown.meta.enter="postStatus($event, newStatus)" + @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)" + @input="resize" + @compositionupdate="resize" + @paste="paste" + /> + <p + v-if="hasStatusLengthLimit" + class="character-counter faint" + :class="{ error: isOverLengthLimit }" + > + {{ charactersLeft }} + </p> + </template> </EmojiInput> <div v-if="!disableScopeSelector" @@ -193,6 +208,7 @@ id="post-content-type" v-model="newStatus.contentType" class="form-control" + :attrs="{ 'aria-label': $t('post_status.content_type_selection') }" > <option v-for="postFormat in postFormats" @@ -265,12 +281,10 @@ > {{ $t('post_status.post') }} </button> - <!-- touchstart is used to keep the OSK at the same position after a message send --> <button v-else :disabled="uploadingFiles || disableSubmit" class="btn button-default" - @touchstart.stop.prevent="postStatus($event, newStatus)" @click.stop.prevent="postStatus($event, newStatus)" > {{ $t('post_status.post') }} |