From 612c52313b2502b16bc2112559a60398a10d8fd9 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Tue, 25 May 2021 15:51:49 +0100
Subject: [PATCH] Unique IDs in people shares sidebar & outline button in batch
 actions

---
 changelog/unreleased/bugfix-quick-action-ids  |  6 ------
 changelog/unreleased/bugfix-unique-ids        | 12 ++++++++++++
 .../unreleased/enhancement-button-appearance  | 10 ++++++++++
 .../enhancement-share-action-buttons          |  6 ------
 .../components/Collaborators/Collaborator.vue | 19 ++++++++++++-------
 .../src/components/InfoSelectedResources.vue  |  4 ++--
 yarn.lock                                     |  5 -----
 7 files changed, 36 insertions(+), 26 deletions(-)
 delete mode 100644 changelog/unreleased/bugfix-quick-action-ids
 create mode 100644 changelog/unreleased/bugfix-unique-ids
 create mode 100644 changelog/unreleased/enhancement-button-appearance
 delete mode 100644 changelog/unreleased/enhancement-share-action-buttons

diff --git a/changelog/unreleased/bugfix-quick-action-ids b/changelog/unreleased/bugfix-quick-action-ids
deleted file mode 100644
index 38fd25bf023..00000000000
--- a/changelog/unreleased/bugfix-quick-action-ids
+++ /dev/null
@@ -1,6 +0,0 @@
-Bugfix: Change quick action from IDs to classes
-
-Quick action button IDs were repeated in every row of the file table, which isn't allowed in HTML (IDs must be unique per document).
-By changing to classes, this offense was resolved.
-
-https://github.com/owncloud/web/pull/5028
diff --git a/changelog/unreleased/bugfix-unique-ids b/changelog/unreleased/bugfix-unique-ids
new file mode 100644
index 00000000000..7d3429b5400
--- /dev/null
+++ b/changelog/unreleased/bugfix-unique-ids
@@ -0,0 +1,12 @@
+Bugfix: Make sure IDs in HTML are unique
+
+Quick action button IDs were repeated in every row of the file table, 
+which isn't allowed in HTML (IDs must be unique per document).
+By changing to classes, this offense was resolved.
+
+The same goes for IDs in the people shares part of the sidebar where IDs 
+are now appended with the share ID, which is necessary since they need to be 
+both unique and referenced by ID for accessibility reasons.
+
+https://github.com/owncloud/web/pull/5028
+https://github.com/owncloud/web/pull/5147
diff --git a/changelog/unreleased/enhancement-button-appearance b/changelog/unreleased/enhancement-button-appearance
new file mode 100644
index 00000000000..f5049862bf4
--- /dev/null
+++ b/changelog/unreleased/enhancement-button-appearance
@@ -0,0 +1,10 @@
+Enhancement: Button appearance
+
+Changed the appearance of the "accept/decline share" buttons in the "Shared With Me" file list
+so they actually look like buttons.
+
+Also changed the "Clear selection" button in the files table batch actions 
+from `raw` to `outline` appearance.
+
+https://github.com/owncloud/web/pull/5053
+https://github.com/owncloud/web/pull/5147
diff --git a/changelog/unreleased/enhancement-share-action-buttons b/changelog/unreleased/enhancement-share-action-buttons
deleted file mode 100644
index 249cee5eb8f..00000000000
--- a/changelog/unreleased/enhancement-share-action-buttons
+++ /dev/null
@@ -1,6 +0,0 @@
-Enhancement: Share action button appearance
-
-Changed the appearance of the "accept/decline share" buttons in the "Shared With Me" file list
-so they actually look like buttons.
-
-https://github.com/owncloud/web/pull/5053
diff --git a/packages/web-app-files/src/components/Collaborators/Collaborator.vue b/packages/web-app-files/src/components/Collaborators/Collaborator.vue
index 009801b65e0..fd3442c812d 100644
--- a/packages/web-app-files/src/components/Collaborators/Collaborator.vue
+++ b/packages/web-app-files/src/components/Collaborators/Collaborator.vue
@@ -51,11 +51,12 @@
               v-text="collaborator.collaborator.additionalInfo"
             />
           </div>
-          <span id="collaborator-list-label" v-translate class="oc-invisible-sr">Tags</span>
+          <span :id="`collaborator-list-label-${shareId}`" v-translate class="oc-invisible-sr"
+            >Tags</span
+          >
           <ul
-            id="collaborator-list"
-            class="oc-my-rm oc-pl-rm"
-            aria-labelledby="collaborator-list-label"
+            class="collaborator-list oc-my-rm oc-pl-rm"
+            :aria-labelledby="`collaborator-list-label-${shareId}`"
           >
             <li v-if="!isCurrentUser" class="oc-py-rm">
               <oc-tag class="files-collaborators-collaborator-share-type">
@@ -84,10 +85,10 @@
                 class="oc-mt-s"
                 close-on-click
               >
-                <h4 id="resharer-info" v-translate>Shared by</h4>
+                <h4 :id="`resharer-info-${shareId}`" v-translate>Shared by</h4>
                 <ul
                   class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm"
-                  aria-labelledby="resharer-info"
+                  :aria-labelledby="`resharer-info-${shareId}`"
                 >
                   <li
                     v-for="resharer in collaborator.resharers"
@@ -220,6 +221,10 @@ export default {
       return shareTypes
     },
 
+    shareId() {
+      return this.collaborator.id
+    },
+
     $_resharerToggleId() {
       return 'collaborator-' + this.collaborator.collaborator.name + '-resharer-details-toggle'
     },
@@ -366,7 +371,7 @@ export default {
 </script>
 
 <style lang="scss" scoped="scoped">
-#collaborator-list {
+.collaborator-list {
   list-style-type: none;
 
   li {
diff --git a/packages/web-app-files/src/components/InfoSelectedResources.vue b/packages/web-app-files/src/components/InfoSelectedResources.vue
index 7b9df112cc6..b409a639c03 100644
--- a/packages/web-app-files/src/components/InfoSelectedResources.vue
+++ b/packages/web-app-files/src/components/InfoSelectedResources.vue
@@ -19,8 +19,8 @@
       >%{ amount } selected item
     </translate>
     <span class="oc-ml-s oc-mr-s">|</span>
-    <oc-button appearance="raw" @click="RESET_SELECTION">
-      <translate>Clear selection</translate>
+    <oc-button v-translate appearance="outline" @click="RESET_SELECTION">
+      Clear selection
     </oc-button>
   </div>
 </template>
diff --git a/yarn.lock b/yarn.lock
index 6d9cddc0d5b..94bebada7b9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10785,11 +10785,6 @@ vue-axe@^2.4.4:
   resolved "https://registry.yarnpkg.com/vue-axe/-/vue-axe-2.4.4.tgz#fbe7ee93bc7e4cacf9dac0a1b0cfaa9e91f66dda"
   integrity sha512-zIhIenmvSzzDYLSGMRCZWHPXGryW5qAWNSKGzuzgn1/tK9zwYpWXagIihD91egyHKz9yWkPjcTO25bnxq9/OPg==
 
-vue-axe@^2.4.4:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/vue-axe/-/vue-axe-2.4.4.tgz#fbe7ee93bc7e4cacf9dac0a1b0cfaa9e91f66dda"
-  integrity sha512-zIhIenmvSzzDYLSGMRCZWHPXGryW5qAWNSKGzuzgn1/tK9zwYpWXagIihD91egyHKz9yWkPjcTO25bnxq9/OPg==
-
 vue-clipboard2@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz#6e551fb7bd384889b28b0da3b12289ed6bca4894"