Merge pull request #42669 from nextcloud/backport/stable28/42636/fix/…

…core/42596/fix-button-accessibility-in-view-profile-page [stable28] enh(core): replaced previous native a element with NcButton
nextcloud · Jan 9, 2024 · cbeee9c · cbeee9c
2 parents 4d0d0ea + 9f8154f
commit cbeee9c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 49 deletions.
diff --git a/core/src/components/Profile/PrimaryActionButton.vue b/core/src/components/Profile/PrimaryActionButton.vue
@@ -21,23 +21,33 @@
 -->
 
 <template>
-	<a class="profile__primary-action-button"
-		:class="{ 'disabled': disabled }"
+	<NcButton type="primary"
 		:href="href"
+		alignment="center"
 		:target="target"
-		rel="noopener noreferrer nofollow"
-		v-on="$listeners">
-		<img class="icon"
-			:class="[icon, { 'icon-invert': colorPrimaryText === '#ffffff' }]"
-			:src="icon">
+		:disabled="disabled">
+		<template #icon>
+			<img class="icon"
+				aria-hidden="true"
+				:src="icon"
+				alt="">
+		</template>
 		<slot />
-	</a>
+	</NcButton>
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+import { NcButton } from '@nextcloud/vue'
+import { translate as t } from '@nextcloud/l10n'
+
+export default defineComponent({
 	name: 'PrimaryActionButton',
 
+	components: {
+		NcButton,
+	},
+
 	props: {
 		disabled: {
 			type: Boolean,
@@ -58,46 +68,14 @@ export default {
 		},
 	},
 
-	computed: {
-		colorPrimaryText() {
-			// For some reason the returned string has prepended whitespace
-			return getComputedStyle(document.body).getPropertyValue('--color-primary-element-text').trim()
-		},
+	methods: {
+		t,
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
-	.profile__primary-action-button {
-		font-size: var(--default-font-size);
-		font-weight: bold;
-		width: 188px;
-		height: 44px;
-		padding: 0 16px;
-		line-height: 44px;
-		text-align: center;
-		border-radius: var(--border-radius-pill);
-		color: var(--color-primary-element-text);
-		background-color: var(--color-primary-element);
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-
-		.icon {
-			display: inline-block;
-			vertical-align: middle;
-			margin-bottom: 2px;
-			margin-right: 4px;
-
-			&.icon-invert {
-				filter: invert(1);
-			}
-		}
-
-		&:hover,
-		&:focus,
-		&:active {
-			background-color: var(--color-primary-element-light);
-		}
+	.icon {
+		filter: var(--primary-invert-if-dark);
 	}
 </style>