hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make all emoji inputs screen-reader-friendly

Browse source
This commit is contained in:
tusooa 2023-01-21 01:28:43 -05:00
commit 72cb9e8bdb
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
6 changed files with 58 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/post_status_form/post_status_form.js
View file

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

25
src/components/post_status_form/post_status_form.vue
View file

@ -124,14 +124,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"
@ -158,11 +161,7 @@
:disabled="posting && !optimisticPosting"
class="form-post-body"
:class="{ 'scrollable-form': !!maxHeight }"
v-bind="inputProps"
:aria-owns="inputProps.ariaOwns"
:aria-autocomplete="inputProps.ariaAutocomplete"
:aria-activedescendant="inputProps.ariaActiveDescendant"
:aria-expanded="inputProps.ariaExpanded"
v-bind="propsToNative(inputProps)"
@keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
@keydown.meta.enter="postStatus($event, newStatus)"
@keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"