From 4db7f07421a6dc49f07dee9140a024ef5195a934 Mon Sep 17 00:00:00 2001 From: tusooa Date: Thu, 24 Nov 2022 23:26:31 -0500 Subject: [PATCH 01/40] Make autocomplete items buttons --- src/components/emoji_input/emoji_input.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index ccba0393..6df2cebe 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -53,6 +53,7 @@ v-for="(suggestion, index) in suggestions" :key="index" class="autocomplete-item" + role="button" :class="{ highlighted: index === highlighted }" @click.stop.prevent="onClick($event, suggestion)" > From 6235af4592c52a657415ffae772bd83ec106bc13 Mon Sep 17 00:00:00 2001 From: tusooa Date: Sat, 21 Jan 2023 01:07:07 -0500 Subject: [PATCH 02/40] Make screenreaders read out autocomplete results --- src/components/emoji_input/emoji_input.js | 53 ++++++++++++------- src/components/emoji_input/emoji_input.vue | 19 ++++++- .../post_status_form/post_status_form.vue | 53 +++++++++++-------- .../screen_reader_notice.js | 21 ++++++++ .../screen_reader_notice.vue | 21 ++++++++ src/i18n/en.json | 3 +- 6 files changed, 126 insertions(+), 44 deletions(-) create mode 100644 src/components/screen_reader_notice/screen_reader_notice.js create mode 100644 src/components/screen_reader_notice/screen_reader_notice.vue diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index ba5f7552..020e9fde 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -1,6 +1,7 @@ import Completion from '../../services/completion/completion.js' import EmojiPicker from '../emoji_picker/emoji_picker.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 { take } from 'lodash' import { findOffset } from '../../services/offset_finder/offset_finder.service.js' @@ -109,9 +110,10 @@ const EmojiInput = { }, data () { return { + randomSeed: `${Math.random()}`.replace('.', '-'), input: undefined, caretEl: undefined, - highlighted: 0, + highlighted: -1, caret: 0, focused: false, blurTimeout: null, @@ -125,7 +127,8 @@ const EmojiInput = { components: { Popover, EmojiPicker, - UnicodeDomainIndicator + UnicodeDomainIndicator, + ScreenReaderNotice }, computed: { padEmoji () { @@ -203,6 +206,12 @@ const EmojiInput = { top: this.input.scrollTop, left: this.input.scrollLeft }) + }, + suggestionListId () { + return `suggestions-${this.randomSeed}` + }, + suggestionItemId () { + return (index) => `suggestion-item-${index}-${this.randomSeed}` } }, mounted () { @@ -278,6 +287,10 @@ const EmojiInput = { ...rest, img: imageUrl || '' })) + this.$refs.screenReaderNotice.announce( + this.$tc('tool_tip.autocomplete_available', + this.suggestions.length, + { number: this.suggestions.length })) } }, methods: { @@ -374,27 +387,24 @@ const EmojiInput = { }, cycleBackward (e) { const len = this.suggestions.length || 0 - if (len > 1) { - this.highlighted -= 1 - if (this.highlighted < 0) { - this.highlighted = this.suggestions.length - 1 - } - e.preventDefault() - } else { - this.highlighted = 0 + + this.highlighted -= 1 + if (this.highlighted === -1) { + this.input.focus() + } else if (this.highlighted < -1) { + this.highlighted = len - 1 } + e.preventDefault() }, cycleForward (e) { const len = this.suggestions.length || 0 - if (len > 1) { - this.highlighted += 1 - if (this.highlighted >= len) { - this.highlighted = 0 - } - e.preventDefault() - } else { - this.highlighted = 0 + + this.highlighted += 1 + if (this.highlighted >= len) { + this.highlighted = -1 + this.input.focus() } + e.preventDefault() }, scrollIntoView () { const rootRef = this.$refs.picker.$el @@ -540,6 +550,13 @@ const EmojiInput = { }) }, resize () { + }, + autoCompleteItemLabel (suggestion) { + if (suggestion.user) { + return suggestion.displayText + ' ' + suggestion.detailText + } else { + return this.maybeLocalizedEmojiName(suggestion) + } } } } diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index 6df2cebe..4a7b0fa8 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -4,7 +4,13 @@ class="emoji-input" :class="{ 'with-picker': !hideEmojiButton }" > - +
x {{ postText }}
+