upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-06-09 00:32:29 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 35

Merge pull request #35272 from nextcloud/enh/a11y-share-search-label

Browse source 
Add label to sharing search field
This commit is contained in:
Pytal 2022-11-23 16:55:12 -08:00 committed by GitHub
commit dbc7290f0d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 57 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
apps/files_sharing/src/components/SharingInput.vue
View file

@ -21,31 +21,35 @@
-->
<template>
<NcMultiselect ref="multiselect"
class="sharing-input"
:clear-on-select="true"
:disabled="!canReshare"
:hide-selected="true"
:internal-search="false"
:loading="loading"
:options="options"
:placeholder="inputPlaceholder"
:preselect-first="true"
:preserve-search="true"
:searchable="true"
:user-select="true"
open-direction="below"
label="displayName"
track-by="id"
@search-change="asyncFind"
@select="addShare">
<template #noOptions>
{{ t('files_sharing', 'No recommendations. Start typing.') }}
</template>
<template #noResult>
{{ noResultText }}
</template>
</NcMultiselect>
<div class="sharing-search">
<label for="sharing-search-input">{{ t('files_sharing', 'Search for share recipients') }}</label>
<NcMultiselect ref="multiselect"
id="sharing-search-input"
class="sharing-search__input"
:clear-on-select="true"
:disabled="!canReshare"
:hide-selected="true"
:internal-search="false"
:loading="loading"
:options="options"
:placeholder="inputPlaceholder"
:preselect-first="true"
:preserve-search="true"
:searchable="true"
:user-select="true"
open-direction="below"
label="displayName"
track-by="id"
@search-change="asyncFind"
@select="addShare">
<template #noOptions>
{{ t('files_sharing', 'No recommendations. Start typing.') }}
</template>
<template #noResult>
{{ noResultText }}
</template>
</NcMultiselect>
</div>
</template>
<script>
@ -521,20 +525,30 @@ export default {
</script>
<style lang="scss">
.sharing-input {
width: 100%;
margin: 10px 0;
.sharing-search {
display: flex;
flex-direction: column;
margin-bottom: 4px;
// properly style the lookup entry
.multiselect__option {
span[lookup] {
.avatardiv {
background-image: var(--icon-search-white);
background-repeat: no-repeat;
background-position: center;
background-color: var(--color-text-maxcontrast) !important;
div {
display: none;
label[for="sharing-search-input"] {
margin-bottom: 2px;
}
&__input {
width: 100%;
margin: 10px 0;
// properly style the lookup entry
.multiselect__option {
span[lookup] {
.avatardiv {
background-image: var(--icon-search-white);
background-repeat: no-repeat;
background-position: center;
background-color: var(--color-text-maxcontrast) !important;
div {
display: none;
}
}
}
}

4
dist/files_sharing-files_sharing_tab.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/files_sharing-files_sharing_tab.js.map vendored
View file

File diff suppressed because one or more lines are too long

4
tests/acceptance/features/bootstrap/FilesAppSharingContext.php
View file

@ -41,7 +41,7 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
* @return Locator
*/
public static function shareWithInput() {
return Locator::forThe()->css(".sharing-input .multiselect__input")->
return Locator::forThe()->css(".sharing-search__input .multiselect__input")->
descendantOf(FilesAppContext::detailsView())->
describedAs("Share with input in the details view in Files app");
}
@ -50,7 +50,7 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
* @return Locator
*/
public static function shareWithInputResults() {
return Locator::forThe()->css(".sharing-input .multiselect__content-wrapper")->
return Locator::forThe()->css(".sharing-search__input .multiselect__content-wrapper")->
descendantOf(FilesAppContext::detailsView())->
describedAs("Share with input results list in the details view in Files app");
}