Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use list element to display added people #4915

Merged
merged 2 commits into from
Apr 8, 2021
Merged

Use list element to display added people #4915

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ba8edb
feat: use list element to display added people
LukasHirt Apr 6, 2021
bfff689
tests: fix remove new collaborator selector
LukasHirt Apr 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions changelog/unreleased/people-list
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
47 changes: 20 additions & 27 deletions packages/web-app-files/src/components/Collaborators/NewCollaborator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-items oc-mt-s oc-mb-m">
<li
v-for="collaborator in selectedCollaborators"
:key="collaborator.value.shareWith + '-' + collaborator.value.shareType"
class="uk-flex files-collaborators-collaborator-autocomplete-item"
>
<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">
Expand Down
2 changes: 1 addition & 1 deletion tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down