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

Add label to sharing search field
nextcloud · Nov 24, 2022 · dbc7290 · dbc7290
2 parents cd9f538 + 20da3d0
commit dbc7290
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 44 deletions.
diff --git a/apps/files_sharing/src/components/SharingInput.vue b/apps/files_sharing/src/components/SharingInput.vue
@@ -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;
-
- // 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;
+.sharing-search {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 4px;
+
+ 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;
+ }
  }
  }
  }

diff --git a/dist/files_sharing-files_sharing_tab.js b/dist/files_sharing-files_sharing_tab.js
diff --git a/dist/files_sharing-files_sharing_tab.js.map b/dist/files_sharing-files_sharing_tab.js.map
diff --git a/tests/acceptance/features/bootstrap/FilesAppSharingContext.php b/tests/acceptance/features/bootstrap/FilesAppSharingContext.php
@@ -41,7 +41,7 @@ public static function sharedByLabel() {
  * @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 @@ public static function shareWithInput() {
  * @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");
  }