diff options
| author | HJ <30-hj@users.noreply.git.pleroma.social> | 2023-01-28 23:04:59 +0000 |
|---|---|---|
| committer | HJ <30-hj@users.noreply.git.pleroma.social> | 2023-01-28 23:04:59 +0000 |
| commit | f229c4a106b574e8a3de38fe06ef84dc11493fad (patch) | |
| tree | 54e12de554f5203e5b39b69fc8a52f3d54d36653 /src/components/emoji_input/emoji_input.vue | |
| parent | af220924723676d79431ab9acc03bd4de082003d (diff) | |
| parent | 5f12c3ae76b82afd2040f2bcc83bf2eda5c4ff91 (diff) | |
Merge branch 'from/develop/tusooa/autocomplete-accessibility' into 'develop'
Autocomplete accessibility
Closes #1219
See merge request pleroma/pleroma-fe!1771
Diffstat (limited to 'src/components/emoji_input/emoji_input.vue')
| -rw-r--r-- | src/components/emoji_input/emoji_input.vue | 21 |
1 files changed, 20 insertions, 1 deletions
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index ccba0393..7f9ecc99 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -4,12 +4,19 @@ class="emoji-input" :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? --> <div ref="hiddenOverlay" class="hidden-overlay" :style="overlayStyle" + :aria-hidden="true" > <span>{{ preText }}</span> <span @@ -18,11 +25,16 @@ >x</span> <span>{{ postText }}</span> </div> + <screen-reader-notice + ref="screenReaderNotice" + aria-live="assertive" + /> <template v-if="enableEmojiPicker"> <button v-if="!hideEmojiButton" class="button-unstyled emoji-picker-icon" type="button" + :title="$t('emoji.add_emoji')" @click.prevent="togglePicker" > <FAIcon :icon="['far', 'smile-beam']" /> @@ -43,17 +55,24 @@ ref="suggestorPopover" class="autocomplete-panel" placement="bottom" + :trigger-attrs="{ 'aria-hidden': true }" > <template #content> <div + :id="suggestionListId" ref="panel-body" class="autocomplete-panel-body" + role="listbox" > <div v-for="(suggestion, index) in suggestions" + :id="suggestionItemId(index)" :key="index" class="autocomplete-item" + role="option" :class="{ highlighted: index === highlighted }" + :aria-label="autoCompleteItemLabel(suggestion)" + :aria-selected="index === highlighted" @click.stop.prevent="onClick($event, suggestion)" > <span class="image"> |