Add aria-controls to extra-buttons trigger

This commit is contained in:
tusooa 2023-11-12 15:13:28 -05:00
parent 0026b35f66
commit 82063f34b2
No known key found for this signature in database
GPG Key ID: 42AEC43D48433C51
6 changed files with 23 additions and 5 deletions

View File

@ -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,

View File

@ -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'
}
}
}
}

View File

@ -2,7 +2,7 @@
<Popover
class="ExtraButtons"
trigger="click"
:triggerAttrs="{ title: $t('status.more_actions') }"
:trigger-attrs="triggerAttrs"
placement="top"
:offset="{ y: 5 }"
:bound-to="{ x: 'container' }"
@ -14,6 +14,7 @@
<div
class="dropdown-menu"
role="menu"
:id="`popup-menu-${randomSeed}`"
>
<button
v-if="canMute && !status.thread_muted"

View File

@ -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 () {

View File

@ -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,

View File

@ -0,0 +1,3 @@
const genRandomSeed = () => `${Math.random()}`.replace('.', '-')
export default genRandomSeed