commit: 84e2fa1a5e42badbbcd88b4eccc1d11abae231fb parent 3781f0e3bf3f796772a42226bc2897eb0b3294b4 Author: HJ <30-hj@users.noreply.git.pleroma.social> Date: Sun, 12 Nov 2023 23:06:14 +0000 Merge branch 'tusooa/react-more-actions-fix' into 'develop' Accessibility for react & extra buttons See merge request pleroma/pleroma-fe!1869 (cherry picked from commit 18c0cf1845a95db2d0e894d2455cdd4dc545aaf7) 0026b35f Add alt text for react and extra-buttons popup 82063f34 Add aria-controls to extra-buttons trigger 5ff14837 Add changelogDiffstat:
10 files changed, 45 insertions(+), 7 deletions(-)diff --git a/changelog.d/react-more-actions-fix.fix b/changelog.d/react-more-actions-fix.fix@@ -0,0 +1 @@ +Add aria attributes to react and extra buttonsdiff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js@@ -1,4 +1,5 @@ import Completion from '../../services/completion/completion.js' +import genRandomSeed from '../../services/random_seed/random_seed.service.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' @@ -110,7 +111,7 @@ const EmojiInput = { }, data () { return { - randomSeed: `${Math.random()}`.replace('.', '-'), + randomSeed: genRandomSeed(), input: undefined, caretEl: undefined, highlighted: -1,diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue@@ -3,7 +3,7 @@ ref="popover" trigger="click" popover-class="emoji-picker popover-default" - :trigger-attrs="{ 'aria-hidden': true }" + :trigger-attrs="{ 'aria-hidden': true, tabindex: -1 }" @show="onPopoverShown" @close="onPopoverClosed" >diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js@@ -1,4 +1,5 @@ import Popover from '../popover/popover.vue' +import genRandomSeed from '../../services/random_seed/random_seed.service.js' import ConfirmModal from '../confirm_modal/confirm_modal.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { @@ -40,7 +41,8 @@ const ExtraButtons = { data () { return { expanded: false, - showingDeleteDialog: false + showingDeleteDialog: false, + randomSeed: genRandomSeed() } }, methods: { @@ -152,6 +154,15 @@ const ExtraButtons = { editingAvailable () { return this.$store.state.instance.editingAvailable }, shouldConfirmDelete () { return this.$store.getters.mergedConfig.modalOnDelete + }, + triggerAttrs () { + return { + title: this.$t('status.more_actions'), + id: `popup-trigger-${this.randomSeed}`, + 'aria-controls': `popup-menu-${this.randomSeed}`, + 'aria-expanded': this.expanded, + 'aria-haspopup': 'menu' + } } } }diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue@@ -2,6 +2,7 @@ <Popover class="ExtraButtons" trigger="click" + :trigger-attrs="triggerAttrs" placement="top" :offset="{ y: 5 }" :bound-to="{ x: 'container' }" @@ -10,10 +11,15 @@ @close="onClose" > <template #content="{close}"> - <div class="dropdown-menu"> + <div + class="dropdown-menu" + role="menu" + :id="`popup-menu-${randomSeed}`" + > <button v-if="canMute && !status.thread_muted" class="button-default dropdown-item dropdown-item-icon" + role="menuitem" @click.prevent="muteConversation" > <FAIcon @@ -24,6 +30,7 @@ <button v-if="canMute && status.thread_muted" class="button-default dropdown-item dropdown-item-icon" + role="menuitem" @click.prevent="unmuteConversation" > <FAIcon @@ -34,6 +41,7 @@ <button v-if="!status.pinned && canPin" class="button-default dropdown-item dropdown-item-icon" + role="menuitem" @click.prevent="pinStatus" @click="close" > @@ -45,6 +53,7 @@ <button v-if="status.pinned && canPin" class="button-default dropdown-item dropdown-item-icon" + role="menuitem" @click.prevent="unpinStatus" @click="close" > @@ -57,6 +66,7 @@ <button v-if="!status.bookmarked" class="button-default dropdown-item dropdown-item-icon" + role="menuitem" @click.prevent="bookmarkStatus" @click="close" > @@ -68,6 +78,7 @@ <button v-if="status.bookmarked" class="button-default dropdown-item dropdown-item-icon" + role="menuitem" @click.prevent="unbookmarkStatus" @click="close" > @@ -80,6 +91,7 @@ <button v-if="ownStatus && editingAvailable" class="button-default dropdown-item dropdown-item-icon" + role="menuitem" @click.prevent="editStatus" @click="close" > @@ -91,6 +103,7 @@ <button v-if="isEdited && editingAvailable" class="button-default dropdown-item dropdown-item-icon" + role="menuitem" @click.prevent="showStatusHistory" @click="close" > @@ -102,6 +115,7 @@ <button v-if="canDelete" class="button-default dropdown-item dropdown-item-icon" + role="menuitem" @click.prevent="deleteStatus" @click="close" > @@ -112,6 +126,7 @@ </button> <button class="button-default dropdown-item dropdown-item-icon" + role="menuitem" @click.prevent="copyLink" @click="close" > @@ -123,6 +138,7 @@ <a v-if="!status.is_local" class="button-default dropdown-item dropdown-item-icon" + role="menuitem" title="Source" :href="status.external_url" target="_blank" @@ -134,6 +150,7 @@ </a> <button class="button-default dropdown-item dropdown-item-icon" + role="menuitem" @click.prevent="reportStatus" @click="close" >diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js@@ -1,4 +1,5 @@ import Timeago from 'components/timeago/timeago.vue' +import genRandomSeed from '../../services/random_seed/random_seed.service.js' import RichContent from 'components/rich_content/rich_content.jsx' import { forEach, map } from 'lodash' @@ -13,7 +14,7 @@ export default { return { loading: false, choices: [], - randomSeed: `${Math.random()}`.replace('.', '-') + randomSeed: genRandomSeed() } }, created () {diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js@@ -1,4 +1,5 @@ import statusPoster from '../../services/status_poster/status_poster.service.js' +import genRandomSeed from '../../services/random_seed/random_seed.service.js' import MediaUpload from '../media_upload/media_upload.vue' import ScopeSelector from '../scope_selector/scope_selector.vue' import EmojiInput from '../emoji_input/emoji_input.vue' @@ -162,7 +163,7 @@ const PostStatusForm = { } return { - randomSeed: `${Math.random()}`.replace('.', '-'), + randomSeed: genRandomSeed(), dropFiles: [], uploadingFiles: false, error: null,diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue@@ -11,6 +11,8 @@ /> <span class="button-unstyled popover-trigger" + role="button" + :tabindex="0" :title="$t('tool_tip.add_reaction')" @click.stop.prevent="show" >diff --git a/src/i18n/en.json b/src/i18n/en.json@@ -1033,7 +1033,8 @@ "reaction_count_label": "{num} person reacted | {num} people reacted", "hide_quote": "Hide the quoted status", "display_quote": "Display the quoted status", - "invisible_quote": "Quoted status unavailable: {link}" + "invisible_quote": "Quoted status unavailable: {link}", + "more_actions": "More actions on this status" }, "user_card": { "approve": "Approve",diff --git a/src/services/random_seed/random_seed.service.js b/src/services/random_seed/random_seed.service.js@@ -0,0 +1,3 @@ +const genRandomSeed = () => `${Math.random()}`.replace('.', '-') + +export default genRandomSeed