Since v5.0.0 of the lib, the property decorative has been removed.

This means the "decorative" is added to the span element, causing the
HTML validation to fail:

> Attribute decorative not allowed on element span at this point.

Upstream commit
https://github.com/robcresswell/vue-material-design-icons/commit/c65d8ea786ea49210193cb3129c12a68ed6c0baf

> This patch also removes the default title, encouraging better
> accessibility by removing unhelpful titles that dont indicate usage. The
> `decorative` prop has been removed and any icons that do not have a
> meaningful title will be hidden from screen readers.

Signed-off-by: Joas Schilling <coding@schilljs.com>

25 files changed, 91 insertions, 283 deletions

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 41e24cbed..c4504ec51 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -27,13 +27,9 @@
 			@click="handleClickStripeCollapse">
 			<ChevronDown v-if="stripeOpen"
 				fill-color="#ffffff"
-				decorative
-				title=""
 				:size="20" />
 			<ChevronUp v-else
 				fill-color="#ffffff"
-				decorative
-				title=""
 				:size="20" />
 		</button>
 		<transition :name="isStripe ? 'slide-down' : ''">
@@ -44,9 +40,7 @@
 						class="grid-navigation grid-navigation__previous"
 						:aria-label="t('spreed', 'Previous page of videos')"
 						@click="handleClickPrevious">
-						<ChevronLeft decorative
-							fill-color="#ffffff"
-							title=""
+						<ChevronLeft fill-color="#ffffff"
 							:size="20" />
 					</button>
 					<div ref="grid"
@@ -110,9 +104,7 @@
 						:class="{'stripe': isStripe}"
 						:aria-label="t('spreed', 'Next page of videos')"
 						@click="handleClickNext">
-						<ChevronRight decorative
-							fill-color="#ffffff"
-							title=""
+						<ChevronRight fill-color="#ffffff"
 							:size="20" />
 					</button>
 				</div>
diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue
index a006f5155..4ad0e2206 100644
--- a/src/components/CallView/shared/LocalMediaControls.vue
+++ b/src/components/CallView/shared/LocalMediaControls.vue
@@ -30,9 +30,7 @@
 					:open="showQualityWarningTooltip">
 					<button slot="trigger"
 						class="trigger">
-						<NetworkStrength2Alert decorative
-							fill-color="#e9322d"
-							title=""
+						<NetworkStrength2Alert fill-color="#e9322d"
 							:size="20"
 							@mouseover="mouseover = true"
 							@mouseleave="mouseover = false" />
@@ -64,14 +62,10 @@
 					@click.stop="toggleAudio">
 					<Microphone v-if="showMicrophoneOn"
 						:size="20"
-						title=""
-						fill-color="#ffffff"
-						decorative />
+						fill-color="#ffffff" />
 					<MicrophoneOff v-else
 						:size="20"
-						title=""
-						fill-color="#ffffff"
-						decorative />
+						fill-color="#ffffff" />
 				</button>
 				<span v-show="model.attributes.audioAvailable"
 					ref="volumeIndicator"
@@ -87,14 +81,10 @@
 				@click.stop="toggleVideo">
 				<VideoIcon v-if="showVideoOn"
 					:size="20"
-					title=""
-					fill-color="#ffffff"
-					decorative />
+					fill-color="#ffffff" />
 				<VideoOff v-else
 					:size="20"
-					title=""
-					fill-color="#ffffff"
-					decorative />
+					fill-color="#ffffff" />
 			</button>
 			<button v-if="isVirtualBackgroundAvailable && !showActions"
 				v-tooltip="toggleVirtualBackgroundButtonLabel"
@@ -103,14 +93,10 @@
 				@click.stop="toggleVirtualBackground">
 				<Blur v-if="isVirtualBackgroundEnabled"
 					:size="20"
-					title=""
-					fill-color="#ffffff"
-					decorative />
+					fill-color="#ffffff" />
 				<BlurOff v-else
 					:size="20"
-					title=""
-					fill-color="#ffffff"
-					decorative />
+					fill-color="#ffffff" />
 			</button>
 			<Actions v-if="!screenSharingButtonHidden"
 				id="screensharing-button"
@@ -127,40 +113,30 @@
 				<CancelPresentation v-if="model.attributes.localScreen"
 					slot="icon"
 					:size="20"
-					title=""
-					fill-color="#ffffff"
-					decorative />
+					fill-color="#ffffff" />
 				<PresentToAll v-else
 					slot="icon"
 					:size="20"
-					title=""
-					fill-color="#ffffff"
-					decorative />
+					fill-color="#ffffff" />
 				<!-- /Actions button icon -->
 				<!-- Actions -->
 				<ActionButton v-if="!screenSharingMenuOpen"
 					@click.stop="toggleScreenSharingMenu">
 					<PresentToAll slot="icon"
 						:size="20"
-						title=""
-						fill-color="#ffffff"
-						decorative />
+						fill-color="#ffffff" />
 					{{ screenSharingButtonTooltip }}
 				</ActionButton>
 				<ActionButton v-if="model.attributes.localScreen"
 					@click="showScreen">
 					<Monitor slot="icon"
-						:size="20"
-						title=""
-						decorative />
+						:size="20" />
 					{{ t('spreed', 'Show your screen') }}
 				</ActionButton>
 				<ActionButton v-if="model.attributes.localScreen"
 					@click="stopScreen">
 					<CancelPresentation slot="icon"
-						:size="20"
-						title=""
-						decorative />
+						:size="20" />
 					{{ t('spreed', 'Stop screensharing') }}
 				</ActionButton>
 			</Actions>
@@ -174,9 +150,7 @@
 				@click.stop="toggleHandRaised">
 				<!-- The following icon is much bigger than all the others
 						so we reduce its size -->
-				<HandBackLeft decorative
-					title=""
-					:size="18"
+				<HandBackLeft :size="18"
 					fill-color="#ffffff" />
 			</button>
 			<Actions v-if="showActions"
@@ -185,7 +159,6 @@
 				:aria-label="t('spreed', 'More actions')">
 				<DotsHorizontal slot="icon"
 					:size="20"
-					decorative
 					fill-color="#ffffff" />
 
 				<ActionButton :close-after-click="true"
@@ -193,8 +166,6 @@
 					<!-- The following icon is much bigger than all the others
 						so we reduce its size -->
 					<HandBackLeft slot="icon"
-						decorative
-						title=""
 						:size="18" />
 					{{ raiseHandButtonLabel }}
 				</ActionButton>
@@ -203,14 +174,10 @@
 					@click="toggleVirtualBackground">
 					<BlurOff v-if="isVirtualBackgroundEnabled"
 						slot="icon"
-						:size="20"
-						decorative
-						title="" />
+						:size="20" />
 					<Blur v-else
 						slot="icon"
-						:size="20"
-						decorative
-						title="" />
+						:size="20" />
 					{{ toggleVirtualBackgroundButtonLabel }}
 				</ActionButton>
 				<!-- Call layout switcher -->
@@ -219,21 +186,17 @@
 					@click="changeView">
 					<GridView v-if="isGrid"
 						slot="icon"
-						:size="20"
-						decorative />
+						:size="20" />
 					<PromotedView v-else
 						slot="icon"
-						:size="20"
-						decorative />
+						:size="20" />
 					{{ changeViewText }}
 				</ActionButton>
 				<ActionSeparator />
 				<ActionButton :close-after-click="true"
 					@click="showSettings">
 					<Cog slot="icon"
-						decorative
-						:size="20"
-						title="" />
+						:size="20" />
 					{{ t('spreed', 'Devices settings') }}
 				</ActionButton>
 			</Actions>
diff --git a/src/components/CallView/shared/Video.vue b/src/components/CallView/shared/Video.vue
index 6f60f5b45..73f24decd 100644
--- a/src/components/CallView/shared/Video.vue
+++ b/src/components/CallView/shared/Video.vue
@@ -70,8 +70,6 @@
 				:key="'placeholderForPromoted'"
 				class="placeholder-for-promoted">
 				<AccountCircle v-if="isPromoted || isSelected"
-					decorative
-					title=""
 					fill-color="#FFFFFF"
 					:size="36" />
 			</div>
diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue
index 0dc05a2db..24c18e87b 100644
--- a/src/components/CallView/shared/VideoBottomBar.vue
+++ b/src/components/CallView/shared/VideoBottomBar.vue
@@ -26,8 +26,6 @@
 			<div v-if="!connectionStateFailedNoRestart && model.attributes.raisedHand.state"
 				class="bottom-bar__statusIndicator">
 				<HandBackLeft class="handIndicator"
-					decorative
-					title=""
 					size="18px"
 					fill-color="#ffffff" />
 			</div>
@@ -54,14 +52,10 @@
 						@click.stop="forceMute">
 						<Microphone v-if="showMicrophone"
 							:size="20"
-							title=""
-							fill-color="#ffffff"
-							decorative />
+							fill-color="#ffffff" />
 						<MicrophoneOff v-if="showMicrophoneOff"
 							:size="20"
-							title=""
-							fill-color="#ffffff"
-							decorative />
+							fill-color="#ffffff" />
 					</button>
 					<button v-show="!connectionStateFailedNoRestart && model.attributes.videoAvailable"
 						v-tooltip="videoButtonTooltip"
@@ -69,14 +63,10 @@
 						@click.stop="toggleVideo">
 						<VideoIcon v-if="showVideoButton"
 							:size="20"
-							title=""
-							fill-color="#ffffff"
-							decorative />
+							fill-color="#ffffff" />
 						<VideoOff v-if="!showVideoButton"
 							:size="20"
-							title=""
-							fill-color="#ffffff"
-							decorative />
+							fill-color="#ffffff" />
 					</button>
 					<button v-show="!connectionStateFailedNoRestart"
 						v-tooltip="t('spreed', 'Show screen')"
@@ -84,18 +74,14 @@
 						:class="screenSharingButtonClass"
 						@click.stop="switchToScreen">
 						<Monitor :size="20"
-							title=""
-							fill-color="#ffffff"
-							decorative />
+							fill-color="#ffffff" />
 					</button>
 					<button v-show="connectionStateFailedNoRestart"
 						class="iceFailedIndicator"
 						:class="{ 'not-failed': !connectionStateFailedNoRestart }"
 						disabled="true">
 						<AlertCircle :size="20"
-							title=""
-							fill-color="#ffffff"
-							decorative />
+							fill-color="#ffffff" />
 					</button>
 				</div>
 			</transition>
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index 32d6ae993..cbee8980c 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -37,18 +37,14 @@
 			class="conversation-icon__avatar" />
 		<div v-if="showCall"
 			class="overlap-icon">
-			<Video decorative
-				:size="20"
-				:fill-color="'#E9322D'"
-				title="" />
+			<Video :size="20"
+				:fill-color="'#E9322D'" />
 			<span class="hidden-visually">{{ t('spreed', 'Call in progress') }}</span>
 		</div>
 		<div v-else-if="showFavorite"
 			class="overlap-icon">
-			<Star decorative
-				:size="20"
-				:fill-color="'#FFCC00'"
-				title="" />
+			<Star :size="20"
+				:fill-color="'#FFCC00'" />
 			<span class="hidden-visually">{{ t('spreed', 'Favorite') }}</span>
 		</div>
 	</div>
diff --git a/src/components/Description/Description.vue b/src/components/Description/Description.vue
index 45afadbe7..252fd8d5e 100644
--- a/src/components/Description/Description.vue
+++ b/src/components/Description/Description.vue
@@ -39,9 +39,7 @@
 					:aria-label="t('spreed', 'Cancel editing description')"
 					@click="handleCancelEditing">
 					<template #icon>
-						<Close decorative
-							title=""
-							:size="20" />
+						<Close :size="20" />
 					</template>
 				</Button>
 				<Button type="primary"
@@ -49,9 +47,7 @@
 					:disabled="!canSubmit"
 					@click="handleSubmitDescription">
 					<template #icon>
-						<Check decorative
-							title=""
-							:size="20" />
+						<Check :size="20" />
 					</template>
 				</Button>
 				<div v-if="showCountDown"
@@ -67,9 +63,7 @@
 				:aria-label="t('spreed', 'Edit conversation description')"
 				@click="handleEditDescription">
 				<template #icon>
-					<Pencil decorative
-						title=""
-						:size="20" />
+					<Pencil :size="20" />
 				</template>
 			</Button>
 		</template>
diff --git a/src/components/DeviceChecker/DeviceChecker.vue b/src/components/DeviceChecker/DeviceChecker.vue
index 3ca0cca16..94b681bcc 100644
--- a/src/components/DeviceChecker/DeviceChecker.vue
+++ b/src/components/DeviceChecker/DeviceChecker.vue
@@ -67,12 +67,8 @@
 					@click="toggleAudio">
 					<template #icon>
 						<Microphone v-if="audioOn"
-							title=""
-							decorative
 							:size="20" />
 						<MicrophoneOff v-else
-							title=""
-							decorative
 							:size="20" />
 					</template>
 				</Button>
@@ -90,12 +86,8 @@
 					@click="toggleVideo">
 					<template #icon>
 						<Video v-if="videoOn"
-							title=""
-							decorative
 							:size="20" />
 						<VideoOff v-else
-							title=""
-							decorative
 							:size="20" />
 					</template>
 				</Button>
@@ -109,13 +101,9 @@
 					@click="toggleBlur">
 					<template #icon>
 						<Blur v-if="blurOn"
-							:size="20"
-							decorative
-							title="" />
+							:size="20" />
 						<BlurOff v-else
-							:size="20"
-							decorative
-							title="" />
+							:size="20" />
 					</template>
 				</Button>
 			</div>
@@ -127,9 +115,7 @@
 					class="select-devices"
 					@click="showDeviceSelection = true">
 					<template #icon>
-						<Cog title=""
-							decorative
-							:size="20" />
+						<Cog :size="20" />
 					</template>
 					{{ t('spreed', 'Choose devices') }}
 				</Button>
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index d3d8cbfec..fc6932361 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -48,15 +48,11 @@
 				@click.prevent.exact="toggleFavoriteConversation">
 				<Star v-if="item.isFavorite"
 					slot="icon"
-					decorative
-					:size="20"
-					title="" />
+					:size="20" />
 				<Star v-else
 					slot="icon"
-					decorative
 					:size="20"
-					:fill-color="'#FFCC00'"
-					title="" />
+					:fill-color="'#FFCC00'" />
 				{{ labelFavorite }}
 			</ActionButton>
 			<ActionButton icon="icon-clippy"
@@ -66,18 +62,14 @@
 			<ActionButton :close-after-click="true"
 				@click.prevent.exact="markConversationAsRead">
 				<template #icon>
-					<EyeOutline decorative
-						title=""
-						:size="16" />
+					<EyeOutline :size="16" />
 				</template>
 				{{ t('spreed', 'Mark as read') }}
 			</ActionButton>
 			<ActionButton :close-after-click="true"
 				@click.prevent.exact="showConversationSettings">
 				<Cog slot="icon"
-					decorative
-					:size="20"
-					title="" />
+					:size="20" />
 				{{ t('spreed', 'Conversation settings') }}
 			</ActionButton>
 			<ActionButton v-if="canLeaveConversation"
@@ -91,9 +83,7 @@
 				class="critical"
 				@click.prevent.exact="deleteConversation">
 				<template #icon>
-					<Delete decorative
-						title=""
-						:size="16" />
+					<Delete :size="16" />
 				</template>
 				{{ t('spreed', 'Delete conversation') }}
 			</ActionButton>
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index 8c7bdb446..ecae3d5ce 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -29,9 +29,7 @@
 			:aria-label="t('spreed', 'Create a new group conversation')"
 			@click="showModal">
 			<template #icon>
-				<Plus decorative
-					title=""
-					:size="20" />
+				<Plus :size="20" />
 			</template>
 		<