From 190d50eb6d2aad245cc162912ebc881017e59f34 Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <tleilax+studip@gmail.com>
Date: Tue, 19 Sep 2023 14:43:26 +0000
Subject: [PATCH] file tables: connect checkboxes with folder/file names, fixes
 #819

Closes #819

Merge request studip/studip!438
---
 resources/vue/components/FilesTable.vue | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/resources/vue/components/FilesTable.vue b/resources/vue/components/FilesTable.vue
index 3ba26002644..c521d1e890f 100644
--- a/resources/vue/components/FilesTable.vue
+++ b/resources/vue/components/FilesTable.vue
@@ -42,10 +42,11 @@
             </colgroup>
             <thead>
                 <tr class="sortable">
-                    <th v-if="show_bulk_actions" data-sort="false">
+                    <th v-if="show_bulk_actions" data-sort="false" :aria-label="$gettext('Ordner und Dateien auswählen')">
                         <studip-proxy-checkbox
                             v-model="selectedIds"
                             :total="allIds"
+                            :title="$gettext('Alle Ordner und Dateien auswählen')"
                         ></studip-proxy-checkbox>
                     </th>
                     <th @click="sort('mime_type')" :class="sortClasses('mime_type')">
@@ -115,10 +116,11 @@
                             name="ids[]"
                             :value="folder.id"
                             v-model="selectedIds"
+                            :aria-label="getAriaLabelForFolder(folder)"
                         ></studip-proxied-checkbox>
                     </td>
                     <td class="document-icon">
-                        <a :href="folder.url">
+                        <a :href="folder.url" :id="`folder-${folder.id}`">
                             <studip-icon :shape="folder.icon" role="clickable" size="26" class="text-bottom"></studip-icon>
                         </a>
                     </td>
@@ -166,6 +168,7 @@
                             name="ids[]"
                             :value="file.id"
                             v-model="selectedIds"
+                            :aria-label="getAriaLabelForFile(file)"
                         ></studip-proxied-checkbox>
                     </td>
                     <td class="document-icon">
@@ -180,8 +183,7 @@
                            data-lightbox="gallery"></a>
                     </td>
                     <td :class="{'filter-match': valueMatchesFilter(file.name)}">
-
-                        <a :href="file.details_url" data-dialog>
+                        <a :href="file.details_url" data-dialog :id="`file-${file.id}`">
                             <span v-html="highlightString(file.name)"></span>
                             <studip-icon v-if="file.isAccessible"
                                          shape="accessibility"
@@ -393,6 +395,18 @@ export default {
                 highlighted = highlighted.replace(regExp, '<span class="filter-match">$&</span>');
             }
             return highlighted;
+        },
+        getAriaLabelForFolder(folder) {
+            return this.$gettextInterpolate(
+                this.$gettext('Ordner %{name} auswählen'),
+                {name: folder.name}
+            );
+        },
+        getAriaLabelForFile(file) {
+            return this.$gettextInterpolate(
+                this.$gettext('Datei %{name} auswählen'),
+                {name: file.name}
+            );
         }
     },
     computed: {
-- 
GitLab