fixes #4227

Closes #4227

Merge request studip/studip!3058

2 files changed, 25 insertions, 62 deletions

diff --git a/resources/assets/stylesheets/scss/tables.scss b/resources/assets/stylesheets/scss/tables.scss
index 058569f..9e05f01 100644
--- a/resources/assets/stylesheets/scss/tables.scss
+++ b/resources/assets/stylesheets/scss/tables.scss
@@ -271,15 +271,11 @@ tr.sortable {
     }
 
     th.sortasc {
-        span[role=img] {
-            @include icon('after', 'arr_1up', 'clickable');
-        }
+        @include icon('after', 'arr_1up', 'clickable');
     }
 
     th.sortdesc {
-        span[role=img] {
-            @include icon('after', 'arr_1down', 'clickable');
-        }
+        @include icon('after', 'arr_1down', 'clickable');
     }
 }
 
diff --git a/resources/vue/components/FilesTable.vue b/resources/vue/components/FilesTable.vue
index 2a0a15a..0c9dbda 100644
--- a/resources/vue/components/FilesTable.vue
+++ b/resources/vue/components/FilesTable.vue
@@ -54,109 +54,73 @@
                     <th @click="sort('mime_type')"
                         :class="sortClasses('mime_type')"
                         :aria-sort="getAriaSortString('mime_type')"
-                        :aria-labelledby="sortedBy === 'mime_type' ? 'sort-indicator-mime_type' : null">
+                        :aria-label="getAriaSortLabel('mime_type', $gettext('Typ'))"
+                    >
                         <a href="#"
                            @click.prevent
                            :title="$gettext('Nach Typ sortieren')">
                             {{ $gettext('Typ') }}
                         </a>
-                        <span v-if="sortedBy === 'mime_type'"
-                              role="img"
-                              id="sort-indicator-mime_type"
-                              :aria-label="sortDirection === 'asc'
-                                ? $gettext('Es wird aufsteigend nach der Spalte Typ sortiert.')
-                                : $gettext('Es wird absteigend nach der Spalte Typ sortiert.')">
-                        </span>
                     </th>
                     <th @click="sort('name')"
                         :class="sortClasses('name')"
                         :aria-sort="getAriaSortString('name')"
-                        :aria-labelledby="sortedBy === 'name' ? 'sort-indicator-name' : null">
+                        :aria-label="getAriaSortLabel('name', $gettext('Name'))"
+                    >
                         <a href="#"
                            @click.prevent
                            :title="$gettext('Nach Name sortieren')">
                             {{ $gettext('Name') }}
                         </a>
-                        <span v-if="sortedBy === 'name'"
-                              role="img"
-                              id="sort-indicator-name"
-                              :aria-label="sortDirection === 'asc'
-                                ? $gettext('Es wird aufsteigend nach der Spalte Name sortiert.')
-                                : $gettext('Es wird absteigend nach der Spalte Name sortiert.')">
-                        </span>
                     </th>
                     <th @click="sort('size')"
                         class="responsive-hidden"
                         :class="sortClasses('size')"
                         :aria-sort="getAriaSortString('size')"
-                        :aria-labelledby="sortedBy === 'size' ? 'sort-indicator-size' : null">
+                        :aria-label="getAriaSortLabel('size', $gettext('Größe'))"
+                    >
                         <a href="#"
                            @click.prevent
                            :title="$gettext('Nach Größe sortieren')">
                             {{ $gettext('Größe') }}
                         </a>
-                        <span v-if="sortedBy === 'size'"
-                              role="img"
-                              id="sort-indicator-size"
-                              :aria-label="sortDirection === 'asc'
-                                ? $gettext('Es wird aufsteigend nach der Spalte Größe sortiert.')
-                                : $gettext('Es wird absteigend nach der Spalte Größe sortiert.')">
-                        </span>
                     </th>
                     <th v-if="showdownloads"
                         @click="sort('downloads')"
                         class="responsive-hidden"
                         :class="sortClasses('downloads')"
                         :aria-sort="getAriaSortString('downloads')"
-                        :aria-labelledby="sortedBy === 'downloads' ? 'sort-indicator-downloads' : null">
+                        :aria-label="getAriaSortLabel('downloads', $gettext('Downloads'))"
+                    >
                         <a href="#"
                            @click.prevent
                            :title="$gettext('Nach Downloads sortieren')">
                             {{ $gettext('Downloads') }}
                         </a>
-                        <span v-if="sortedBy === 'downloads'"
-                              role="img"
-                              id="sort-indicator-downloads"
-                              :aria-label="sortDirection === 'asc'
-                                ? $gettext('Es wird aufsteigend nach der Spalte Downloads sortiert.')
-                                : $gettext('Es wird absteigend nach der Spalte Downloads sortiert.')">
-                        </span>
                     </th>
                     <th class="responsive-hidden"
                         @click="sort('author_name')"
                         :class="sortClasses('author_name')"
                         :aria-sort="getAriaSortString('author_name')"
-                        :aria-labelledby="sortedBy === 'author_name' ? 'sort-indicator-author_name' : null">
+                        :aria-label="getAriaSortLabel('author_name', $gettext('Autor/-in'))"
+                    >
                         <a href="#"
                            @click.prevent
                            :title="$gettext('Nach Autor/-in sortieren')">
                             {{ $gettext('Autor/-in') }}
                         </a>
-                        <span v-if="sortedBy === 'author_name'"
-                              role="img"
-                              id="sort-indicator-author_name"
-                              :aria-label="sortDirection === 'asc'
-                                ? $gettext('Es wird aufsteigend nach der Spalte Autor-/in sortiert.')
-                                : $gettext('Es wird absteigend nach der Spalte Autor-/in sortiert.')">
-                        </span>
                     </th>
                     <th class="responsive-hidden"
                         @click="sort('chdate')"
                         :class="sortClasses('chdate')"
                         :aria-sort="getAriaSortString('chdate')"
-                        :aria-labelledby="sortedBy === 'chdate' ? 'sort-indicator-chdate' : null">
+                        :aria-label="getAriaSortLabel('chdate', $gettext('Datum'))"
+                    >
                         <a href="#"
                            @click.prevent
                            :title="$gettext('Nach Datum sortieren')">
                             {{ $gettext('Datum') }}
                         </a>
-                        <span v-if="sortedBy === 'chdate'"
-                              role="img"
-                              id="sort-indicator-chdate"
-                              :aria-label="sortDirection === 'asc'
-                                ? $gettext('Es wird aufsteigend nach der Spalte Datum sortiert.')
-                                : $gettext('Es wird absteigend nach der Spalte Datum sortiert.')">
-                        </span>
                     </th>
                     <th v-for="(name, index) in additionalColumns"
                         :key="index"
@@ -164,19 +128,13 @@
                         class="responsive-hidden"
                         :class="sortClasses(index)"
                         :aria-sort="getAriaSortString(name)"
-                        :aria-labelledby="sortedBy === name ? 'sort-indicator-' + name : null">
+                        :aria-label="getAriaSortLabel(name, name)"
+                    >
                         <a href="#"
                            @click.prevent
                            :title="$gettextInterpolate($gettext('Nach %{ colName } sortieren'), {colName: name})">
                             {{name}}
                         </a>
-                        <span v-if="sortedBy === name"
-                              role="img"
-                              :id="'sort-indicator-' + name"
-                              :aria-label="sortDirection === 'asc'
-                                ? $gettextInterpolate($gettext('Es wird aufsteigend nach der Spalte %{colName} sortiert.'), {colName: name})
-                                : $gettextInterpolate($gettext('Es wird absteigend nach der Spalte %{colName} sortiert.'), {colName: name})">
-                        </span>
                     </th>
                     <th class="actions" data-sort="false">{{ $gettext('Aktionen') }}</th>
                 </tr>
@@ -514,6 +472,15 @@ export default {
             return column === this.sortedBy
                 ? (this.sortDirection === 'asc' ? 'ascending' : 'descending')
                 : null;
+        },
+        getAriaSortLabel(column, label) {
+            if (column !== this.sortedBy) {
+                return null;
+            }
+            const template = this.sortDirection === 'asc'
+                ? this.$gettext('Es wird aufsteigend nach der Spalte %{ label } sortiert.')
+                : this.$gettext('Es wird absteigend nach der Spalte %{ label } sortiert.');
+            return this.$gettextInterpolate(template, { label });
         }
     },
     computed: {