Merge pull request #2921 from nextcloud/backport/2833/stable5

[stable5] Fix vue material design icons HTML validation
nextcloud-libraries · Aug 3, 2022 · 32cc11e · 32cc11e
2 parents 95ef727 + 15b14a7
commit 32cc11e
Show file tree

Hide file tree

Showing 17 changed files with 29 additions and 51 deletions.
diff --git a/src/components/ActionButton/ActionButton.vue b/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>

diff --git a/src/components/ActionInput/ActionInput.vue b/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>

diff --git a/src/components/ActionTextEditable/ActionTextEditable.vue b/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>

diff --git a/src/components/Actions/Actions.vue b/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>
@@ -193,7 +193,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>

diff --git a/src/components/AppNavigationItem/AppNavigationIconCollapsible.vue b/src/components/AppNavigationItem/AppNavigationIconCollapsible.vue
@@ -26,7 +26,7 @@
 		:class="{'icon-collapse--rotated':open}"
 		type="button"
 		@click="onClick">
-		<MenuDown :size="20" title="" decorative />
+		<MenuDown :size="20" />
 	</button>
 </template>
 

diff --git a/src/components/AppNavigationItem/AppNavigationItem.vue b/src/components/AppNavigationItem/AppNavigationItem.vue
@@ -176,15 +176,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" />

diff --git a/src/components/AppNavigationItem/InputConfirmCancel.vue b/src/components/AppNavigationItem/InputConfirmCancel.vue
@@ -42,14 +42,14 @@
 				class="app-navigation-input-confirm__confirm"
 				:aria-label="labelConfirm"
 				@click.stop.prevent="confirm">
-				<ArrowRight :size="20" decorative title="" />
+				<ArrowRight :size="20" />
 			</button>
 
 			<button type="reset"
 				class="app-navigation-input-confirm__close"
 				:aria-label="labelCancel"
 				@click.stop.prevent="cancel">
-				<Close :size="20" decorative title="" />
+				<Close :size="20" />
 			</button>
 		</form>
 	</div>

diff --git a/src/components/AppNavigationSettings/AppNavigationSettings.vue b/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>

diff --git a/src/components/AppNavigationToggle/AppNavigationToggle.vue b/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>

diff --git a/src/components/AppSidebar/AppSidebar.vue b/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>
@@ -151,7 +151,7 @@ include a standard-header like it's used by the files app.
 					href="#"
 					class="app-sidebar__close"
 					@click.prevent="closeSidebar">
-					<Close class="app-sidebar__close-icon" :size="20" decorative />
+					<Close class="app-sidebar__close-icon" :size="20" />
 				</a>
 
 				<!-- container for figure and description, allows easy switching to compact mode -->
@@ -191,8 +191,7 @@ include a standard-header like it's used by the files app.
 											'star--star': !isStarred,
 										}"
 										class="star"
-										:size="20"
-										decorative />
+										:size="20" />
 								</a>
 							</slot>
 						</div>

diff --git a/src/components/Avatar/Avatar.vue b/src/components/Avatar/Avatar.vue
@@ -69,9 +69,7 @@
 				<div v-if="contactsMenuLoading" class="icon-loading" />
 				<DotsHorizontal v-else
 					:size="20"
-					class="icon-more"
-					title=""
-					decorative />
+					class="icon-more" />
 			</template>
 		</Popover>
 

diff --git a/src/components/Breadcrumbs/Breadcrumbs.vue b/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" />

diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
@@ -73,7 +73,6 @@ It can be used with one or multiple actions.
 			:readonly="readonly">
 			<template v-if="style.indexOf('icon') !== -1" #icon>
 				<Video
-					title=""
 					:size="20" />
 			</template>
 			<template v-if="style.indexOf('text') !== -1">Example text</template>
@@ -99,7 +98,6 @@ It can be used with one or multiple actions.
 		text="Example text">
 		<template #icon>
 			<Video
-				title=""
 				:size="20" />
 		</template>
 		Example text
@@ -128,7 +126,6 @@ It can be used with one or multiple actions.
 			type="warning">
 			<template #icon>
 				<Video
-					title=""
 					:size="20" />
 			</template>
 			Example text

diff --git a/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue b/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
@@ -151,9 +151,7 @@ export default {
 			<icon :is="checkboxRadioIconElement"
 				v-else
 				:size="size"
-				class="checkbox-radio-switch__icon"
-				title=""
-				decorative />
+				class="checkbox-radio-switch__icon" />
 
 			<!-- @slot The checkbox/radio label -->
 			<slot />

diff --git a/src/components/ColorPicker/ColorPicker.vue b/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"

diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
@@ -132,14 +132,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>
@@ -169,7 +165,7 @@
 						<Actions v-if="canClose" class="header-close">
 							<ActionButton @click="close">
 								<template #icon>
-									<Close :size="iconSize" title="" decorative />
+									<Close :size="iconSize" />
 								</template>
 								{{ t('Close') }}
 							</ActionButton>
@@ -197,7 +193,7 @@
 							}"
 							@click.prevent.stop="previous">
 							<span class="icon-previous">
-								<ChevronLeft :size="40" title="" decorative />
+								<ChevronLeft :size="40" />
 								<span class="hidden-visually">
 									{{ t('Previous') }}
 								</span>
@@ -221,7 +217,7 @@
 							}"
 							@click.prevent.stop="next">
 							<span class="icon-next">
-								<ChevronRight :size="40" title="" decorative />
+								<ChevronRight :size="40" />
 								<span class="hidden-visually">
 									{{ t('Next') }}
 								</span>

diff --git a/src/components/SettingsSection/SettingsSection.vue b/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"