From 4e9e13dc1aee82105d122e4be057cbe472435dd4 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Tue, 27 Apr 2021 16:49:54 +0100
Subject: [PATCH 1/3] Hide private links based on capabilities, refactor spans
 in sidebar to <p>s

---
 .../components/Collaborators/Collaborator.vue | 53 ++++++++++---------
 .../Collaborators/EditCollaborator.vue        |  4 +-
 .../src/components/FileLinkSidebar.vue        | 23 ++++----
 .../PublicLinksSidebar/LinkInfo.vue           |  2 +-
 .../PublicLinksSidebar/PrivateLinkItem.vue    | 16 +++---
 .../web-runtime/src/components/Avatar.vue     |  2 +-
 6 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/packages/web-app-files/src/components/Collaborators/Collaborator.vue b/packages/web-app-files/src/components/Collaborators/Collaborator.vue
index ce132d1aa53..86e7ca07ef8 100644
--- a/packages/web-app-files/src/components/Collaborators/Collaborator.vue
+++ b/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">
@@ -34,21 +34,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>
@@ -91,14 +91,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 +141,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="$gettext(`Edit share with ${ collaborator.collaborator.displayName }`)"
+            :uk-tooltip="$gettext(`Edit share with ${ collaborator.collaborator.displayName }`)"
             appearance="raw"
             class="files-collaborators-collaborator-edit"
             @click="$emit('onEdit', collaborator)"
@@ -151,8 +152,8 @@
           <div>
             <oc-button
               v-if="$_deleteButtonVisible"
-              :aria-label="$gettext('Delete share')"
-              :uk-tooltip="$gettext('Delete share')"
+              :aria-label="$gettext(`Delete share with ${ collaborator.collaborator.displayName }`)"
+              :uk-tooltip="$gettext(`Delete share with ${ collaborator.collaborator.displayName }`)"
               appearance="raw"
               class="files-collaborators-collaborator-delete"
               @click="$_removeShare"
diff --git a/packages/web-app-files/src/components/Collaborators/EditCollaborator.vue b/packages/web-app-files/src/components/Collaborators/EditCollaborator.vue
index 4cf2b59f592..039f49846b6 100644
--- a/packages/web-app-files/src/components/Collaborators/EditCollaborator.vue
+++ b/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"
diff --git a/packages/web-app-files/src/components/FileLinkSidebar.vue b/packages/web-app-files/src/components/FileLinkSidebar.vue
index abc55eb0c99..3f78516dc96 100644
--- a/packages/web-app-files/src/components/FileLinkSidebar.vue
+++ b/packages/web-app-files/src/components/FileLinkSidebar.vue
@@ -12,14 +12,10 @@
           <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>
+          <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-mt-s oc-mb-s">
             <oc-button
               id="files-file-link-add"
@@ -44,9 +40,14 @@
             </li>
           </transition-group>
         </section>
-        <div v-if="$_noPublicLinks" key="oc-file-links-no-results">
-          <translate>No public links</translate>
-        </div>
+        <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">
diff --git a/packages/web-app-files/src/components/PublicLinksSidebar/LinkInfo.vue b/packages/web-app-files/src/components/PublicLinksSidebar/LinkInfo.vue
index f2c9ed3225d..80d5a1938b9 100644
--- a/packages/web-app-files/src/components/PublicLinksSidebar/LinkInfo.vue
+++ b/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"
diff --git a/packages/web-app-files/src/components/PublicLinksSidebar/PrivateLinkItem.vue b/packages/web-app-files/src/components/PublicLinksSidebar/PrivateLinkItem.vue
index cb7669e1ebd..302a21dfea2 100644
--- a/packages/web-app-files/src/components/PublicLinksSidebar/PrivateLinkItem.vue
+++ b/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>
+  <section 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">
@@ -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: {
diff --git a/packages/web-runtime/src/components/Avatar.vue b/packages/web-runtime/src/components/Avatar.vue
index 6637660112b..e20f24196ef 100644
--- a/packages/web-runtime/src/components/Avatar.vue
+++ b/packages/web-runtime/src/components/Avatar.vue
@@ -3,7 +3,7 @@
     <oc-spinner
       v-if="loading"
       key="avatar-loading"
-      :aria-label="$gettext('Loading')"
+      :aria-label="$gettext('Loading user avatar')"
       :style="`width: ${width}px; height: ${width}px;`"
     />
     <oc-avatar

From 54e65851e9581a770e7c45917e742a8a5cdaa39a Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Wed, 28 Apr 2021 16:39:31 +0100
Subject: [PATCH 2/3] Further improve a11y in file sidebar (focus on
 collaborators & shares)

---
 .../enhancement-files-sidebar-shares          | 16 +++++
 .../components/Collaborators/Collaborator.vue | 21 +++++--
 .../Collaborators/NewCollaborator.vue         |  2 +-
 .../src/components/FileLinkSidebar.vue        | 58 +++++++++---------
 .../src/components/FileSharingSidebar.vue     | 59 +++++++++----------
 .../PublicLinksSidebar/PrivateLinkItem.vue    |  6 +-
 .../web-runtime/src/components/Avatar.vue     |  3 +-
 .../web-runtime/src/pages/oidcCallback.vue    | 20 ++-----
 8 files changed, 97 insertions(+), 88 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-files-sidebar-shares

diff --git a/changelog/unreleased/enhancement-files-sidebar-shares b/changelog/unreleased/enhancement-files-sidebar-shares
new file mode 100644
index 00000000000..c07ca4ab269
--- /dev/null
+++ b/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
diff --git a/packages/web-app-files/src/components/Collaborators/Collaborator.vue b/packages/web-app-files/src/components/Collaborators/Collaborator.vue
index 86e7ca07ef8..5787a2d9592 100644
--- a/packages/web-app-files/src/components/Collaborators/Collaborator.vue
+++ b/packages/web-app-files/src/components/Collaborators/Collaborator.vue
@@ -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
@@ -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">
@@ -141,8 +140,8 @@
         <div class="uk-flex uk-flex-nowrap uk-flex-middle">
           <oc-button
             v-if="$_editButtonVisible"
-            :aria-label="$gettext(`Edit share with ${ collaborator.collaborator.displayName }`)"
-            :uk-tooltip="$gettext(`Edit share with ${ collaborator.collaborator.displayName }`)"
+            :aria-label="editShareHint"
+            :uk-tooltip="editShareHint"
             appearance="raw"
             class="files-collaborators-collaborator-edit"
             @click="$emit('onEdit', collaborator)"
@@ -152,8 +151,8 @@
           <div>
             <oc-button
               v-if="$_deleteButtonVisible"
-              :aria-label="$gettext(`Delete share with ${ collaborator.collaborator.displayName }`)"
-              :uk-tooltip="$gettext(`Delete share with ${ collaborator.collaborator.displayName }`)"
+              :aria-label="deleteShareHint"
+              :uk-tooltip="deleteShareHint"
               appearance="raw"
               class="files-collaborators-collaborator-delete"
               @click="$_removeShare"
@@ -223,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
diff --git a/packages/web-app-files/src/components/Collaborators/NewCollaborator.vue b/packages/web-app-files/src/components/Collaborators/NewCollaborator.vue
index 37d1c182d91..cf76063a1db 100644
--- a/packages/web-app-files/src/components/Collaborators/NewCollaborator.vue
+++ b/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"
diff --git a/packages/web-app-files/src/components/FileLinkSidebar.vue b/packages/web-app-files/src/components/FileLinkSidebar.vue
index 3f78516dc96..cee9addfbc6 100644
--- a/packages/web-app-files/src/components/FileLinkSidebar.vue
+++ b/packages/web-app-files/src/components/FileLinkSidebar.vue
@@ -8,38 +8,34 @@
       <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>
-          <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-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>
+            <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"
diff --git a/packages/web-app-files/src/components/FileSharingSidebar.vue b/packages/web-app-files/src/components/FileSharingSidebar.vue
index b432a93d5c4..8e347c51cdc 100644
--- a/packages/web-app-files/src/components/FileSharingSidebar.vue
+++ b/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
diff --git a/packages/web-app-files/src/components/PublicLinksSidebar/PrivateLinkItem.vue b/packages/web-app-files/src/components/PublicLinksSidebar/PrivateLinkItem.vue
index 302a21dfea2..c3fea3a33c8 100644
--- a/packages/web-app-files/src/components/PublicLinksSidebar/PrivateLinkItem.vue
+++ b/packages/web-app-files/src/components/PublicLinksSidebar/PrivateLinkItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <section v-if="privateLinkEnabled">
+  <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">
@@ -23,7 +23,7 @@
       </oc-button>
     </div>
     <hr />
-  </section>
+  </div>
 </template>
 
 <script>
@@ -37,7 +37,7 @@ export default {
   }),
 
   computed: {
-    ...mapGetters('Files', ['highlightedFile'], ['capabilities']),
+    ...mapGetters('Files', ['highlightedFile', 'capabilities']),
 
     copyLabel() {
       return this.$gettext('Copy private link url')
diff --git a/packages/web-runtime/src/components/Avatar.vue b/packages/web-runtime/src/components/Avatar.vue
index e20f24196ef..9c3f52850df 100644
--- a/packages/web-runtime/src/components/Avatar.vue
+++ b/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 user avatar')"
       :style="`width: ${width}px; height: ${width}px;`"
     />
     <oc-avatar
diff --git a/packages/web-runtime/src/pages/oidcCallback.vue b/packages/web-runtime/src/pages/oidcCallback.vue
index 4371a4e6f3b..77b9472ab0e 100644
--- a/packages/web-runtime/src/pages/oidcCallback.vue
+++ b/packages/web-runtime/src/pages/oidcCallback.vue
@@ -8,25 +8,15 @@
     <div class="oc-login-card uk-position-center">
       <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
       <div v-show="error" class="oc-login-card-body">
-        <h2 class="oc-login-card-title">
-          <translate>Authentication failed</translate>
-        </h2>
-        <p v-translate>
-          Please contact the administrator if this error persists.
-        </p>
+        <h2 class="oc-login-card-title" v-translate>Authentication failed</h2>
+        <p v-translate>Please contact the administrator if this error persists.</p>
       </div>
       <div v-show="!error" class="oc-login-card-body">
-        <h3 class="oc-login-card-title">
-          <translate>Redirecting</translate>
-        </h3>
-        <p v-translate>
-          Please wait a while. You are being redirected.
-        </p>
+        <h3 class="oc-login-card-title" v-translate>Redirecting</h3>
+        <p v-translate>Please wait a while. You are being redirected.</p>
       </div>
       <div class="oc-login-card-footer">
-        <p>
-          {{ configuration.theme.general.slogan }}
-        </p>
+        <p>{{ configuration.theme.general.slogan }}</p>
       </div>
     </div>
   </div>

From 319c7dd38bdebcbed36f53d86ad94c3e705cf88f Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Wed, 28 Apr 2021 16:48:53 +0100
Subject: [PATCH 3/3] Fix translation & add better links to error page

---
 .../unreleased/bugfix-improve-error-screen      |  8 ++++++++
 .../src/pages/missingOrInvalidConfig.vue        | 17 ++++++-----------
 2 files changed, 14 insertions(+), 11 deletions(-)
 create mode 100644 changelog/unreleased/bugfix-improve-error-screen

diff --git a/changelog/unreleased/bugfix-improve-error-screen b/changelog/unreleased/bugfix-improve-error-screen
new file mode 100644
index 00000000000..d4bb1305174
--- /dev/null
+++ b/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
diff --git a/packages/web-runtime/src/pages/missingOrInvalidConfig.vue b/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
index ba6ac91f704..3280723a9da 100644
--- a/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
+++ b/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
@@ -4,21 +4,16 @@
       <div class="oc-login-card uk-position-center">
         <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
         <div class="oc-login-card-body">
-          <h1 class="oc-login-card-title">
-            <span v-translate>Missing or invalid config</span>
-          </h1>
-          <p v-translate>
-            Please check if the file config.json exists and is correct.<br />
-            Check the console for more information.
-          </p>
+          <h1 class="oc-login-card-title" v-translate>Missing or invalid config</h1>
+          <p v-translate>Please check if the file config.json exists and is correct.</p>
+          <p v-translate>Also, make sure to check the browser console for more information.</p>
         </div>
         <div class="oc-login-card-footer">
           <p>
-            <!-- Until we have documentation for Web let's point this link to Web repo -->
             <translate>For help visit our</translate>
-            <translate tag="a" href="https://github.com/owncloud/web" target="_blank"
-              >documentation</translate
-            >.
+            <a href="https://owncloud.dev/clients/web" target="_blank" v-translate>documentation</a>
+            <translate>or join our</translate>
+            <a href="https://talk.owncloud.com/channel/phoenix" target="_blank" v-translate>chat</a>.
           </p>
         </div>
       </div>