fix: provide accessible heading for components

src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue

@@ -6,10 +6,13 @@
 <template>
 	<NcModal :container="container"
 		:class="{'modal-mask__participants-step': isEditingParticipants}"
+		:label-id="dialogHeaderId"
 		v-on="$listeners">
 		<div class="breakout-rooms-editor"
 			:class="{'breakout-rooms-editor__participants-step': isEditingParticipants}">
-			<h2>{{ modalTitle }}</h2>
+			<h2 :id="dialogHeaderId">
+				{{ modalTitle }}
+			</h2>
 			<template v-if="!isEditingParticipants">
 				<div class="breakout-rooms-editor__main">
 					<label class="breakout-rooms-editor__caption" for="room-number">{{ t('spreed', 'Number of breakout rooms') }} </label>
@@ -73,6 +76,8 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -82,6 +87,7 @@ import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import BreakoutRoomsParticipantsEditor from './BreakoutRoomsParticipantsEditor.vue'
 
+import { useId } from '../../composables/useId.ts'
 import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.ts'
 
 export default {
@@ -105,18 +111,21 @@ export default {
 	emits: ['close'],
 
 	setup() {
-		return {
-			breakoutRoomsStore: useBreakoutRoomsStore(),
-		}
-	},
+		const mode = ref('1')
+		const amount = ref(2)
+		const attendeeMap = ref('')
+		const isEditingParticipants = ref(false)
+		const isInvalidAmount = ref(false)
+		const dialogHeaderId = `breakout-rooms-header-${useId()}`
 
-	data() {
 		return {
-			mode: '1',
-			amount: 2,
-			attendeeMap: '',
-			isEditingParticipants: false,
-			isInvalidAmount: false,
+			breakoutRoomsStore: useBreakoutRoomsStore(),
+			mode,
+			amount,
+			attendeeMap,
+			isEditingParticipants,
+			isInvalidAmount,
+			dialogHeaderId,
 		}
 	},
 

src/components/GuestWelcomeWindow.vue

@@ -7,11 +7,14 @@
 	<NcModal :container="container"
 		:can-close="false"
 		:close-on-click-outside="false"
+		:label-id="dialogHeaderId"
 		size="small">
 		<div class="modal__content">
 			<div class="conversation-information">
 				<ConversationIcon :item="conversation" hide-user-status />
-				<h2>{{ conversationDisplayName }}</h2>
+				<h2 :id="dialogHeaderId">
+					{{ conversationDisplayName }}
+				</h2>
 			</div>
 			<p class="description">
 				{{ conversationDescription }}
@@ -40,6 +43,8 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import Check from 'vue-material-design-icons/CheckBold.vue'
 
 import { t } from '@nextcloud/l10n'
@@ -50,6 +55,7 @@ import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import ConversationIcon from './ConversationIcon.vue'
 
+import { useId } from '../composables/useId.ts'
 import { useGuestNameStore } from '../stores/guestName.js'
 
 export default {
@@ -72,12 +78,13 @@ export default {
 
 	setup() {
 		const guestNameStore = useGuestNameStore()
-		return { guestNameStore }
-	},
+		const guestUserName = ref('')
+		const dialogHeaderId = `guest-welcome-header-${useId()}`
 
-	data() {
 		return {
-			guestUserName: '',
+			guestNameStore,
+			guestUserName,
+			dialogHeaderId,
 		}
 	},
 

src/components/PermissionsEditor/PermissionsEditor.vue

@@ -6,11 +6,12 @@
 <template>
 	<NcModal size="small"
 		:container="container"
+		:label-id="dialogHeaderId"
 		v-on="$listeners">
 		<div class="wrapper">
 			<template v-if="!loading">
 				<!-- eslint-disable-next-line vue/no-v-html -->
-				<p class="title" v-html="modalTitle" />
+				<p :id="dialogHeaderId" class="title" v-html="modalTitle" />
 				<form @submit.prevent="handleSubmitPermissions">
 					<NcCheckboxRadioSwitch ref="callStart"
 						:checked.sync="callStart"
@@ -60,13 +61,16 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
+import { useId } from '../../composables/useId.ts'
 import { PARTICIPANT } from '../../constants.js'
 
 const PERMISSIONS = PARTICIPANT.PERMISSIONS
@@ -117,22 +121,32 @@ export default {
 			default: false,
 		},
 	},
+
 	emits: ['submit'],
 
-	data() {
+	setup() {
+		const dialogHeaderId = `permissions-editor-${useId()}`
+		// Permission to start a call
+		const callStart = ref(false)
+		// Permission to bypass the lobby
+		const lobbyIgnore = ref(false)
+		// Permission to post messages and reactions
+		const chatMessagesAndReactions = ref(false)
+		// Permission to enable the microphone
+		const publishAudio = ref(false)
+		// Permission to enable the camera
+		const publishVideo = ref(false)
+		// Permission to start a screenshare
+		const publishScreen = ref(false)
+
 		return {
-			// Permission to start a call
-			callStart: false,
-			// Permission to bypass the lobby
-			lobbyIgnore: false,
-			// Permission to post messages and reactions
-			chatMessagesAndReactions: false,
-			// Permission to enable the microphone
-			publishAudio: false,
-			// Permission to enable the camera
-			publishVideo: false,
-			// Permission to start a screenshare
-			publishScreen: false,
+			dialogHeaderId,
+			callStart,
+			lobbyIgnore,
+			chatMessagesAndReactions,
+			publishAudio,
+			publishVideo,
+			publishScreen,
 		}
 	},
 

src/components/PollViewer/PollViewer.vue

@@ -7,11 +7,12 @@
 	<NcModal v-if="id"
 		size="small"
 		:container="container"
+		:label-id="dialogHeaderId"
 		@close="dismissModal">
 		<div v-if="poll" class="poll-modal">
 			<div class="poll-modal__header">
 				<PollIcon :size="20" />
-				<span role="heading" aria-level="2">
+				<span :id="dialogHeaderId" role="heading" aria-level="2">
 					{{ name }}
 				</span>
 			</div>
@@ -90,6 +91,8 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import FileLock from 'vue-material-design-icons/FileLock.vue'
 import PollIcon from 'vue-material-design-icons/Poll.vue'
 
@@ -105,6 +108,7 @@ import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
 
 import PollVotersDetails from './PollVotersDetails.vue'
 
+import { useId } from '../../composables/useId.ts'
 import { useIsInCall } from '../../composables/useIsInCall.js'
 import { POLL } from '../../constants.js'
 import { EventBus } from '../../services/EventBus.js'
@@ -127,16 +131,17 @@ export default {
 	},
 
 	setup() {
-		return {
-			isInCall: useIsInCall(),
-		}
-	},
+		const voteToSubmit = ref([])
+		const modalPage = ref('')
+		const loading = ref(false)
+		const dialogHeaderId = `guest-welcome-header-${useId()}`
 
-	data() {
 		return {
-			voteToSubmit: [],
-			modalPage: '',
-			loading: false,
+			isInCall: useIsInCall(),
+			voteToSubmit,
+			modalPage,
+			loading,
+			dialogHeaderId,
 		}
 	},