From 4da7637e8194b50f75abbe0d1c1dc956921e51d7 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 15 Aug 2024 13:58:35 +0200
Subject: [PATCH 01/10] fix(a11y): migrate CallPhoneDialog to NcDialog

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../CallPhoneDialog/CallPhoneDialog.vue       | 39 ++++++++-----------
 src/components/LeftSidebar/LeftSidebar.vue    |  2 +-
 .../NewConversationContactsPage.vue           |  2 +-
 src/components/SelectPhoneNumber.vue          | 28 +++++--------
 4 files changed, 28 insertions(+), 43 deletions(-)

diff --git a/src/components/LeftSidebar/CallPhoneDialog/CallPhoneDialog.vue b/src/components/LeftSidebar/CallPhoneDialog/CallPhoneDialog.vue
index 715bf4cbdc2..ac9adf11d39 100644
--- a/src/components/LeftSidebar/CallPhoneDialog/CallPhoneDialog.vue
+++ b/src/components/LeftSidebar/CallPhoneDialog/CallPhoneDialog.vue
@@ -4,15 +4,14 @@
 -->
 
 <template>
-	<NcModal v-if="modal"
+	<NcDialog :open="modal"
+		:name="t('spreed', 'Call a phone number')"
 		class="call-phone"
 		:container="container"
-		@close="closeModal">
+		size="normal"
+		close-on-click-outside
+		@update:open="closeModal">
 		<template v-if="!loading">
-			<h2 class="call-phone__header">
-				{{ t('spreed', 'Call a phone number') }}
-			</h2>
-
 			<div class="call-phone__form">
 				<NcTextField ref="textField"
 					class="call-phone__form-input"
@@ -40,7 +39,7 @@
 				<p>{{ t('spreed', 'Creating the conversation …') }}</p>
 			</template>
 		</NcEmptyContent>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
@@ -48,8 +47,8 @@ import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import LoadingComponent from '../../LoadingComponent.vue'
@@ -67,8 +66,8 @@ export default {
 	components: {
 		DialpadPanel,
 		LoadingComponent,
+		NcDialog,
 		NcEmptyContent,
-		NcModal,
 		NcTextField,
 		SelectPhoneNumber,
 	},
@@ -191,30 +190,26 @@ export default {
 
 <style lang="scss" scoped>
 .call-phone {
-	&:deep(.modal-wrapper) {
+	:deep(.modal-wrapper) {
 		.modal-container {
 			height: 60%;
 		}
 
-		.modal-container__content {
-			padding: calc(var(--default-grid-baseline) * 5);
+		.dialog__content {
+			padding-bottom: calc(var(--default-grid-baseline) * 3);
 		}
 	}
 
 	&__form {
 		display: flex;
-		align-items: center;
+		align-items: flex-end;
 		gap: var(--default-grid-baseline);
-
-		&-input {
-			margin: 0;
-		}
 	}
 
-  &__loading {
-    margin: 0 !important;
-	padding: 0 !important;
-    height: 100%;
-  }
+	&__loading {
+		margin: 0 !important;
+		padding: 0 !important;
+		height: 100%;
+	}
 }
 </style>
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 5c1c81b7d20..b86887bbaff 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -109,7 +109,7 @@
 				<NewConversationDialog ref="newConversationDialog" :can-moderate-sip-dial-out="canModerateSipDialOut" />
 
 				<!-- New phone (SIP dial-out) dialog -->
-				<CallPhoneDialog ref="callPhoneDialog" />
+				<CallPhoneDialog v-if="canModerateSipDialOut" ref="callPhoneDialog" />
 
 				<!-- New Pending Invitations dialog -->
 				<InvitationHandler v-if="pendingInvitationsCount" ref="invitationHandler" />
diff --git a/src/components/NewConversationDialog/NewConversationContactsPage.vue b/src/components/NewConversationDialog/NewConversationContactsPage.vue
index 5dd00e94eae..f86e3bd93a6 100644
--- a/src/components/NewConversationDialog/NewConversationContactsPage.vue
+++ b/src/components/NewConversationDialog/NewConversationContactsPage.vue
@@ -279,7 +279,7 @@ export default {
 
 	&__form {
 		display: flex;
-		align-items: center;
+		align-items: flex-end;
 		gap: var(--default-grid-baseline);
 
 		&-input {
diff --git a/src/components/SelectPhoneNumber.vue b/src/components/SelectPhoneNumber.vue
index cf4034df33a..af129e8b8c3 100644
--- a/src/components/SelectPhoneNumber.vue
+++ b/src/components/SelectPhoneNumber.vue
@@ -8,12 +8,9 @@
 		<NcAppNavigationCaption :name="t('spreed', 'Phone numbers')" />
 		<Hint v-if="errorHint" :hint="errorHint" />
 		<template v-if="libPhoneNumber">
-			<NcListItem class="new-phone"
-				:name="name"
-				compact
-				@click="selectPhoneNumber">
+			<NcListItem :name="name" @click="selectPhoneNumber">
 				<template #icon>
-					<Phone :size="30" />
+					<Phone :size="AVATAR.SIZE.DEFAULT" />
 				</template>
 				<template #subname>
 					{{ participantPhoneItem.phoneNumber }}
@@ -35,7 +32,7 @@ import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 
 import Hint from './UIShared/Hint.vue'
 
-import { ATTENDEE } from '../constants.js'
+import { ATTENDEE, AVATAR } from '../constants.js'
 
 export default {
 	name: 'SelectPhoneNumber',
@@ -66,6 +63,12 @@ export default {
 
 	emits: ['select', 'update:participantPhoneItem'],
 
+	setup() {
+		return {
+			AVATAR,
+		}
+	},
+
 	computed: {
 		/**
 		 *
@@ -114,16 +117,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-.new-phone {
-	margin: 4px 0;
-	padding: 0 4px;
-	height: 56px;
-	border-radius: var(--border-radius-pill);
-
-	:deep(.list-item-content) {
-		padding-left: 20px;
-	}
-}
-</style>

From 42cf36edcdab920ce802c90574c643a3f4be0bb1 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 15 Aug 2024 14:34:32 +0200
Subject: [PATCH 02/10] fix(a11y): migrate MessageTranslateDialog to NcDialog

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MessageTranslateDialog.vue                | 77 +++++++++----------
 1 file changed, 38 insertions(+), 39 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
index 65b721b085c..a23275da93c 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageTranslateDialog.vue
@@ -4,12 +4,14 @@
 -->
 
 <template>
-	<NcModal ref="translate-modal"
+	<NcDialog ref="translateDialog"
+		class="translate-dialog"
+		:name="t('spreed', 'Translate message')"
 		size="large"
 		:container="container"
-		@close="$emit('close')">
-		<div v-if="isMounted" class="translate-dialog">
-			<h2> {{ t('spreed', 'Translate message') }} </h2>
+		close-on-click-outside
+		@update:open="$emit('close')">
+		<template v-if="isMounted" #default>
 			<div class="translate-dialog__wrapper">
 				<NcSelect v-model="selectedFrom"
 					class="translate-dialog__select"
@@ -45,21 +47,22 @@
 				:arguments="richParameters"
 				:reference-limit="0" />
 
-			<template v-if="translatedMessage">
-				<NcRichText class="translate-dialog__message translate-dialog__message-translation"
-					:text="translatedMessage"
-					:arguments="richParameters"
-					:reference-limit="0" />
-				<NcButton class="translate-dialog__copy-button"
-					@click="handleCopyTranslation">
-					<template #icon>
-						<ContentCopy />
-					</template>
-					{{ t('spreed', 'Copy translated text') }}
-				</NcButton>
-			</template>
-		</div>
-	</NcModal>
+			<NcRichText v-if="translatedMessage"
+				class="translate-dialog__message translate-dialog__message-translation"
+				:text="translatedMessage"
+				:arguments="richParameters"
+				:reference-limit="0" />
+		</template>
+
+		<template v-if="translatedMessage" #actions>
+			<NcButton @click="handleCopyTranslation">
+				<template #icon>
+					<ContentCopy />
+				</template>
+				{{ t('spreed', 'Copy translated text') }}
+			</NcButton>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
@@ -70,8 +73,8 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
@@ -81,13 +84,14 @@ export default {
 	name: 'MessageTranslateDialog',
 
 	components: {
-		ArrowRight,
-		ContentCopy,
-		NcRichText,
-		NcModal,
-		NcSelect,
 		NcButton,
+		NcDialog,
 		NcLoadingIcon,
+		NcRichText,
+		NcSelect,
+		// Icons
+		ArrowRight,
+		ContentCopy,
 	},
 
 	props: {
@@ -201,7 +205,7 @@ export default {
 
 		this.$nextTick(() => {
 			// FIXME trick to avoid focusTrap() from activating on NcSelect
-			this.isMounted = !!this.$refs['translate-modal'].randId
+			this.isMounted = !!this.$refs.translateDialog.navigationId
 		})
 	},
 
@@ -239,18 +243,19 @@ export default {
 
 <style lang="scss" scoped>
 .translate-dialog {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	min-height: 400px;
-	padding: calc(var(--default-grid-baseline) * 3);
-	background-color: var(--color-main-background);
+	:deep(.dialog__content) {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--default-grid-baseline) * 2);
+		min-height: 300px;
+		padding-bottom: calc(var(--default-grid-baseline) * 3);
+	}
 
 	&__wrapper {
 		display: flex;
 		align-items: center;
 		gap: calc(var(--default-grid-baseline) * 4);
-		padding: calc(var(--default-grid-baseline) * 2);
 	}
 
 	& &__select {
@@ -269,7 +274,6 @@ export default {
 
 		&-source {
 			color: var(--color-text-maxcontrast);
-			margin-bottom: calc(var(--default-grid-baseline) * 2);
 			border: 2px solid var(--color-border);
 		}
 
@@ -277,10 +281,5 @@ export default {
 			border: 2px solid var(--color-primary-element);
 		}
 	}
-
-	& &__copy-button {
-		margin-top: calc(var(--default-grid-baseline) * 2);
-		align-self: end;
-	}
 }
 </style>

From f504324898ef738670da904bd2821d361acc3211 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 15 Aug 2024 14:58:01 +0200
Subject: [PATCH 03/10] fix(a11y): migrate NewMessageNewFileDialog to NcDialog

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../NewMessage/NewMessageNewFileDialog.vue    | 132 ++++++++----------
 1 file changed, 58 insertions(+), 74 deletions(-)

diff --git a/src/components/NewMessage/NewMessageNewFileDialog.vue b/src/components/NewMessage/NewMessageNewFileDialog.vue
index e3551fd023c..62dfe20c964 100644
--- a/src/components/NewMessage/NewMessageNewFileDialog.vue
+++ b/src/components/NewMessage/NewMessageNewFileDialog.vue
@@ -4,53 +4,50 @@
 -->
 
 <template>
-	<NcModal size="large"
+	<NcDialog :name="t('spreed', 'Create and share a new file')"
+		size="large"
 		:container="container"
 		class="templates-picker"
-		@close="closeModal">
-		<div class="new-text-file">
-			<h2>
-				{{ t('spreed', 'Create and share a new file') }}
-			</h2>
-			<form class="new-text-file__form templates-picker__form"
-				:style="style"
-				@submit.prevent="handleCreateNewFile">
-				<NcTextField id="new-file-form-name"
-					ref="textField"
-					:error="!!newFileError"
-					:helper-text="newFileError"
-					:label="t('spreed', 'Name of the new file')"
-					:placeholder="newFileTitle"
-					:value="newFileTitle"
-					@update:value="updateNewFileTitle" />
-
-				<ul v-if="templates.length > 1" class="templates-picker__list">
-					<NewMessageTemplatePreview v-for="template in templates"
-						:key="template.fileid"
-						:basename="template.basename"
-						:checked="checked === template.fileid"
-						:fileid="template.fileid"
-						:filename="template.filename"
-						:preview-url="template.previewUrl"
-						:has-preview="template.hasPreview"
-						:mime="template.mime"
-						:ratio="fileTemplate.ratio"
-						@check="onCheck" />
-				</ul>
-
-				<div class="new-text-file__buttons">
-					<NcButton type="primary"
-						:disabled="loading"
-						@click="handleCreateNewFile">
-						<template v-if="loading" #icon>
-							<NcLoadingIcon />
-						</template>
-						{{ t('spreed', 'Create file') }}
-					</NcButton>
-				</div>
-			</form>
-		</div>
-	</NcModal>
+		close-on-click-outside
+		@update:open="closeModal">
+		<form class="templates-picker__form"
+			:style="style"
+			@submit.prevent="handleCreateNewFile">
+			<NcTextField id="new-file-form-name"
+				ref="textField"
+				:error="!!newFileError"
+				:helper-text="newFileError"
+				:label="t('spreed', 'Name of the new file')"
+				:placeholder="newFileTitle"
+				:value="newFileTitle"
+				@update:value="updateNewFileTitle" />
+
+			<ul v-if="templates.length > 1" class="templates-picker__list">
+				<NewMessageTemplatePreview v-for="template in templates"
+					:key="template.fileid"
+					:basename="template.basename"
+					:checked="checked === template.fileid"
+					:fileid="template.fileid"
+					:filename="template.filename"
+					:preview-url="template.previewUrl"
+					:has-preview="template.hasPreview"
+					:mime="template.mime"
+					:ratio="fileTemplate.ratio"
+					@check="onCheck" />
+			</ul>
+		</form>
+
+		<template #actions>
+			<NcButton type="primary"
+				:disabled="loading"
+				@click="handleCreateNewFile">
+				<template v-if="loading" #icon>
+					<NcLoadingIcon />
+				</template>
+				{{ t('spreed', 'Create file') }}
+			</NcButton>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
@@ -58,8 +55,8 @@ import { showError } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import NewMessageTemplatePreview from './NewMessageTemplatePreview.vue'
@@ -72,8 +69,8 @@ export default {
 
 	components: {
 		NcButton,
+		NcDialog,
 		NcLoadingIcon,
-		NcModal,
 		NcTextField,
 		NewMessageTemplatePreview,
 	},
@@ -249,36 +246,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.new-text-file {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-direction: column;
-	gap: 28px;
-	padding: 20px;
-
-	&__buttons {
-		display: flex;
-		justify-content: end;
-		padding-top: calc(var(--margin) * 2);
-	}
-
+.templates-picker {
 	&__form {
 		width: 100%;
+	}
 
-		.templates-picker__list {
-			margin-top: 20px;
-			display: grid;
-			grid-gap: calc(var(--margin) * 2);
-			grid-auto-columns: 1fr;
-			// We want maximum 5 columns. Putting 6 as we don't count the grid gap. So it will always be lower than 6
-			max-width: calc(var(--fullwidth) * 6);
-			grid-template-columns: repeat(auto-fit, var(--fullwidth));
-			// Make sure all rows are the same height
-			grid-auto-rows: 1fr;
-			// Center the columns set
-			justify-content: center;
-		}
+	&__list {
+		margin-top: 20px;
+		display: grid;
+		grid-gap: calc(var(--margin) * 2);
+		grid-auto-columns: 1fr;
+		// We want maximum 5 columns. Putting 6 as we don't count the grid gap. So it will always be lower than 6
+		max-width: calc(var(--fullwidth) * 6);
+		grid-template-columns: repeat(auto-fit, var(--fullwidth));
+		// Make sure all rows are the same height
+		grid-auto-rows: 1fr;
+		// Center the columns set
+		justify-content: center;
 	}
 }
 </style>

From d5bffb5b4e837ad8d5f928609deb87619a7b3bdf Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 15 Aug 2024 17:41:04 +0200
Subject: [PATCH 04/10] fix(a11y): migrate MessageForwarder to NcDialog

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MessageButtonsBar/MessageForwarder.vue    | 61 +++++++++----------
 1 file changed, 28 insertions(+), 33 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageForwarder.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageForwarder.vue
index e1771ddd60e..d4fa2f7bb54 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageForwarder.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageForwarder.vue
@@ -18,29 +18,31 @@
 		<!-- Second step of the flow: confirmation modal that gives the user
 		the possibility to directly route to the conversation to which the
 		message has been forwarded -->
-		<NcModal v-else
+		<NcDialog v-else
+			:name="dialogTitle"
 			:container="container"
-			@close="handleClose">
+			close-on-click-outside
+			@update:open="handleClose">
 			<NcEmptyContent :description="t('spreed', 'The message has been forwarded to {selectedConversationName}', { selectedConversationName })">
 				<template #icon>
 					<Check :size="64" />
 				</template>
-				<template #action>
-					<NcButton type="tertiary" @click="handleClose">
-						{{ t('spreed', 'Dismiss') }}
-					</NcButton>
-					<NcButton type="primary" @click="openConversation">
-						{{ t('spreed', 'Go to conversation') }}
-					</NcButton>
-				</template>
 			</NcEmptyContent>
-		</NcModal>
+			<template #actions>
+				<NcButton type="tertiary" @click="handleClose">
+					{{ t('spreed', 'Dismiss') }}
+				</NcButton>
+				<NcButton type="primary" @click="openConversation">
+					{{ t('spreed', 'Go to conversation') }}
+				</NcButton>
+			</template>
+		</NcDialog>
 	</div>
 </template>
 
 <script>
 
-import { inject } from 'vue'
+import { inject, ref } from 'vue'
 
 import Check from 'vue-material-design-icons/Check.vue'
 
@@ -49,8 +51,8 @@ import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import RoomSelector from '../../../../RoomSelector.vue'
 
@@ -58,11 +60,11 @@ export default {
 	name: 'MessageForwarder',
 
 	components: {
-		RoomSelector,
-		NcEmptyContent,
-		NcModal,
-		NcButton,
 		Check,
+		NcButton,
+		NcDialog,
+		NcEmptyContent,
+		RoomSelector,
 	},
 
 	props: {
@@ -79,17 +81,17 @@ export default {
 	emits: ['close'],
 
 	setup() {
-		return {
-			isTalkMainApp: inject('Talk:isMainApp', false)
-		}
-	},
+		const selectedConversationToken = ref(null)
+		const selectedConversationName = ref(null)
+		const showForwardedConfirmation = ref(false)
+		const forwardedMessageID = ref('')
 
-	data() {
 		return {
-			selectedConversationToken: null,
-			selectedConversationName: null,
-			showForwardedConfirmation: false,
-			forwardedMessageID: '',
+			isTalkMainApp: inject('Talk:isMainApp', false),
+			selectedConversationToken,
+			selectedConversationName,
+			showForwardedConfirmation,
+			forwardedMessageID,
 		}
 	},
 
@@ -156,11 +158,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
-:deep(.empty-content) {
-	padding: 20px;
-}
-:deep(.empty-content__action) {
-	gap: 10px;
-}
 </style>

From 33d932278dfad1fbbb0d7aff4f8aa599a5f89a7c Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 15 Aug 2024 18:07:12 +0200
Subject: [PATCH 05/10] fix(a11y): migrate RoomSelector to NcDialog

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/RoomSelector.spec.js | 14 ++++++++------
 src/components/RoomSelector.vue     | 27 ++++++++++++++-------------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/components/RoomSelector.spec.js b/src/components/RoomSelector.spec.js
index e80535f6f78..31a9dce4fb8 100644
--- a/src/components/RoomSelector.spec.js
+++ b/src/components/RoomSelector.spec.js
@@ -9,6 +9,7 @@ import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 
 import ConversationSearchResult from './LeftSidebar/ConversationsList/ConversationSearchResult.vue'
 import RoomSelector from './RoomSelector.vue'
@@ -110,6 +111,7 @@ describe('RoomSelector', () => {
 			stubs: {
 				ConversationsSearchListVirtual: ConversationsSearchListVirtualStub,
 				ConversationSearchResult,
+				NcDialog,
 			},
 			propsData: props,
 		})
@@ -242,9 +244,9 @@ describe('RoomSelector', () => {
 			const eventHandler = jest.fn()
 			wrapper.vm.$on('close', eventHandler)
 
-			// Act: close modal
-			const modal = wrapper.findComponent({ name: 'NcModal' })
-			await modal.vm.$emit('close')
+			// Act: close dialog
+			const dialog = wrapper.findComponent(NcDialog)
+			await dialog.vm.$emit('update:open')
 
 			// Assert
 			expect(eventHandler).toHaveBeenCalled()
@@ -256,9 +258,9 @@ describe('RoomSelector', () => {
 			const eventHandler = jest.fn()
 			wrapper.vm.$root.$on('close', eventHandler)
 
-			// Act: close modal
-			const modal = wrapper.findComponent({ name: 'NcModal' })
-			await modal.vm.$emit('close')
+			// Act: close dialog
+			const dialog = wrapper.findComponent(NcDialog)
+			await dialog.vm.$emit('update:open')
 
 			// Assert
 			expect(eventHandler).toHaveBeenCalled()
diff --git a/src/components/RoomSelector.vue b/src/components/RoomSelector.vue
index 0d6888026d6..0b88ac86026 100644
--- a/src/components/RoomSelector.vue
+++ b/src/components/RoomSelector.vue
@@ -4,12 +4,11 @@
 -->
 
 <template>
-	<NcModal size="small" :container="container" @close="close">
-		<div class="selector">
-			<!-- Heading, search field -->
-			<h2 class="selector__heading">
-				{{ dialogTitle }}
-			</h2>
+	<NcDialog :name="dialogTitle"
+		:container="container"
+		close-on-click-outside
+		@update:open="close">
+		<template #default>
 			<p v-if="dialogSubtitle" class="selector__subtitle">
 				{{ dialogSubtitle }}
 			</p>
@@ -33,8 +32,9 @@
 					<MessageOutline :size="64" />
 				</template>
 			</NcEmptyContent>
+		</template>
 
-			<!-- Actions -->
+		<template #actions>
 			<NcButton v-if="!loading && availableRooms.length > 0"
 				class="selector__action"
 				type="primary"
@@ -42,8 +42,8 @@
 				@click="onSubmit">
 				{{ t('spreed', 'Select conversation') }}
 			</NcButton>
-		</div>
-	</NcModal>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
@@ -55,8 +55,8 @@ import MessageOutline from 'vue-material-design-icons/MessageOutline.vue'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import ConversationsSearchListVirtual from './LeftSidebar/ConversationsList/ConversationsSearchListVirtual.vue'
@@ -71,8 +71,8 @@ export default {
 	components: {
 		ConversationsSearchListVirtual,
 		NcButton,
+		NcDialog,
 		NcEmptyContent,
-		NcModal,
 		NcTextField,
 		// Icons
 		Magnify,
@@ -230,13 +230,14 @@ export default {
 	height: 700px;
 }
 
-.selector {
+:deep(.modal-wrapper .dialog__content) {
 	width: 100%;
 	height: 100%;
 	display: flex;
 	flex-direction: column;
-	padding: 16px;
+}
 
+.selector {
 	&__heading {
 		margin-bottom: 4px;
 	}

From fc2881ae79aa81430a0e8c9478787521791c2187 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 16 Aug 2024 09:16:55 +0200
Subject: [PATCH 06/10] fix(a11y): migrate MatterbridgeSettings to NcDialog

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../Matterbridge/MatterbridgeSettings.vue     | 44 ++++++++-----------
 1 file changed, 18 insertions(+), 26 deletions(-)

diff --git a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
index 7a4e5470165..6aead52f663 100644
--- a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
+++ b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
@@ -51,18 +51,18 @@
 							<Message :size="20" />
 						</template>
 					</NcButton>
-					<NcModal v-if="logModal"
+					<NcDialog :open.sync="logModal"
+						:name="t('spreed', 'Log content')"
+						size="normal"
 						container=".matterbridge-settings"
-						@close="closeLogModal">
-						<div class="modal__content">
-							<NcTextArea :value="processLog"
-								class="log-content"
-								:label="t('spreed', 'Log content')"
-								rows="29"
-								readonly
-								resize="vertical" />
-						</div>
-					</NcModal>
+						close-on-click-outside>
+						<NcTextArea :value="processLog"
+							class="log-content"
+							:label="t('spreed', 'Log content')"
+							:rows="29"
+							readonly
+							resize="vertical" />
+					</NcDialog>
 				</div>
 			</div>
 			<ul>
@@ -82,8 +82,6 @@
 </template>
 
 <script>
-import Vue from 'vue'
-
 import Message from 'vue-material-design-icons/Message.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 
@@ -93,7 +91,7 @@ import { imagePath } from '@nextcloud/router'
 
 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 NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
@@ -109,13 +107,14 @@ import {
 export default {
 	name: 'MatterbridgeSettings',
 	components: {
+		BridgePart,
 		NcButton,
 		NcCheckboxRadioSwitch,
+		NcDialog,
 		NcSelect,
-		BridgePart,
-		Message,
-		NcModal,
 		NcTextArea,
+		// Icons
+		Message,
 		Plus,
 	},
 
@@ -620,9 +619,6 @@ export default {
 			this.getBridgeProcessState(this.token)
 			this.logModal = true
 		},
-		closeLogModal() {
-			this.logModal = false
-		},
 	},
 }
 </script>
@@ -727,11 +723,7 @@ export default {
 	}
 }
 
-.log-content {
-	width: 590px;
-}
-
-:deep(.modal-container__content) {
-	padding: 5px;
+.log-content :deep(.textarea__input) {
+	height: unset;
 }
 </style>

From 939d1d87bb5ac6d3f6f672d5faa553929403c0ad Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 15 Aug 2024 13:34:43 +0200
Subject: [PATCH 07/10] fix(a11y): provide accessible heading to
 BreakoutRoomsActions

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../BreakoutRoomsEditor.vue                   |  2 +-
 .../BreakoutRooms/BreakoutRoomsActions.vue    | 22 ++++++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
index c628dba7b1c..8716136329e 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
+++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
@@ -72,7 +72,7 @@
 					@create-rooms="handleCreateRooms" />
 			</template>
 		</div>
-	</ncmodal>
+	</NcModal>
 </template>
 
 <script>
diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
index d296a2c8a63..dcb8ccdf4ef 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
@@ -91,9 +91,12 @@
 		<!-- Participants editor -->
 		<NcModal v-if="showParticipantsEditor"
 			:container="container"
+			:label-id="dialogHeaderId"
 			@close="closeParticipantsEditor">
 			<div class="breakout-rooms-actions__editor">
-				<h2> {{ manageBreakoutRoomsTitle }} </h2>
+				<h2 :id="dialogHeaderId">
+					{{ manageBreakoutRoomsTitle }}
+				</h2>
 				<BreakoutRoomsParticipantsEditor :token="mainToken"
 					:breakout-rooms="breakoutRooms"
 					:is-creating-rooms="false"
@@ -111,6 +114,8 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import Check from 'vue-material-design-icons/Check.vue'
@@ -128,6 +133,7 @@ import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import BreakoutRoomsParticipantsEditor from '../../BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue'
 import SendMessageDialog from '../../BreakoutRoomsEditor/SendMessageDialog.vue'
 
+import { useId } from '../../../composables/useId.ts'
 import { useIsInCall } from '../../../composables/useIsInCall.js'
 import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
 import { EventBus } from '../../../services/EventBus.js'
@@ -177,16 +183,16 @@ export default {
 	},
 
 	setup() {
+		const showParticipantsEditor = ref(false)
+		const sendMessageDialogOpened = ref(false)
+		const dialogHeaderId = `breakout-rooms-actions-header-${useId()}`
+
 		return {
 			isInCall: useIsInCall(),
 			breakoutRoomsStore: useBreakoutRoomsStore(),
-		}
-	},
-
-	data() {
-		return {
-			showParticipantsEditor: false,
-			sendMessageDialogOpened: false,
+			showParticipantsEditor,
+			sendMessageDialogOpened,
+			dialogHeaderId,
 		}
 	},
 

From 1f2d1d4e71ae7d5032ff728c0474b2f4cd55590d Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 16 Aug 2024 09:29:07 +0200
Subject: [PATCH 08/10] fix(a11y): provide accessible heading to
 SharedItemsBrowser

- set preview height in grid to 100% to prevent increasing from metadata height

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../Message/MessagePart/FilePreview.vue            |  2 +-
 .../SharedItems/SharedItemsBrowser.vue             | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index e36a228875c..0062a352edd 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -685,7 +685,7 @@ export default {
 		.preview {
 			width: 100%;
 			min-height: unset;
-			height: 100%;
+			height: 100% !important;
 		}
 	}
 }
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue b/src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue
index 6725394ae9b..31de45bc2ea 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue
@@ -4,8 +4,14 @@
 -->
 
 <template>
-	<NcModal size="large" :container="container" v-on="$listeners">
+	<NcModal size="large"
+		:container="container"
+		:label-id="dialogHeaderId"
+		v-on="$listeners">
 		<div class="shared-items-browser">
+			<h2 :id="dialogHeaderId" class="hidden-visually">
+				{{ sharedItemTitle[activeTab] || sharedItemTitle.default }}
+			</h2>
 			<div class="shared-items-browser__navigation">
 				<template v-for="type in sharedItemsOrder">
 					<NcButton v-if="sharedItems[type]"
@@ -36,6 +42,7 @@ import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import SharedItems from './SharedItems.vue'
 
 import { sharedItemsOrder, sharedItemTitle } from './sharedItemsConstants.js'
+import { useId } from '../../../composables/useId.ts'
 import { useSharedItemsStore } from '../../../stores/sharedItems.js'
 
 export default {
@@ -67,12 +74,13 @@ export default {
 	emits: ['update:active-tab'],
 
 	setup() {
-		const sharedItemsStore = useSharedItemsStore()
+		const dialogHeaderId = `shared-items-browser-${useId()}`
 
 		return {
-			sharedItemsStore,
+			sharedItemsStore: useSharedItemsStore(),
 			sharedItemTitle,
 			sharedItemsOrder,
+			dialogHeaderId,
 		}
 	},
 

From 4543066b68cd4396b2fd608b10b801fe9c16a518 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 16 Aug 2024 09:41:47 +0200
Subject: [PATCH 09/10] fix(a11y): provide accessible heading to
 NewMessageUploadEditor

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../NewMessage/NewMessageUploadEditor.vue      | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/NewMessage/NewMessageUploadEditor.vue b/src/components/NewMessage/NewMessageUploadEditor.vue
index e96a68aeebd..543be067d2b 100644
--- a/src/components/NewMessage/NewMessageUploadEditor.vue
+++ b/src/components/NewMessage/NewMessageUploadEditor.vue
@@ -9,12 +9,16 @@
 		:size="isVoiceMessage ? 'small' : 'normal'"
 		:close-on-click-outside="false"
 		:container="container"
+		:label-id="dialogHeaderId"
 		@close="handleDismiss">
 		<div class="upload-editor"
 			@dragover.prevent="handleDragOver"
 			@dragleave.prevent="handleDragLeave"
 			@drop.prevent="handleDropFiles">
 			<template v-if="!isVoiceMessage">
+				<h2 :id="dialogHeaderId" class="hidden-visually">
+					{{ t('spreed', 'Upload from device') }}
+				</h2>
 				<!--native file picker, hidden -->
 				<input id="file-upload"
 					ref="fileUploadInput"
@@ -75,6 +79,8 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import Plus from 'vue-material-design-icons/Plus.vue'
 
 import { t } from '@nextcloud/l10n'
@@ -87,6 +93,7 @@ import AudioPlayer from '../MessagesList/MessagesGroup/Message/MessagePart/Audio
 import FilePreview from '../MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
 import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
 
+import { useId } from '../../composables/useId.ts'
 import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 
 export default {
@@ -102,10 +109,15 @@ export default {
 		TransitionWrapper,
 	},
 
-	data() {
+	setup() {
+		const modalContainerId = ref(null)
+		const isDraggingOver = ref(false)
+		const dialogHeaderId = `new-message-upload-${useId()}`
+
 		return {
-			modalContainerId: null,
-			isDraggingOver: false,
+			modalContainerId,
+			isDraggingOver,
+			dialogHeaderId,
 		}
 	},
 

From 7d34d8e852e702431906e8bb938c191aa05217be Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 16 Aug 2024 09:50:36 +0200
Subject: [PATCH 10/10] fix(a11y): provide accessible heading to
 NewConversationDialog

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../NewConversationDialog.vue                 | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/NewConversationDialog/NewConversationDialog.vue b/src/components/NewConversationDialog/NewConversationDialog.vue
index 7f2c5301553..d7747712f59 100644
--- a/src/components/NewConversationDialog/NewConversationDialog.vue
+++ b/src/components/NewConversationDialog/NewConversationDialog.vue
@@ -10,8 +10,9 @@
 			class="new-group-conversation"
 			:close-on-click-outside="!isFilled"
 			:container="container"
+			:label-id="dialogHeaderPrepId"
 			@close="closeModal">
-			<h2 class="new-group-conversation__header">
+			<h2 :id="dialogHeaderPrepId" class="new-group-conversation__header">
 				{{ t('spreed', 'Create a new group conversation') }}
 			</h2>
 
@@ -69,6 +70,7 @@
 		<!-- Third page : this is the confirmation page-->
 		<NcModal v-if="page === 2"
 			:container="container"
+			:label-id="dialogHeaderResId"
 			@close="closeModal">
 			<NcEmptyContent>
 				<template #icon>
@@ -78,14 +80,8 @@
 				</template>
 
 				<template #description>
-					<p v-if="isLoading">
-						{{ t('spreed', 'Creating the conversation …') }}
-					</p>
-					<p v-else-if="error">
-						{{ t('spreed', 'Error while creating the conversation') }}
-					</p>
-					<p v-else-if="success && isPublic">
-						{{ t('spreed', 'All set, the conversation "{conversationName}" was created.', { conversationName }) }}
+					<p :id="dialogHeaderResId">
+						{{ creatingConversationDescription }}
 					</p>
 				</template>
 
@@ -115,7 +111,6 @@ import { provide, ref } from 'vue'
 import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
 import Check from 'vue-material-design-icons/Check.vue'
 
-import { showError } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -126,6 +121,7 @@ import NewConversationContactsPage from './NewConversationContactsPage.vue'
 import NewConversationSetupPage from './NewConversationSetupPage.vue'
 import LoadingComponent from '../LoadingComponent.vue'
 
+import { useId } from '../../composables/useId.ts'
 import { useIsInCall } from '../../composables/useIsInCall.js'
 import { CONVERSATION } from '../../constants.js'
 import { setConversationPassword } from '../../services/conversationsService.js'
@@ -170,9 +166,14 @@ export default {
 		// Add a visual bulk selection state for Participant component
 		provide('bulkParticipantsSelection', true)
 
+		const dialogHeaderPrepId = `new-conversation-prepare-${useId()}`
+		const dialogHeaderResId = `new-conversation-result-${useId()}`
+
 		return {
 			isInCall,
 			selectedParticipants,
+			dialogHeaderPrepId,
+			dialogHeaderResId,
 		}
 	},
 
@@ -214,6 +215,17 @@ export default {
 			return JSON.stringify(this.newConversation) !== JSON.stringify(NEW_CONVERSATION)
 				|| this.listable !== CONVERSATION.LISTABLE.NONE || this.isAvatarEdited
 		},
+
+		creatingConversationDescription() {
+			if (this.isLoading) {
+				return t('spreed', 'Creating the conversation …')
+			} else if (this.error) {
+				return t('spreed', 'Error while creating the conversation')
+			} else if (this.success && this.isPublic) {
+				return t('spreed', 'All set, the conversation "{conversationName}" was created.', { conversationName: this.conversationName })
+			}
+			return ''
+		}
 	},
 
 	watch: {