Merge pull request #35240 from nextcloud/enh/a11y-share-button

Copy to clipboard with button instead of link

2 files changed, 39 insertions, 25 deletions

diff --git a/apps/files_sharing/src/components/SharingEntryInternal.vue b/apps/files_sharing/src/components/SharingEntryInternal.vue
index 03a1ba87b71..9912648357c 100644
--- a/apps/files_sharing/src/components/SharingEntryInternal.vue
+++ b/apps/files_sharing/src/components/SharingEntryInternal.vue
@@ -9,27 +9,33 @@
 				<div class="avatar-external icon-external-white" />
 			</template>
 
-			<NcActionLink :href="internalLink"
-				:aria-label="t('files_sharing', 'Copy internal link to clipboard')"
-				target="_blank"
-				:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
+			<NcActionButton :aria-label="t('files_sharing', 'Copy internal link to clipboard')"
 				@click.prevent="copyLink">
+				<template #icon>
+					<Check v-if="copied && copySuccess" :size="20" />
+					<ClipboardTextMultipleOutline v-else :size="20" />
+				</template>
 				{{ clipboardTooltip }}
-			</NcActionLink>
+			</NcActionButton>
 		</SharingEntrySimple>
 	</ul>
 </template>
 
 <script>
 import { generateUrl } from '@nextcloud/router'
-import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
+import { NcActionButton } from '@nextcloud/vue'
 import SharingEntrySimple from './SharingEntrySimple'
 
+import Check from 'vue-material-design-icons/Check.vue'
+import ClipboardTextMultipleOutline from 'vue-material-design-icons/ClipboardTextMultipleOutline.vue'
+
 export default {
 	name: 'SharingEntryInternal',
 
 	components: {
-		NcActionLink,
+		Check,
+		ClipboardTextMultipleOutline,
+		NcActionButton,
 		SharingEntrySimple,
 	},
 
diff --git a/apps/files_sharing/src/components/SharingEntryLink.vue b/apps/files_sharing/src/components/SharingEntryLink.vue
index 207db7d8514..a736299b9d4 100644
--- a/apps/files_sharing/src/components/SharingEntryLink.vue
+++ b/apps/files_sharing/src/components/SharingEntryLink.vue
@@ -38,13 +38,14 @@
 		<NcActions v-if="share && !isEmailShareType && share.token"
 			ref="copyButton"
 			class="sharing-entry__copy">
-			<NcActionLink :href="shareLink"
-				target="_blank"
-				:aria-label="t('files_sharing', 'Copy public link to clipboard')"
-				:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
+			<NcActionButton :aria-label="t('files_sharing', 'Copy public link to clipboard')"
 				@click.stop.prevent="copyLink">
+				<template #icon>
+					<Check v-if="copied && copySuccess" :size="20" />
+					<ClipboardTextMultipleOutline v-else :size="20" />
+				</template>
 				{{ clipboardTooltip }}
-			</NcActionLink>
+			</NcActionButton>
 		</NcActions>
 
 		<!-- pending actions -->
@@ -303,16 +304,18 @@ import { showError } from '@nextcloud/dialogs'
 import { Type as ShareTypes } from '@nextcloud/sharing'
 import Vue from 'vue'
 
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
-import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
-import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import NcActionText from '@nextcloud/vue/dist/Components/NcActionText'
-import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator'
-import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import {
+	NcActionButton,
+	NcActionCheckbox,
+	NcActionInput,
+	NcActionLink,
+	NcActions,
+	NcActionSeparator,
+	NcActionText,
+	NcActionTextEditable,
+	NcAvatar,
+	Tooltip,
+} from '@nextcloud/vue'
 
 import ExternalShareAction from './ExternalShareAction.vue'
 import SharePermissionsEditor from './SharePermissionsEditor.vue'
@@ -320,20 +323,25 @@ import GeneratePassword from '../utils/GeneratePassword.js'
 import Share from '../models/Share.js'
 import SharesMixin from '../mixins/SharesMixin.js'
 
+import Check from 'vue-material-design-icons/Check.vue'
+import ClipboardTextMultipleOutline from 'vue-material-design-icons/ClipboardTextMultipleOutline.vue'
+
 export default {
 	name: 'SharingEntryLink',
 
 	components: {
-		NcActions,
+		Check,
+		ClipboardTextMultipleOutline,
+		ExternalShareAction,
 		NcActionButton,
 		NcActionCheckbox,
 		NcActionInput,
 		NcActionLink,
+		NcActions,
+		NcActionSeparator,
 		NcActionText,
 		NcActionTextEditable,
-		NcActionSeparator,
 		NcAvatar,
-		ExternalShareAction,
 		SharePermissionsEditor,
 	},