Make screenreaders read out autocomplete results
This commit is contained in:
parent
4db7f07421
commit
6235af4592
|
@ -1,6 +1,7 @@
|
||||||
import Completion from '../../services/completion/completion.js'
|
import Completion from '../../services/completion/completion.js'
|
||||||
import EmojiPicker from '../emoji_picker/emoji_picker.vue'
|
import EmojiPicker from '../emoji_picker/emoji_picker.vue'
|
||||||
import Popover from 'src/components/popover/popover.vue'
|
import Popover from 'src/components/popover/popover.vue'
|
||||||
|
import ScreenReaderNotice from 'src/components/screen_reader_notice/screen_reader_notice.vue'
|
||||||
import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
|
import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
|
||||||
import { take } from 'lodash'
|
import { take } from 'lodash'
|
||||||
import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
|
import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
|
||||||
|
@ -109,9 +110,10 @@ const EmojiInput = {
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
randomSeed: `${Math.random()}`.replace('.', '-'),
|
||||||
input: undefined,
|
input: undefined,
|
||||||
caretEl: undefined,
|
caretEl: undefined,
|
||||||
highlighted: 0,
|
highlighted: -1,
|
||||||
caret: 0,
|
caret: 0,
|
||||||
focused: false,
|
focused: false,
|
||||||
blurTimeout: null,
|
blurTimeout: null,
|
||||||
|
@ -125,7 +127,8 @@ const EmojiInput = {
|
||||||
components: {
|
components: {
|
||||||
Popover,
|
Popover,
|
||||||
EmojiPicker,
|
EmojiPicker,
|
||||||
UnicodeDomainIndicator
|
UnicodeDomainIndicator,
|
||||||
|
ScreenReaderNotice
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
padEmoji () {
|
padEmoji () {
|
||||||
|
@ -203,6 +206,12 @@ const EmojiInput = {
|
||||||
top: this.input.scrollTop,
|
top: this.input.scrollTop,
|
||||||
left: this.input.scrollLeft
|
left: this.input.scrollLeft
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
suggestionListId () {
|
||||||
|
return `suggestions-${this.randomSeed}`
|
||||||
|
},
|
||||||
|
suggestionItemId () {
|
||||||
|
return (index) => `suggestion-item-${index}-${this.randomSeed}`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
@ -278,6 +287,10 @@ const EmojiInput = {
|
||||||
...rest,
|
...rest,
|
||||||
img: imageUrl || ''
|
img: imageUrl || ''
|
||||||
}))
|
}))
|
||||||
|
this.$refs.screenReaderNotice.announce(
|
||||||
|
this.$tc('tool_tip.autocomplete_available',
|
||||||
|
this.suggestions.length,
|
||||||
|
{ number: this.suggestions.length }))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -374,27 +387,24 @@ const EmojiInput = {
|
||||||
},
|
},
|
||||||
cycleBackward (e) {
|
cycleBackward (e) {
|
||||||
const len = this.suggestions.length || 0
|
const len = this.suggestions.length || 0
|
||||||
if (len > 1) {
|
|
||||||
this.highlighted -= 1
|
this.highlighted -= 1
|
||||||
if (this.highlighted < 0) {
|
if (this.highlighted === -1) {
|
||||||
this.highlighted = this.suggestions.length - 1
|
this.input.focus()
|
||||||
|
} else if (this.highlighted < -1) {
|
||||||
|
this.highlighted = len - 1
|
||||||
}
|
}
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
} else {
|
|
||||||
this.highlighted = 0
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
cycleForward (e) {
|
cycleForward (e) {
|
||||||
const len = this.suggestions.length || 0
|
const len = this.suggestions.length || 0
|
||||||
if (len > 1) {
|
|
||||||
this.highlighted += 1
|
this.highlighted += 1
|
||||||
if (this.highlighted >= len) {
|
if (this.highlighted >= len) {
|
||||||
this.highlighted = 0
|
this.highlighted = -1
|
||||||
|
this.input.focus()
|
||||||
}
|
}
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
} else {
|
|
||||||
this.highlighted = 0
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
scrollIntoView () {
|
scrollIntoView () {
|
||||||
const rootRef = this.$refs.picker.$el
|
const rootRef = this.$refs.picker.$el
|
||||||
|
@ -540,6 +550,13 @@ const EmojiInput = {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
resize () {
|
resize () {
|
||||||
|
},
|
||||||
|
autoCompleteItemLabel (suggestion) {
|
||||||
|
if (suggestion.user) {
|
||||||
|
return suggestion.displayText + ' ' + suggestion.detailText
|
||||||
|
} else {
|
||||||
|
return this.maybeLocalizedEmojiName(suggestion)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,13 @@
|
||||||
class="emoji-input"
|
class="emoji-input"
|
||||||
:class="{ 'with-picker': !hideEmojiButton }"
|
:class="{ 'with-picker': !hideEmojiButton }"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot
|
||||||
|
:id="'textbox-' + randomSeed"
|
||||||
|
:aria-owns="suggestionListId"
|
||||||
|
aria-autocomplete="both"
|
||||||
|
:aria-expanded="showSuggestions"
|
||||||
|
:aria-activedescendant="(!showSuggestions || highlighted === -1) ? '' : suggestionItemId(highlighted)"
|
||||||
|
/>
|
||||||
<!-- TODO: make the 'x' disappear if at the end maybe? -->
|
<!-- TODO: make the 'x' disappear if at the end maybe? -->
|
||||||
<div
|
<div
|
||||||
ref="hiddenOverlay"
|
ref="hiddenOverlay"
|
||||||
|
@ -18,6 +24,10 @@
|
||||||
>x</span>
|
>x</span>
|
||||||
<span>{{ postText }}</span>
|
<span>{{ postText }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<screen-reader-notice
|
||||||
|
ref="screenReaderNotice"
|
||||||
|
aria-live="assertive"
|
||||||
|
/>
|
||||||
<template v-if="enableEmojiPicker">
|
<template v-if="enableEmojiPicker">
|
||||||
<button
|
<button
|
||||||
v-if="!hideEmojiButton"
|
v-if="!hideEmojiButton"
|
||||||
|
@ -46,15 +56,20 @@
|
||||||
>
|
>
|
||||||
<template #content>
|
<template #content>
|
||||||
<div
|
<div
|
||||||
|
:id="suggestionListId"
|
||||||
ref="panel-body"
|
ref="panel-body"
|
||||||
class="autocomplete-panel-body"
|
class="autocomplete-panel-body"
|
||||||
|
role="listbox"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-for="(suggestion, index) in suggestions"
|
v-for="(suggestion, index) in suggestions"
|
||||||
|
:id="suggestionItemId(index)"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="autocomplete-item"
|
class="autocomplete-item"
|
||||||
role="button"
|
role="option"
|
||||||
:class="{ highlighted: index === highlighted }"
|
:class="{ highlighted: index === highlighted }"
|
||||||
|
:aria-label="autoCompleteItemLabel(suggestion)"
|
||||||
|
:aria-selected="index === highlighted"
|
||||||
@click.stop.prevent="onClick($event, suggestion)"
|
@click.stop.prevent="onClick($event, suggestion)"
|
||||||
>
|
>
|
||||||
<span class="image">
|
<span class="image">
|
||||||
|
|
|
@ -148,6 +148,7 @@
|
||||||
@sticker-upload-failed="uploadFailed"
|
@sticker-upload-failed="uploadFailed"
|
||||||
@shown="handleEmojiInputShow"
|
@shown="handleEmojiInputShow"
|
||||||
>
|
>
|
||||||
|
<template #default="inputProps">
|
||||||
<textarea
|
<textarea
|
||||||
ref="textarea"
|
ref="textarea"
|
||||||
v-model="newStatus.status"
|
v-model="newStatus.status"
|
||||||
|
@ -157,6 +158,11 @@
|
||||||
:disabled="posting && !optimisticPosting"
|
:disabled="posting && !optimisticPosting"
|
||||||
class="form-post-body"
|
class="form-post-body"
|
||||||
:class="{ 'scrollable-form': !!maxHeight }"
|
:class="{ 'scrollable-form': !!maxHeight }"
|
||||||
|
v-bind="inputProps"
|
||||||
|
:aria-owns="inputProps.ariaOwns"
|
||||||
|
:aria-autocomplete="inputProps.ariaAutocomplete"
|
||||||
|
:aria-activedescendant="inputProps.ariaActiveDescendant"
|
||||||
|
:aria-expanded="inputProps.ariaExpanded"
|
||||||
@keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
|
@keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
|
||||||
@keydown.meta.enter="postStatus($event, newStatus)"
|
@keydown.meta.enter="postStatus($event, newStatus)"
|
||||||
@keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
|
@keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
|
||||||
|
@ -171,6 +177,7 @@
|
||||||
>
|
>
|
||||||
{{ charactersLeft }}
|
{{ charactersLeft }}
|
||||||
</p>
|
</p>
|
||||||
|
</template>
|
||||||
</EmojiInput>
|
</EmojiInput>
|
||||||
<div
|
<div
|
||||||
v-if="!disableScopeSelector"
|
v-if="!disableScopeSelector"
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
const ScreenReaderNotice = {
|
||||||
|
props: {
|
||||||
|
ariaLive: {
|
||||||
|
type: String,
|
||||||
|
defualt: 'assertive'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
currentText: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
announce (text) {
|
||||||
|
this.currentText = text
|
||||||
|
setTimeout(() => { this.currentText = '' }, 1000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ScreenReaderNotice
|
|
@ -0,0 +1,21 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="screen-reader-text"
|
||||||
|
:aria-live="ariaLive"
|
||||||
|
>
|
||||||
|
{{ currentText }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./screen_reader_notice.js"></script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.screen-reader-text {
|
||||||
|
display: block;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -996,7 +996,8 @@
|
||||||
"reject_follow_request": "Reject follow request",
|
"reject_follow_request": "Reject follow request",
|
||||||
"bookmark": "Bookmark",
|
"bookmark": "Bookmark",
|
||||||
"toggle_expand": "Expand or collapse notification to show post in full",
|
"toggle_expand": "Expand or collapse notification to show post in full",
|
||||||
"toggle_mute": "Expand or collapse notification to reveal muted content"
|
"toggle_mute": "Expand or collapse notification to reveal muted content",
|
||||||
|
"autocomplete_available": "{number} result is available | {number} results are available"
|
||||||
},
|
},
|
||||||
"upload": {
|
"upload": {
|
||||||
"error": {
|
"error": {
|
||||||
|
|
Loading…
Reference in New Issue