sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases 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
parent 6235af4592
commit 72cb9e8bdb
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
6 changed files with 58 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/emoji_input/emoji_input.js
View file

@ -287,6 +287,7 @@ const EmojiInput = {
...rest,
img: imageUrl || ''
}))
this.highlighted = -1
this.$refs.screenReaderNotice.announce(
this.$tc('tool_tip.autocomplete_available',
this.suggestions.length,

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)"

4
src/components/settings_modal/tabs/profile_tab.js
View file

@ -12,6 +12,7 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
import BooleanSetting from '../helpers/boolean_setting.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
import localeService from 'src/services/locale/locale.service.js'
import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
@ -257,6 +258,9 @@ const ProfileTab = {
messageArgs: [error.message],
level: 'error'
})
},
propsToNative (props) {
return propsToNative(props)
}
}
}

46
src/components/settings_modal/tabs/profile_tab.vue
View file

@ -8,11 +8,14 @@
enable-emoji-picker
:suggest="emojiSuggestor"
>
<input
id="username"
v-model="newName"
class="name-changer"
>
<template #default="inputProps">
<input
id="username"
v-model="newName"
class="name-changer"
v-bind="propsToNative(inputProps)"
>
</template>
</EmojiInput>
<p>{{ $t('settings.bio') }}</p>
<EmojiInput
@ -20,10 +23,13 @@
enable-emoji-picker
:suggest="emojiUserSuggestor"
>
<textarea
v-model="newBio"
class="bio resize-height"
/>
<template #default="inputProps">
<textarea
v-model="newBio"
class="bio resize-height"
v-bind="propsToNative(inputProps)"
/>
</template>
</EmojiInput>
<p v-if="role === 'admin' || role === 'moderator'">
<Checkbox v-model="showRole">
@ -48,10 +54,13 @@
hide-emoji-button
:suggest="userSuggestor"
>
<input
v-model="newFields[i].name"
:placeholder="$t('settings.profile_fields.name')"
>
<template #default="inputProps">
<input
v-model="newFields[i].name"
:placeholder="$t('settings.profile_fields.name')"
v-bind="propsToNative(inputProps)"
>
</template>
</EmojiInput>
<EmojiInput
v-model="newFields[i].value"
@ -59,10 +68,13 @@
hide-emoji-button
:suggest="userSuggestor"
>
<input
v-model="newFields[i].value"
:placeholder="$t('settings.profile_fields.value')"
>
<template #default="inputProps">
<input
v-model="newFields[i].value"
:placeholder="$t('settings.profile_fields.value')"
v-bind="propsToNative(inputProps)"
>
</template>
</EmojiInput>
<button
class="delete-field button-unstyled -hover-highlight"

8
src/services/attributes_helper/attributes_helper.service.js Normal file
View file

@ -0,0 +1,8 @@
import { kebabCase } from 'lodash'
const propsToNative = props => Object.keys(props).reduce((acc, cur) => {
acc[kebabCase(cur)] = props[cur]
return acc
}, {})
export { propsToNative }