enhancement(web): show select-all checkbox label in tile view (#12640)

feat(web): show select-all checkbox label in tile view

Make the select-all checkbox label visible in the tile view to match
the list view and make the checkbox's purpose clear.

Author: mzner

changelog/unreleased/enhancement-show-select-all-checkbox-in-tile-view.md

@@ -0,0 +1,7 @@
+Enhancement: Show the select-all checkbox label in tile view
+
+The label of the select-all checkbox in the resource tiles view is now
+visible, improving the user experience by making it clear what the
+checkbox is for.
+
+https://github.com/owncloud/ocis/pull/12640

web/packages/web-pkg/src/components/FilesList/ResourceTiles.vue

@@ -7,7 +7,7 @@
         class="oc-ml-s"
         size="large"
         :label="selectAllCheckboxLabel"
-        :label-hidden="true"
+        :label-hidden="false"
         :disabled="resources.length === disabledResourceIds.length"
         :model-value="areAllResourcesSelected"
         @click.stop="toggleSelectionAll"

web/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`ResourceTiles component > renders a footer slot 1`] = `
 "<div id="tiles-view" class="oc-px-m oc-pt-l">
-  <div class="oc-flex oc-flex-middle oc-mb-m oc-pb-s oc-tiles-controls"><span class="oc-ml-s"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" disabled="" aria-label="Select all"> <!--v-if--></span>
+  <div class="oc-flex oc-flex-middle oc-mb-m oc-pb-s oc-tiles-controls"><span class="oc-ml-s"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" disabled=""> <label for="tiles-view-select-all" class="">Select all</label></span>
     <!--v-if-->
   </div>
   <ul class="oc-list oc-my-rm oc-mx-rm oc-tiles"> </ul>
@@ -13,7 +13,7 @@ exports[`ResourceTiles component > renders a footer slot 1`] = `
 
 exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
 "<div id="tiles-view" class="oc-px-m oc-pt-l">
-  <div class="oc-flex oc-flex-middle oc-mb-m oc-pb-s oc-tiles-controls"><span class="oc-ml-s"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" aria-label="Select all"> <!--v-if--></span>
+  <div class="oc-flex oc-flex-middle oc-mb-m oc-pb-s oc-tiles-controls"><span class="oc-ml-s"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l"> <label for="tiles-view-select-all" class="oc-cursor-pointer">Select all</label></span>
     <!--v-if-->
   </div>
   <ul class="oc-list oc-my-rm oc-mx-rm oc-tiles">