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

Copy to clipboard with button instead of link
nextcloud · Nov 26, 2022 · 1cebd4a · 1cebd4a
2 parents 61e72d4 + 4ffc022
commit 1cebd4a
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 33 deletions.
diff --git 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
@@ -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,37 +304,44 @@ 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'
 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,
  },
 

diff --git a/dist/core-common.js b/dist/core-common.js
diff --git a/dist/core-common.js.map b/dist/core-common.js.map
diff --git a/dist/files_sharing-files_sharing_tab.js b/dist/files_sharing-files_sharing_tab.js
diff --git a/dist/files_sharing-files_sharing_tab.js.map b/dist/files_sharing-files_sharing_tab.js.map
diff --git a/tests/acceptance/features/bootstrap/FilesAppSharingContext.php b/tests/acceptance/features/bootstrap/FilesAppSharingContext.php
@@ -206,7 +206,7 @@ public static function shareLinkAddNewButton() {
  * @return Locator
  */
  public static function copyLinkButton() {
- return Locator::forThe()->css("a.sharing-entry__copy")->
+ return Locator::forThe()->css("button.sharing-entry__copy")->
  descendantOf(self::shareLinkRow())->
  describedAs("Copy link button in the details view in Files app");
  }
@@ -391,7 +391,7 @@ public function iWriteDownTheSharedLink() {
  // Clicking on the menu item copies the link to the clipboard, but it is
  // not possible to access that value from the acceptance tests. Due to
  // this the value of the attribute that holds the URL is used instead.
- $this->actor->getSharedNotebook()["shared link"] = $this->actor->find(self::copyLinkButton(), 2)->getWrappedElement()->getAttribute("href");
+ $this->actor->getSharedNotebook()["shared link"] = $this->actor->getSession()->evaluateScript("return document.querySelector('.sharing-entry__link').__vue__.shareLink;");
  }
 
  /**