Merge pull request #2833 from nextcloud/bugfix/noid/html-validation-v…

…ue-material-design-icons Fix vue material design icons HTML validation
nextcloud-libraries · Jul 14, 2022 · 646e535 · 646e535
2 parents 2ca3f88 + d864d70
commit 646e535
Show file tree

Hide file tree

Showing 17 changed files with 31 additions and 53 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>
@@ -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>

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

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

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

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

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>

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

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/CheckboxRadioSwitch/CheckboxRadioSwitch.vue b/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 />

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

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"