From 7ba8edb849f755eb2bcf392730532f03b63fe2d4 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Tue, 6 Apr 2021 15:39:03 +0200
Subject: [PATCH 1/2] feat: use list element to display added people

---
 changelog/unreleased/people-list              |  6 +++
 .../Collaborators/NewCollaborator.vue         | 47 ++++++++-----------
 2 files changed, 26 insertions(+), 27 deletions(-)
 create mode 100644 changelog/unreleased/people-list

diff --git a/changelog/unreleased/people-list b/changelog/unreleased/people-list
new file mode 100644
index 00000000000..8667d73b733
--- /dev/null
+++ b/changelog/unreleased/people-list
@@ -0,0 +1,6 @@
+Enhancement: Use list for displaying added people
+
+We've changed the HTML elements in the people accordion when adding new people.
+People added via people autocomplete are now displayed in a list element to use correct structure for screen readers.
+
+https://github.com/owncloud/web/pull/4915
\ No newline at end of file
diff --git a/packages/web-app-files/src/components/Collaborators/NewCollaborator.vue b/packages/web-app-files/src/components/Collaborators/NewCollaborator.vue
index ebe25e6672d..cd94be54713 100644
--- a/packages/web-app-files/src/components/Collaborators/NewCollaborator.vue
+++ b/packages/web-app-files/src/components/Collaborators/NewCollaborator.vue
@@ -18,34 +18,27 @@
         <autocomplete-item :item="item" />
       </template>
     </oc-autocomplete>
-    <oc-grid v-if="selectedCollaborators.length > 0" gutter="small">
-      <div>
-        <div>
-          <translate>Selected people</translate>
-        </div>
-        <oc-table-simple class="uk-width-expand files-collaborators-collaborator-autocomplete-item">
-          <oc-tr
-            v-for="collaborator in selectedCollaborators"
-            :key="collaborator.value.shareWith + '-' + collaborator.value.shareType"
+    <div v-if="selectedCollaborators.length > 0">
+      <translate tag="div">Selected people</translate>
+      <ul class="uk-list files-collaborators-collaborator-autocomplete-item oc-mt-s oc-mb-m">
+        <li
+          v-for="collaborator in selectedCollaborators"
+          :key="collaborator.value.shareWith + '-' + collaborator.value.shareType"
+          class="uk-flex"
+        >
+          <oc-button
+            :aria-label="$gettext('Delete share')"
+            appearance="raw"
+            size="small"
+            class="files-collaborators-collaborator-autocomplete-item-remove oc-mr-xs"
+            @click="$_ocCollaborators_removeFromSelection(collaborator)"
           >
-            <oc-td width="shrink">
-              <oc-button
-                :aria-label="$gettext('Delete share')"
-                appearance="raw"
-                size="small"
-                class="files-collaborators-collaborator-autocomplete-item-remove"
-                @click="$_ocCollaborators_removeFromSelection(collaborator)"
-              >
-                <oc-icon name="close" />
-              </oc-button>
-            </oc-td>
-            <oc-td>
-              <autocomplete-item :item="collaborator" />
-            </oc-td>
-          </oc-tr>
-        </oc-table-simple>
-      </div>
-    </oc-grid>
+            <oc-icon name="close" />
+          </oc-button>
+          <autocomplete-item :item="collaborator" />
+        </li>
+      </ul>
+    </div>
     <collaborators-edit-options class="oc-mb" @optionChange="collaboratorOptionChanged" />
     <hr class="divider" />
     <oc-grid gutter="small" class="oc-mb">

From bfff6897e67f5a15d3db059d58c25de87a5388bd Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Wed, 7 Apr 2021 16:59:07 +0200
Subject: [PATCH 2/2] tests: fix remove new collaborator selector

---
 .../src/components/Collaborators/NewCollaborator.vue          | 4 ++--
 .../acceptance/pageObjects/FilesPageElement/sharingDialog.js  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/components/Collaborators/NewCollaborator.vue b/packages/web-app-files/src/components/Collaborators/NewCollaborator.vue
index cd94be54713..4927eed43e1 100644
--- a/packages/web-app-files/src/components/Collaborators/NewCollaborator.vue
+++ b/packages/web-app-files/src/components/Collaborators/NewCollaborator.vue
@@ -20,11 +20,11 @@
     </oc-autocomplete>
     <div v-if="selectedCollaborators.length > 0">
       <translate tag="div">Selected people</translate>
-      <ul class="uk-list files-collaborators-collaborator-autocomplete-item oc-mt-s oc-mb-m">
+      <ul class="uk-list files-collaborators-collaborator-autocomplete-items oc-mt-s oc-mb-m">
         <li
           v-for="collaborator in selectedCollaborators"
           :key="collaborator.value.shareWith + '-' + collaborator.value.shareType"
-          class="uk-flex"
+          class="uk-flex files-collaborators-collaborator-autocomplete-item"
         >
           <oc-button
             :aria-label="$gettext('Delete share')"
diff --git a/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js b/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js
index c4718305dd2..f7939ddaed9 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js
@@ -669,7 +669,7 @@ module.exports = {
     },
     newCollaboratorItems: {
       selector:
-        "//div[@id='oc-files-sharing-sidebar']//table[contains(@class, 'files-collaborators-collaborator-autocomplete-item')]//div[contains(., '%s')]/ancestor::tr[position()=1]"
+        "//span[contains(@class, 'files-collaborators-autocomplete-username') and contains(., '%s')]/ancestor::li[contains(@class, 'files-collaborators-collaborator-autocomplete-item')]"
     },
     newCollaboratorRemoveButton: {
       selector: