feat: use list element to display added people

owncloud · Apr 6, 2021 · 6a80150 · 6a80150
1 parent eb821de
commit 6a80150
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 27 deletions.
diff --git a/changelog/unreleased/people-list 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
diff --git 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">