Fix vue material design icons HTML validation

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
robcresswell/vue-material-design-icons@c65d8ea

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

src/components/ActionButton/ActionButton.vue

@@ -48,19 +48,13 @@ You can also use a custom icon, for example from the vue-material-design-icons l
 	<Actions>
 		<ActionButton>
 			<template #icon>
-				<HandBackLeft
-					:size="20"
-					decorative
-					title="" />
+				<HandBackLeft :size="20" />
 			</template>
 			Raise left hand
 		</ActionButton>
 		<ActionButton>
 			<template #icon>
-				<HandBackRight
-					:size="20"
-					decorative
-					title="" />
+				<HandBackRight :size="20" />
 			</template>
 			Raise right hand
 		</ActionButton>

src/components/ActionInput/ActionInput.vue

@@ -91,7 +91,7 @@ For the multiselect component, all events will be passed through. Please see the
 					<!-- allow the custom font to inject a ::before
 						not possible on input[type=submit] -->
 					<label v-show="!disabled" :for="id" class="action-input__label">
-						<ArrowRight :size="20" title="" decorative />
+						<ArrowRight :size="20" />
 					</label>
 				</template>
 			</form>

src/components/ActionTextEditable/ActionTextEditable.vue

@@ -64,7 +64,7 @@ All undocumented attributes will be bound to the textarea. e.g. `maxlength`
 				<!-- allow the custom font to inject a ::before
 					not possible on input[type=submit] -->
 				<label v-show="!disabled" :for="id" class="action-text-editable__label">
-					<ArrowRight :size="20" title="" decorative />
+					<ArrowRight :size="20" />
 				</label>
 			</form>
 		</span>

src/components/Actions/Actions.vue

@@ -90,11 +90,11 @@ It can be used with one or multiple actions.
 		<button @click="toggled = !toggled">Toggle multiple action</button>
 		<Actions>
 			<template #icon>
-				<DotsHorizontalCircleOutline :size="20" decorative />
+				<DotsHorizontalCircleOutline :size="20" />
 			</template>
 			<ActionButton>
 				<template #icon>
-					<MicrophoneOff :size="20" decorative />
+					<MicrophoneOff :size="20" />
 				</template>
 				Mute
 			</ActionButton>
@@ -195,7 +195,7 @@ export default {
 					@focus="onFocus"
 					@blur="onBlur">
 					<slot v-if="iconSlotIsPopulated" name="icon" />
-					<DotsHorizontal v-else-if="defaultIcon === ''" :size="20" decorative />
+					<DotsHorizontal v-else-if="defaultIcon === ''" :size="20" />
 					{{ menuTitle }}
 				</button>
 			</template>

src/components/AppNavigationItem/AppNavigationIconCollapsible.vue

@@ -29,13 +29,9 @@
 		@click="onClick">
 		<template #icon>
 			<ChevronDown v-if="open"
-				:size="20"
-				title=""
-				decorative />
+				:size="20" />
 			<ChevronRight v-else
-				:size="20"
-				title=""
-				decorative />
+				:size="20" />
 		</template>
 	</ButtonVue>
 </template>

src/components/AppNavigationItem/AppNavigationItem.vue

@@ -179,15 +179,15 @@ Just set the `pinned` prop.
 						:aria-label="editButtonAriaLabel"
 						@click="handleEdit">
 						<template #icon>
-							<Pencil :size="20" decorative />
+							<Pencil :size="20" />
 						</template>
 						{{ editLabel }}
 					</ActionButton>
 					<ActionButton v-if="undo"
 						:aria-label="undoButtonAriaLabel"
 						@click="handleUndo">
 						<template #icon>
-							<Undo :size="20" decorative />
+							<Undo :size="20" />
 						</template>
 					</ActionButton>
 					<slot name="actions" />

src/components/AppNavigationItem/InputConfirmCancel.vue

@@ -43,7 +43,7 @@
 				:aria-label="labelConfirm"
 				@click.stop.prevent="confirm">
 				<template #icon>
-					<ArrowRight :size="20" decorative title="" />
+					<ArrowRight :size="20" />
 				</template>
 			</ButtonVue>
 
@@ -52,7 +52,7 @@
 				:aria-label="labelCancel"
 				@click.stop.prevent="cancel">
 				<template #icon>
-					<Close :size="20" decorative title="" />
+					<Close :size="20" />
 				</template>
 			</ButtonVue>
 		</form>

src/components/AppNavigationNew/AppNavigationNew.vue

@@ -27,7 +27,7 @@
  <template>
 	<AppNavigationNew text="New Element">
 		<template #icon>
-			<Plus :size="20" decorative />
+			<Plus :size="20" />
 		</template>
 	</AppNavigationNew>
  </template>

src/components/AppNavigationSettings/AppNavigationSettings.vue

@@ -28,7 +28,7 @@
 			<button class="settings-button"
 				type="button"
 				@click="toggleMenu">
-				<Cog class="settings-button__icon" :size="20" decorative />
+				<Cog class="settings-button__icon" :size="20" />
 				<span class="settings-button__label">{{ title }}</span>
 			</button>
 		</div>

src/components/AppNavigationToggle/AppNavigationToggle.vue

@@ -27,9 +27,7 @@
 			aria-controls="app-navigation-vue"
 			@click="toggleNavigation">
 			<template #icon>
-				<Menu :size="20"
-					title=""
-					decorative />
+				<Menu :size="20" />
 			</template>
 			{{ label }}
 		</ActionButton>

src/components/AppSidebar/AppSidebar.vue

@@ -36,7 +36,7 @@ include a standard-header like it's used by the files app.
 		subtitle="last edited 3 weeks ago">
 		<AppSidebarTab icon="icon-settings" name="Settings" id="settings-tab">
 			<template #icon>
-				<Cog :size="20" decorative />
+				<Cog :size="20" />
 			</template>
 			Settings tab content
 		</AppSidebarTab>

src/components/Avatar/Avatar.vue

@@ -40,7 +40,7 @@
  <template>
 	<avatar>
 		<template #icon>
-			<AccountMultiple :size="20" decorative />
+			<AccountMultiple :size="20" />
 		</template>
 	</AppNavigationNew>
  </template>
@@ -93,9 +93,7 @@
 				<LoadingIcon v-if="contactsMenuLoading" />
 				<DotsHorizontal v-else
 					:size="20"
-					class="icon-more"
-					title=""
-					decorative />
+					class="icon-more" />
 			</template>
 		</Popover>
 

src/components/Breadcrumbs/Breadcrumbs.vue

@@ -37,7 +37,7 @@ is dropped on a creadcrumb.
 			<Breadcrumbs @dropped="dropped">
 				<Breadcrumb title="Home" href="/" @dropped="droppedOnCrumb">
 					<template #icon>
-						<Folder :size="20" decorative />
+						<Folder :size="20" />
 					</template>
 				</Breadcrumb>
 				<Breadcrumb title="Folder 1" href="/Folder 1" />

src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue

@@ -174,9 +174,7 @@ export default {
 			<icon :is="checkboxRadioIconElement"
 				v-else-if="!buttonVariant"
 				:size="size"
-				class="checkbox-radio-switch__icon"
-				title=""
-				decorative />
+				class="checkbox-radio-switch__icon" />
 
 			<!-- @slot The checkbox/radio label -->
 			<slot />

src/components/ColorPicker/ColorPicker.vue

@@ -124,9 +124,7 @@ export default {
 						type="button"
 						@click="pickColor(color)">
 						<Check v-if="color === currentColor"
-							:size="20"
-							title=""
-							decorative />
+							:size="20" />
 					</button>
 				</div>
 				<Chrome v-if="advanced"
@@ -141,13 +139,13 @@ export default {
 					class="color-picker__navigation-button back"
 					type="button"
 					@click="handleBack">
-					<ArrowLeft :size="20" title="" decorative />
+					<ArrowLeft :size="20" />
 				</button>
 				<button v-if="!advanced"
 					class="color-picker__navigation-button more-settings"
 					type="button"
 					@click="handleMoreSettings">
-					<DotsHorizontal :size="20" title="" decorative />
+					<DotsHorizontal :size="20" />
 				</button>
 				<button v-if="advanced"
 					class="color-picker__navigation-button confirm"

src/components/Modal/Modal.vue

@@ -125,14 +125,10 @@
 							<!-- Play/pause icons -->
 							<Play v-if="!playing"
 								:size="iconSize"
-								class="play-pause-icons__play"
-								title=""
-								decorative />
+								class="play-pause-icons__play" />
 							<Pause v-else
 								:size="iconSize"
-								class="play-pause-icons__pause"
-								title=""
-								decorative />
+								class="play-pause-icons__pause" />
 							<span class="hidden-visually">
 								{{ playPauseTitle }}
 							</span>
@@ -162,7 +158,7 @@
 						<Actions v-if="canClose && !closeButtonContained" class="header-close">
 							<ActionButton @click="close">
 								<template #icon>
-									<Close :size="iconSize" title="" decorative />
+									<Close :size="iconSize" />
 								</template>
 								{{ t('Close') }}
 							</ActionButton>
@@ -190,7 +186,7 @@
 							}"
 							@click.prevent.stop="previous">
 							<span class="icon-previous">
-								<ChevronLeft :size="40" title="" decorative />
+								<ChevronLeft :size="40" />
 								<span class="hidden-visually">
 									{{ t('Previous') }}
 								</span>
@@ -207,7 +203,7 @@
 							:aria-label="closeButtonAriaLabel"
 							@click="close">
 							<template #icon>
-								<Close :size="20" title="" decorative />
+								<Close :size="20" />
 							</template>
 						</ButtonVue>
 						<!-- @slot Modal content to render -->
@@ -224,7 +220,7 @@
 							}"
 							@click.prevent.stop="next">
 							<span class="icon-next">
-								<ChevronRight :size="40" title="" decorative />
+								<ChevronRight :size="40" />
 								<span class="hidden-visually">
 									{{ t('Next') }}
 								</span>

src/components/SettingsSection/SettingsSection.vue

@@ -49,7 +49,7 @@ This component is to be used in the settings section of nextcloud.
 				class="settings-section__info"
 				role="note"
 				:title="docTitleTranslated">
-				<HelpCircle :size="20" decorative title="" />
+				<HelpCircle :size="20" />
 			</a>
 		</h2>
 		<p v-if="hasDescription"