fix: rename *Tooltip to *Title

- get rid of object fields reassigning in TopBarMediaControls

Signed-off-by: Maksim Sukharev <[email protected]>

src/components/CallView/Grid/Grid.vue

@@ -8,7 +8,8 @@
 		<NcButton v-if="isStripe && !isRecording"
 			class="stripe--collapse"
 			type="tertiary-no-background"
-			:aria-label="stripeButtonTooltip"
+			:title="stripeButtonTitle"
+			:aria-label="stripeButtonTitle"
 			@click="handleClickStripeCollapse">
 			<template #icon>
 				<ChevronDown v-if="stripeOpen"
@@ -278,7 +279,7 @@ export default {
 	},
 
 	computed: {
-		stripeButtonTooltip() {
+		stripeButtonTitle() {
 			if (this.stripeOpen) {
 				return t('spreed', 'Collapse stripe')
 			} else {

src/components/CallView/shared/VideoBottomBar.vue

@@ -33,8 +33,8 @@
 				group>
 				<NcButton v-if="showAudioIndicator"
 					key="audioIndicator"
-					:title="audioButtonTooltip"
-					:aria-label="audioButtonTooltip"
+					:title="audioButtonTitle"
+					:aria-label="audioButtonTitle"
 					class="audioIndicator"
 					type="tertiary-no-background"
 					:disabled="isAudioButtonDisabled"
@@ -47,8 +47,8 @@
 
 				<NcButton v-if="showVideoIndicator"
 					key="videoIndicator"
-					:title="videoButtonTooltip"
-					:aria-label="videoButtonTooltip"
+					:title="videoButtonTitle"
+					:aria-label="videoButtonTitle"
 					class="videoIndicator"
 					type="tertiary-no-background"
 					@click.stop="toggleVideo">
@@ -205,7 +205,7 @@ export default {
 		isAudioButtonDisabled() {
 			return !this.model.attributes.audioAvailable || !this.canFullModerate
 		},
-		audioButtonTooltip() {
+		audioButtonTitle() {
 			return this.model.attributes.audioAvailable
 				? t('spreed', 'Mute')
 				: t('spreed', 'Muted')
@@ -221,7 +221,7 @@ export default {
 		isRemoteVideoBlocked() {
 			return this.sharedData.remoteVideoBlocker && !this.sharedData.remoteVideoBlocker.isVideoEnabled()
 		},
-		videoButtonTooltip() {
+		videoButtonTitle() {
 			return this.isRemoteVideoEnabled
 				? t('spreed', 'Disable video')
 				: t('spreed', 'Enable video')

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -330,9 +330,9 @@ export default {
 		readInfo() {
 			return {
 				showCommonReadIcon: this.showCommonReadIcon,
-				commonReadIconTooltip: t('spreed', 'Message read by everyone who shares their reading status'),
+				commonReadIconTitle: t('spreed', 'Message read by everyone who shares their reading status'),
 				showSentIcon: this.showSentIcon,
-				sentIconTooltip: t('spreed', 'Message sent'),
+				sentIconTitle: t('spreed', 'Message sent'),
 			}
 		},
 

src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js

@@ -81,8 +81,8 @@ describe('MessageButtonsBar.vue', () => {
 			readInfo: {
 				showCommonReadIcon: true,
 				showSentIcon: true,
-				commonReadIconTooltip: '',
-				sentIconTooltip: '',
+				commonReadIconTitle: '',
+				sentIconTitle: '',
 			},
 			isTranslationAvailable: false,
 		}

src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue

@@ -35,13 +35,13 @@
 					<NcActionText>
 						<template #icon>
 							<span v-if="readInfo.showCommonReadIcon"
-								:title="readInfo.commonReadIconTooltip"
-								:aria-label="readInfo.commonReadIconTooltip">
+								:title="readInfo.commonReadIconTitle"
+								:aria-label="readInfo.commonReadIconTitle">
 								<CheckAll :size="16" />
 							</span>
 							<span v-else-if="readInfo.showSentIcon"
-								:title="readInfo.sentIconTooltip"
-								:aria-label="readInfo.sentIconTooltip">
+								:title="readInfo.sentIconTitle"
+								:aria-label="readInfo.sentIconTitle">
 								<Check :size="16" />
 							</span>
 							<ClockOutline v-else :size="16" />

src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue

@@ -73,18 +73,18 @@
 
 			<!-- Message delivery status indicators -->
 			<div v-if="message.sendingFailure"
-				:title="sendingErrorIconTooltip"
+				:title="sendingErrorIconTitle"
 				class="message-status sending-failed"
 				:class="{'retry-option': sendingErrorCanRetry}"
-				:aria-label="sendingErrorIconTooltip"
+				:aria-label="sendingErrorIconTitle"
 				tabindex="0"
 				@mouseover="showReloadButton = true"
 				@focus="showReloadButton = true"
 				@mouseleave="showReloadButton = false"
 				@blur="showReloadButton = false">
 				<NcButton v-if="sendingErrorCanRetry && showReloadButton"
 					size="small"
-					:aria-label="sendingErrorIconTooltip"
+					:aria-label="sendingErrorIconTitle"
 					@click="handleRetry">
 					<template #icon>
 						<ReloadIcon :size="16" />
@@ -93,19 +93,19 @@
 				<AlertCircleIcon v-else :size="16" />
 			</div>
 			<div v-else-if="showLoadingIcon"
-				:title="loadingIconTooltip"
+				:title="loadingIconTitle"
 				class="icon-loading-small message-status"
-				:aria-label="loadingIconTooltip" />
+				:aria-label="loadingIconTitle" />
 			<div v-else-if="readInfo.showCommonReadIcon"
-				:title="readInfo.commonReadIconTooltip"
+				:title="readInfo.commonReadIconTitle"
 				class="message-status"
-				:aria-label="readInfo.commonReadIconTooltip">
+				:aria-label="readInfo.commonReadIconTitle">
 				<CheckAllIcon :size="16" />
 			</div>
 			<div v-else-if="readInfo.showSentIcon"
-				:title="readInfo.sentIconTooltip"
+				:title="readInfo.sentIconTitle"
 				class="message-status"
-				:aria-label="readInfo.sentIconTooltip">
+				:aria-label="readInfo.sentIconTitle">
 				<CheckIcon :size="16" />
 			</div>
 		</div>
@@ -289,15 +289,15 @@ export default {
 			return this.isTemporary || this.isDeleting || this.isEditing
 		},
 
-		loadingIconTooltip() {
+		loadingIconTitle() {
 			return t('spreed', 'Sending message')
 		},
 
 		sendingErrorCanRetry() {
 			return ['timeout', 'other', 'failed-upload'].includes(this.message.sendingFailure)
 		},
 
-		sendingErrorIconTooltip() {
+		sendingErrorIconTitle() {
 			if (this.sendingErrorCanRetry) {
 				return t('spreed', 'Failed to send the message. Click to try again')
 			}

src/components/NewMessage/NewMessageAudioRecorder.vue

@@ -6,8 +6,8 @@
 <template>
 	<div class="audio-recorder">
 		<NcButton v-if="!isRecording"
-			:title="startRecordingTooltip"
-			:aria-label="startRecordingTooltip"
+			:title="startRecordingTitle"
+			:aria-label="startRecordingTitle"
 			type="tertiary"
 			:disabled="!canStartRecording"
 			@click="start">
@@ -17,8 +17,8 @@
 		</NcButton>
 		<div v-else class="wrapper">
 			<NcButton type="error"
-				:title="abortRecordingTooltip"
-				:aria-label="abortRecordingTooltip"
+				:title="abortRecordingTitle"
+				:aria-label="abortRecordingTitle"
 				@click="abortRecording">
 				<template #icon>
 					<Close :size="16" />
@@ -30,8 +30,8 @@
 					{{ parsedRecordTime }}</span>
 			</div>
 			<NcButton type="success"
-				:title="stopRecordingTooltip"
-				:aria-label="stopRecordingTooltip"
+				:title="stopRecordingTitle"
+				:aria-label="stopRecordingTitle"
 				:class="{'audio-recorder__trigger--recording': isRecording}"
 				@click="stop">
 				<template #icon>
@@ -113,15 +113,15 @@ export default {
 			return `${minutes}:${seconds}`
 		},
 
-		startRecordingTooltip() {
+		startRecordingTitle() {
 			return t('spreed', 'Record voice message')
 		},
 
-		stopRecordingTooltip() {
+		stopRecordingTitle() {
 			return t('spreed', 'End recording and send')
 		},
 
-		abortRecordingTooltip() {
+		abortRecordingTitle() {
 			return t('spreed', 'Dismiss recording')
 		},
 

src/components/TopBar/TopBarMediaControls.vue

@@ -320,50 +320,67 @@ export default {
 
 			const virtualBackgroundEnabled = this.isVirtualBackgroundAvailable && this.model.attributes.virtualBackgroundEnabled
 
-			const tooltip = {}
 			if (!this.model.attributes.audioEnabled && this.model.attributes.videoEnabled && virtualBackgroundEnabled && this.model.attributes.localScreen) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen. To improve the situation try to disable the background blur or your video while doing a screen share.')
-				tooltip.actionLabel = t('spreed', 'Disable background blur')
-				tooltip.action = 'disableVirtualBackground'
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen. To improve the situation try to disable the background blur or your video while doing a screen share.'),
+					actionLabel: t('spreed', 'Disable background blur'),
+					action: 'disableVirtualBackground',
+				}
 			} else if (!this.model.attributes.audioEnabled && this.model.attributes.videoEnabled && this.model.attributes.localScreen) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen. To improve the situation try to disable your video while doing a screenshare.')
-				tooltip.actionLabel = t('spreed', 'Disable video')
-				tooltip.action = 'disableVideo'
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen. To improve the situation try to disable your video while doing a screenshare.'),
+					actionLabel: t('spreed', 'Disable video'),
+					action: 'disableVideo',
+				}
 			} else if (!this.model.attributes.audioEnabled && this.model.attributes.localScreen) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen.')
-				tooltip.actionLabel = ''
-				tooltip.action = ''
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen.'),
+					actionLabel: '',
+					action: '',
+				}
 			} else if (!this.model.attributes.audioEnabled && this.model.attributes.videoEnabled) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see you.')
-				tooltip.actionLabel = ''
-				tooltip.action = ''
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see you.'),
+					actionLabel: '',
+					action: '',
+				}
 			} else if (this.model.attributes.videoEnabled && virtualBackgroundEnabled && this.model.attributes.localScreen) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable the background blur or your video while doing a screenshare.')
-				tooltip.actionLabel = t('spreed', 'Disable background blur')
-				tooltip.action = 'disableVirtualBackground'
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable the background blur or your video while doing a screenshare.'),
+					actionLabel: t('spreed', 'Disable background blur'),
+					action: 'disableVirtualBackground',
+				}
 			} else if (this.model.attributes.videoEnabled && this.model.attributes.localScreen) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable your video while doing a screenshare.')
-				tooltip.actionLabel = t('spreed', 'Disable video')
-				tooltip.action = 'disableVideo'
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable your video while doing a screenshare.'),
+					actionLabel: t('spreed', 'Disable video'),
+					action: 'disableVideo',
+				}
 			} else if (this.model.attributes.localScreen) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand you and see your screen. To improve the situation try to disable your screenshare.')
-				tooltip.actionLabel = t('spreed', 'Disable screenshare')
-				tooltip.action = 'disableScreenShare'
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand you and see your screen. To improve the situation try to disable your screenshare.'),
+					actionLabel: t('spreed', 'Disable screenshare'),
+					action: 'disableScreenShare',
+				}
 			} else if (this.model.attributes.videoEnabled && virtualBackgroundEnabled) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable the background blur or your video.')
-				tooltip.actionLabel = t('spreed', 'Disable background blur')
-				tooltip.action = 'disableVirtualBackground'
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable the background blur or your video.'),
+					actionLabel: t('spreed', 'Disable background blur'),
+					action: 'disableVirtualBackground',
+				}
 			} else if (this.model.attributes.videoEnabled) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable your video.')
-				tooltip.actionLabel = t('spreed', 'Disable video')
-				tooltip.action = 'disableVideo'
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable your video.'),
+					actionLabel: t('spreed', 'Disable video'),
+					action: 'disableVideo',
+				}
 			} else {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand you.')
-				tooltip.actionLabel = ''
-				tooltip.action = ''
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand you.'),
+					actionLabel: '',
+					action: '',
+				}
 			}
-
-			return tooltip
 		},
 	},