Unique IDs in people shares sidebar & outline button in batch actions

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

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

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 {

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>

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"