29042021 move tags into lists

changelog/unreleased/enhancement-files-sidebar-shares

@@ -12,5 +12,7 @@ We've did several improvements to enhance the accessibility on the files sidebar
 - Added screenreader-only explain texts regarding collaborator/share ownership
 - Added aria-label for share receiver section
 - Worked on unifying the way we handle translations: Focus on v-translate and $gettext()
+- Turn tags into `<ul> & <li>` list, add aria-labelledby to both tag list and resharer tag list
 
 https://github.com/owncloud/web/pull/5034
+https://github.com/owncloud/web/pull/5043

packages/web-app-files/src/components/Collaborators/Collaborator.vue

@@ -1,7 +1,7 @@
 <template>
   <oc-table-simple top class="files-collaborators-collaborator" role="presentation">
     <oc-tr class="files-collaborators-collaborator-table-row-info">
-      <oc-td width="shrink">
+      <oc-td width="shrink" class="oc-py-rm oc-pr-s">
         <div key="collaborator-avatar-loaded">
           <avatar-image
             v-if="isUser"
@@ -30,7 +30,7 @@
           </div>
         </div>
       </oc-td>
-      <oc-td>
+      <oc-td class="oc-py-rm oc-pr-s">
         <div class="uk-flex uk-flex-column uk-flex-center" :class="collaboratorListItemClass">
           <div class="oc-text-initial oc-mb-xs">
             <p
@@ -51,14 +51,19 @@
               v-text="collaborator.collaborator.additionalInfo"
             />
           </div>
-          <oc-grid gutter="small">
-            <div v-if="!isCurrentUser">
+          <span id="collaborator-list-label" v-translate class="oc-invisible-sr">Tags</span>
+          <ul
+            id="collaborator-list"
+            class="oc-my-rm oc-pl-rm"
+            aria-labelledby="collaborator-list-label"
+          >
+            <li v-if="!isCurrentUser" class="oc-py-rm">
               <oc-tag class="files-collaborators-collaborator-share-type">
                 <oc-icon :name="collaboratorTypeTagIcon" />
                 {{ collaboratorType(collaborator.shareType) }}
               </oc-tag>
-            </div>
-            <div v-if="$_reshareInformation">
+            </li>
+            <li v-if="$_reshareInformation" class="oc-py-rm">
               <oc-tag
                 :id="$_resharerToggleId"
                 class="files-collaborators-collaborator-reshare-information"
@@ -79,9 +84,16 @@
                 class="oc-mt-s"
                 close-on-click
               >
-                <h4 v-translate>Shared by</h4>
-                <ul class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm">
-                  <li v-for="resharer in collaborator.resharers" :key="resharer.name">
+                <h4 id="resharer-info" v-translate>Shared by</h4>
+                <ul
+                  class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm"
+                  aria-labelledby="resharer-info"
+                >
+                  <li
+                    v-for="resharer in collaborator.resharers"
+                    :key="resharer.name"
+                    class="oc-py-rm"
+                  >
                     <div class="uk-flex uk-flex-middle uk-flex-left">
                       <avatar-image
                         class="oc-mr-s"
@@ -104,22 +116,22 @@
                   </li>
                 </ul>
               </oc-drop>
-            </div>
-            <div>
+            </li>
+            <li class="oc-py-rm">
               <oc-tag class="files-collaborators-collaborator-role">
                 <oc-icon :name="roleTagIcon" />
                 {{ originalRole.label }}
               </oc-tag>
-            </div>
-            <div v-if="collaborator.expires">
+            </li>
+            <li v-if="collaborator.expires" class="oc-py-rm">
               <oc-tag class="files-collaborators-collaborator-expires">
                 <oc-icon name="text-calendar" />
                 <translate :translate-params="{ expires: formDateFromNow(expirationDate) }">
                   Expires %{expires}
                 </translate>
               </oc-tag>
-            </div>
-            <div v-if="isIndirectShare">
+            </li>
+            <li v-if="isIndirectShare" class="oc-py-rm">
               <oc-tag
                 type="router-link"
                 class="files-collaborators-collaborator-follow-via"
@@ -132,11 +144,11 @@
                   v-text="viaLabel"
                 />
               </oc-tag>
-            </div>
-          </oc-grid>
+            </li>
+          </ul>
         </div>
       </oc-td>
-      <oc-td width="shrink" align-v="top">
+      <oc-td width="shrink" align-v="top" class="oc-py-rm oc-pr-s">
         <div class="uk-flex uk-flex-nowrap uk-flex-middle">
           <oc-button
             v-if="$_editButtonVisible"
@@ -357,17 +369,20 @@ export default {
 }
 </script>
 
-<style scoped="scoped">
-/* FIXME: Move to ODS somehow */
-.files-collaborators-collaborator-table-row-top > td {
-  padding: 0 10px 3px 0;
-}
-.files-collaborators-collaborator-table-row-info > td {
-  padding: 0 10px 0 0;
-}
-.files-collaborators-collaborator-table-row-bottom > td {
-  padding: 3px 10px 0 0;
+<style lang="scss" scoped="scoped">
+#collaborator-list {
+  list-style-type: none;
+
+  li {
+    float: left;
+
+    &:not(:first-child) {
+      padding-left: 0.5rem;
+    }
+  }
 }
+
+/* FIXME: Move to ODS somehow */
 .files-collaborators-collaborator-via-label {
   max-width: 75%;
 }

yarn.lock

@@ -10785,6 +10785,11 @@ 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"