Hide private links based on capabilities, refactor spans in sidebar t…

changelog/unreleased/bugfix-improve-error-screen

@@ -0,0 +1,8 @@
+Bugfix: Add docs link & fix translations on error page
+
+The MissingConfigPage had a translated paragraph that didn't work because 
+of an presumably unallowed `<br/>` tag inside the text.
+
+Also, the link to the GitHub repo was replace with a link to the web docs and public rocket chat.
+
+https://github.com/owncloud/web/pull/5034

changelog/unreleased/enhancement-files-sidebar-shares

@@ -0,0 +1,16 @@
+Enhancement: Improve a11y in the files sidebar peoples & shares section
+
+We've did several improvements to enhance the accessibility on the files sidebar:
+- Gave `role="presentation" to the collaborator avatar
+- Refactored `<span>` and `<div>` tags into `<p>` tags and unified translations a bit
+- Enhanced hints in the collaborator quick action buttons with collaborator name
+- Hide private links if the capability is not enabled
+- Set avatar-images to `:aria-hidden="true"` since they're only visual elements and can be hidden from screenreaders
+- Changed `<section>` wrapper around private link shares
+- Removed `<section>` wrapper around public link shares
+- Removed `<section>` wrapper around collaborators
+- 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()
+
+https://github.com/owncloud/web/pull/5034

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

@@ -1,5 +1,5 @@
 <template>
-  <oc-table-simple top class="files-collaborators-collaborator">
+  <oc-table-simple top class="files-collaborators-collaborator" role="presentation">
     <oc-tr class="files-collaborators-collaborator-table-row-info">
       <oc-td width="shrink">
         <div key="collaborator-avatar-loaded">
@@ -9,7 +9,6 @@
             :width="48"
             :userid="collaborator.collaborator.name"
             :user-name="collaborator.collaborator.displayName"
-            :aria-label="$gettext('User')"
           />
           <div v-else key="collaborator-avatar-placeholder">
             <oc-icon
@@ -34,21 +33,21 @@
       <oc-td>
         <div class="uk-flex uk-flex-column uk-flex-center" :class="collaboratorListItemClass">
           <div class="oc-text-initial oc-mb-xs">
-            <span>
-              <span class="files-collaborators-collaborator-name oc-text-bold">
-                {{ collaborator.collaborator.displayName }}
-              </span>
-              <translate
-                v-if="isCurrentUser"
-                translate-comment="Indicator for current user in list of people"
-                class="oc-text-muted files-collaborators-collaborator-additional-info"
-              >
-                (me)
-              </translate>
-            </span>
-            <span
+            <p 
+              class="files-collaborators-collaborator-name oc-text-bold oc-mb-rm"
+              v-text="collaborator.collaborator.displayName"
+            />
+            <p
+              v-if="isCurrentUser"
+              translate-comment="Indicator for current user in list of people"
+              class="oc-text-muted files-collaborators-collaborator-additional-info oc-my-rm"
+              v-translate
+            >
+              (me)
+            </p>
+            <p
               v-if="collaborator.collaborator.additionalInfo"
-              class="oc-text-muted files-collaborators-collaborator-additional-info"
+              class="oc-text-muted files-collaborators-collaborator-additional-info oc-my-rm"
               v-text="collaborator.collaborator.additionalInfo"
             />
           </div>
@@ -80,7 +79,7 @@
                 class="oc-mt-s"
                 close-on-click
               >
-                <translate tag="h4">Shared by</translate>
+                <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">
                     <div class="uk-flex uk-flex-middle uk-flex-left">
@@ -91,14 +90,15 @@
                         :user-name="resharer.displayName"
                       />
                       <div>
-                        <span class="files-collaborators-resharer-name oc-text-bold">{{
-                          resharer.displayName
-                        }}</span>
-                        <span
+                        <p 
+                          class="files-collaborators-resharer-name oc-text-bold oc-my-rm"
+                          v-text="resharer.displayName"
+                        />
+                        <p
                           v-if="resharer.additionalInfo"
-                          class="oc-text-muted files-collaborators-resharer-additional-info"
-                          >({{ resharer.additionalInfo }})</span
-                        >
+                          class="oc-text-muted files-collaborators-resharer-additional-info oc-my-rm"
+                          v-text="resharer.additionalInfo"
+                        />
                       </div>
                     </div>
                   </li>
@@ -140,8 +140,8 @@
         <div class="uk-flex uk-flex-nowrap uk-flex-middle">
           <oc-button
             v-if="$_editButtonVisible"
-            :aria-label="$gettext('Edit share')"
-            :uk-tooltip="$gettext('Edit share')"
+            :aria-label="editShareHint"
+            :uk-tooltip="editShareHint"
             appearance="raw"
             class="files-collaborators-collaborator-edit"
             @click="$emit('onEdit', collaborator)"
@@ -151,8 +151,8 @@
           <div>
             <oc-button
               v-if="$_deleteButtonVisible"
-              :aria-label="$gettext('Delete share')"
-              :uk-tooltip="$gettext('Delete share')"
+              :aria-label="deleteShareHint"
+              :uk-tooltip="deleteShareHint"
               appearance="raw"
               class="files-collaborators-collaborator-delete"
               @click="$_removeShare"
@@ -222,6 +222,16 @@ export default {
       return this.modifiable && !this.removalInProgress
     },
 
+    editShareHint() {
+      let translated = this.$gettext('Edit share with %{ currentCollaborator }')
+      return this.$gettextInterpolate(translated, { currentCollaborator: this.collaborator.collaborator.displayName }, true)
+    },
+
+    deleteShareHint() {
+      let translated = this.$gettext('Delete share with %{ currentCollaborator }')
+      return this.$gettextInterpolate(translated, { currentCollaborator: this.collaborator.collaborator.displayName }, true)
+    },
+
     isIndirectShare() {
       // it is assumed that the "incoming" attribute only exists
       // on shares coming from this.collaborator.sTree which are all indirect

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

@@ -13,12 +13,12 @@
         {{ errors }}
       </oc-alert>
     </transition>
-    <div
+    <p
       v-if="user.id !== collaborator.owner.name"
       class="oc-text-muted uk-flex uk-flex-middle oc-mb-s"
     >
       <oc-icon name="repeat" class="oc-mr-s" /> {{ collaborator.owner.displayName }}
-    </div>
+    </p>
     <collaborator class="uk-width-expand" :collaborator="collaborator" :first-column="false" />
     <collaborators-edit-options
       :existing-role="$_originalRole"

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

@@ -19,7 +19,7 @@
       </template>
     </oc-autocomplete>
     <div v-if="selectedCollaborators.length > 0">
-      <translate tag="div">Selected people</translate>
+      <h4 class="oc-text-initial oc-mb-rm" v-translate>Selected people</h4>
       <ul class="uk-list files-collaborators-collaborator-autocomplete-items oc-mt-s oc-mb-m">
         <li
           v-for="collaborator in selectedCollaborators"

packages/web-app-files/src/components/FileLinkSidebar.vue

@@ -8,45 +8,42 @@
       <oc-loader v-if="linksLoading" :aria-label="$gettext('Loading list of file links')" />
       <template v-else>
         <private-link-item />
-        <section>
-          <h4 class="oc-text-bold oc-m-rm oc-text-initial">
-            <translate>Public Links</translate>
-          </h4>
-          <div class="oc-text-muted">
-            <i
-              ><translate
-                >Any external person with the respective link can access this resource. No sign-in
-                required. Assign a password to avoid unintended document exposure.
-              </translate>
-            </i>
-          </div>
-          <div class="oc-mt-s oc-mb-s">
-            <oc-button
-              id="files-file-link-add"
-              icon="add"
-              variation="primary"
-              :aria-label="$_addButtonAriaLabel"
-              @click="addNewLink"
-            >
-              <oc-icon name="add" />
-              {{ $_addButtonLabel }}
-            </oc-button>
-          </div>
-          <transition-group
-            class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm"
-            :enter-active-class="$_transitionGroupEnter"
-            :leave-active-class="$_transitionGroupLeave"
-            name="custom-classes-transition"
-            tag="ul"
+        <h4 class="oc-text-bold oc-m-rm oc-text-initial" v-translate>Public Links</h4>
+        <p class="oc-text-muted oc-my-rm" v-translate>
+          Any external person with the respective link can access this resource. No sign-in
+          required. Assign a password to avoid unintended document exposure.
+        </p>
+        <div class="oc-my-s">
+          <oc-button
+            id="files-file-link-add"
+            icon="add"
+            variation="primary"
+            :aria-label="$_addButtonAriaLabel"
+            @click="addNewLink"
           >
-            <li v-for="link in links" :key="link.key">
-              <public-link-list-item :link="link" />
-            </li>
-          </transition-group>
-        </section>
-        <div v-if="$_noPublicLinks" key="oc-file-links-no-results">
-          <translate>No public links</translate>
+            <oc-icon name="add" />
+            {{ $_addButtonLabel }}
+          </oc-button>
         </div>
+        <transition-group
+          class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm"
+          :enter-active-class="$_transitionGroupEnter"
+          :leave-active-class="$_transitionGroupLeave"
+          name="custom-classes-transition"
+          tag="ul"
+        >
+          <li v-for="link in links" :key="link.key">
+            <public-link-list-item :link="link" />
+          </li>
+        </transition-group>
+        <p
+          v-if="$_noPublicLinks"
+          key="oc-file-links-no-results"
+          class="oc-my-rm"
+          v-translate
+        >
+          No public links
+        </p>
       </template>
     </div>
     <div v-if="appSidebarAccordionContext === PANEL_EDIT" :key="PANEL_EDIT">

packages/web-app-files/src/components/FileSharingSidebar.vue

@@ -22,36 +22,35 @@
           class="files-collaborators-no-reshare-permissions-message"
           v-text="noResharePermsMessage"
         />
-        <section>
-          <ul class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm">
-            <li v-if="$_ownerAsCollaborator" :key="$_ownerAsCollaborator.key">
-              <collaborator :collaborator="$_ownerAsCollaborator" />
-            </li>
-            <li>
-              <collaborator :collaborator="$_currentUserAsCollaborator" />
-            </li>
-          </ul>
-          <hr v-if="collaborators.length > 0" class="oc-mt-s oc-mb-s" />
-        </section>
-        <section>
-          <transition-group
-            id="files-collaborators-list"
-            class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm"
-            :enter-active-class="$_transitionGroupEnter"
-            :leave-active-class="$_transitionGroupLeave"
-            name="custom-classes-transition"
-            tag="ul"
-          >
-            <li v-for="collaborator in collaborators" :key="collaborator.key">
-              <collaborator
-                :collaborator="collaborator"
-                :modifiable="!collaborator.indirect"
-                @onDelete="$_ocCollaborators_deleteShare"
-                @onEdit="$_ocCollaborators_editShare"
-              />
-            </li>
-          </transition-group>
-        </section>
+        <template v-if="$_ownerAsCollaborator">
+          <p id="original-sharing-user" class="oc-invisible-sr" v-translate>File owner</p>
+          <collaborator :collaborator="$_ownerAsCollaborator" aria-describedby="original-sharing-user" />
+          <hr/>
+          <collaborator :collaborator="$_currentUserAsCollaborator" />
+        </template>
+        <template v-else>
+          <p id="collaborator-as-fileowner" class="oc-invisible-sr" v-translate>You are the file owner</p>
+          <collaborator :collaborator="$_currentUserAsCollaborator" aria-describedby="collaborator-as-fileowner" />
+        </template>
+        <hr v-if="collaborators.length > 0" class="oc-mt-s oc-mb-s" />
+        <transition-group
+          id="files-collaborators-list"
+          class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm"
+          :enter-active-class="$_transitionGroupEnter"
+          :leave-active-class="$_transitionGroupLeave"
+          name="custom-classes-transition"
+          tag="ul"
+          :aria-label="$gettext('Share receivers')"
+        >
+          <li v-for="collaborator in collaborators" :key="collaborator.key">
+            <collaborator
+              :collaborator="collaborator"
+              :modifiable="!collaborator.indirect"
+              @onDelete="$_ocCollaborators_deleteShare"
+              @onEdit="$_ocCollaborators_editShare"
+            />
+          </li>
+        </transition-group>
       </template>
     </div>
     <new-collaborator

packages/web-app-files/src/components/PublicLinksSidebar/LinkInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="uk-width-expand">
     <div class="oc-mb-s uk-width-1-1">
-      <div class="oc-text-bold uk-text-truncate oc-files-file-link-name" v-text="linkName" />
+      <h5 class="oc-text-bold uk-text-truncate oc-files-file-link-name oc-my-rm oc-text-initial" v-text="linkName" />
       <div class="uk-flex uk-flex-middle uk-width-1-1">
         <a
           :href="link.url"

packages/web-app-files/src/components/PublicLinksSidebar/PrivateLinkItem.vue

@@ -1,9 +1,7 @@
 <template>
-  <section>
-    <translate tag="h4" class="oc-text-bold oc-m-rm oc-text-initial">Private Link</translate>
-    <div class="oc-text-muted oc-mb-xs">
-      <translate tag="i">Only invited people can use this link.</translate>
-    </div>
+  <div v-if="privateLinkEnabled">
+    <h4 class="oc-text-bold oc-m-rm oc-text-initial" v-translate>Private Link</h4>
+    <p class="oc-text-muted oc-my-rm" v-translate>Only invited people can use this link.</p>
     <div class="uk-width-1-1 uk-flex uk-flex-middle">
       <a :href="link" target="_blank" class="uk-text-truncate" v-text="link" />
       <oc-button :aria-label="copyLabel" :uk-tooltip="copyLabel" appearance="raw" class="oc-ml-s">
@@ -25,7 +23,7 @@
       </oc-button>
     </div>
     <hr />
-  </section>
+  </div>
 </template>
 
 <script>
@@ -39,7 +37,7 @@ export default {
   }),
 
   computed: {
-    ...mapGetters('Files', ['highlightedFile']),
+    ...mapGetters('Files', ['highlightedFile', 'capabilities']),
 
     copyLabel() {
       return this.$gettext('Copy private link url')
@@ -53,7 +51,11 @@ export default {
       }
 
       return this.highlightedFile.privateLink
-    }
+    },
+
+    privateLinkEnabled() {
+      return this.capabilities.files.privateLinks
+    },
   },
 
   methods: {

packages/web-runtime/src/components/Avatar.vue

@@ -1,9 +1,8 @@
 <template>
-  <component :is="type" v-if="enabled">
+  <component :is="type" v-if="enabled" :aria-hidden="true">
     <oc-spinner
       v-if="loading"
       key="avatar-loading"
-      :aria-label="$gettext('Loading')"
       :style="`width: ${width}px; height: ${width}px;`"
     />
     <oc-avatar