Skip to content
Snippets Groups Projects
Commit c4c002f1 authored by Jan-Hendrik Willms's avatar Jan-Hendrik Willms Committed by Jan-Hendrik Willms
Browse files

fixes #4227 

Closes #4227

Merge request studip/studip!3058
parent 124134ef
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/assets/stylesheets/scss/tables.scss
+ 2
− 6
View file @ c4c002f1
...@@ -7,14 +7,10 @@ table.default { ...@@ -7,14 +7,10 @@ table.default {
th.sortasc { th.sortasc {
span[role=img] { @include icon('after', 'arr_1up', 'clickable');
@include icon('after', 'arr_1up', 'clickable');
}
} }
th.sortdesc { th.sortdesc {
span[role=img] { @include icon('after', 'arr_1down', 'clickable');
@include icon('after', 'arr_1down', 'clickable');
}
} }
} }
resources/vue/components/FilesTable.vue
+ 23
− 56
View file @ c4c002f1
...@@ -55,56 +55,38 @@ ...@@ -55,56 +55,38 @@
<th @click="sort('mime_type')" <th @click="sort('mime_type')"
:class="sortClasses('mime_type')" :class="sortClasses('mime_type')"
:aria-sort="getAriaSortString('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="#" <a href="#"
@click.prevent @click.prevent
:title="$gettext('Nach Typ sortieren')"> :title="$gettext('Nach Typ sortieren')">
{{ $gettext('Typ') }} {{ $gettext('Typ') }}
</a> </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>
<th @click="sort('name')" <th @click="sort('name')"
:class="sortClasses('name')" :class="sortClasses('name')"
:aria-sort="getAriaSortString('name')" :aria-sort="getAriaSortString('name')"
:aria-labelledby="sortedBy === 'name' ? 'sort-indicator-name' : null"> :aria-label="getAriaSortLabel('name', $gettext('Name'))"
>
<a href="#" <a href="#"
@click.prevent @click.prevent
:title="$gettext('Nach Name sortieren')"> :title="$gettext('Nach Name sortieren')">
{{ $gettext('Name') }} {{ $gettext('Name') }}
</a> </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>
<th @click="sort('size')" <th @click="sort('size')"
class="responsive-hidden" class="responsive-hidden"
:class="sortClasses('size')" :class="sortClasses('size')"
:aria-sort="getAriaSortString('size')" :aria-sort="getAriaSortString('size')"
:aria-labelledby="sortedBy === 'size' ? 'sort-indicator-size' : null"> :aria-label="getAriaSortLabel('size', $gettext('Größe'))"
>
<a href="#" <a href="#"
@click.prevent @click.prevent
:title="$gettext('Nach Größe sortieren')"> :title="$gettext('Nach Größe sortieren')">
{{ $gettext('Größe') }} {{ $gettext('Größe') }}
</a> </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>
<th v-if="showdownloads" <th v-if="showdownloads"
...@@ -112,57 +94,39 @@ ...@@ -112,57 +94,39 @@
class="responsive-hidden" class="responsive-hidden"
:class="sortClasses('downloads')" :class="sortClasses('downloads')"
:aria-sort="getAriaSortString('downloads')" :aria-sort="getAriaSortString('downloads')"
:aria-labelledby="sortedBy === 'downloads' ? 'sort-indicator-downloads' : null"> :aria-label="getAriaSortLabel('downloads', $gettext('Downloads'))"
>
<a href="#" <a href="#"
@click.prevent @click.prevent
:title="$gettext('Nach Downloads sortieren')"> :title="$gettext('Nach Downloads sortieren')">
{{ $gettext('Downloads') }} {{ $gettext('Downloads') }}
</a> </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>
<th class="responsive-hidden" <th class="responsive-hidden"
@click="sort('author_name')" @click="sort('author_name')"
:class="sortClasses('author_name')" :class="sortClasses('author_name')"
:aria-sort="getAriaSortString('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="#" <a href="#"
@click.prevent @click.prevent
:title="$gettext('Nach Autor/-in sortieren')"> :title="$gettext('Nach Autor/-in sortieren')">
{{ $gettext('Autor/-in') }} {{ $gettext('Autor/-in') }}
</a> </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>
<th class="responsive-hidden" <th class="responsive-hidden"
@click="sort('chdate')" @click="sort('chdate')"
:class="sortClasses('chdate')" :class="sortClasses('chdate')"
:aria-sort="getAriaSortString('chdate')" :aria-sort="getAriaSortString('chdate')"
:aria-labelledby="sortedBy === 'chdate' ? 'sort-indicator-chdate' : null"> :aria-label="getAriaSortLabel('chdate', $gettext('Datum'))"
>
<a href="#" <a href="#"
@click.prevent @click.prevent
:title="$gettext('Nach Datum sortieren')"> :title="$gettext('Nach Datum sortieren')">
{{ $gettext('Datum') }} {{ $gettext('Datum') }}
</a> </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>
<th v-for="(name, index) in additionalColumns" <th v-for="(name, index) in additionalColumns"
:key="index" :key="index"
...@@ -170,19 +134,13 @@ ...@@ -170,19 +134,13 @@
class="responsive-hidden" class="responsive-hidden"
:class="sortClasses(index)" :class="sortClasses(index)"
:aria-sort="getAriaSortString(name)" :aria-sort="getAriaSortString(name)"
:aria-labelledby="sortedBy === name ? 'sort-indicator-' + name : null"> :aria-label="getAriaSortLabel(name, name)"
>
<a href="#" <a href="#"
@click.prevent @click.prevent
:title="$gettextInterpolate($gettext('Nach %{ colName } sortieren'), {colName: name})"> :title="$gettextInterpolate($gettext('Nach %{ colName } sortieren'), {colName: name})">
{{name}} {{name}}
</a> </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>
<th class="actions" data-sort="false">{{ $gettext('Aktionen') }}</th> <th class="actions" data-sort="false">{{ $gettext('Aktionen') }}</th>
</tr> </tr>
...@@ -521,6 +479,15 @@ export default { ...@@ -521,6 +479,15 @@ export default {
return column === this.sortedBy return column === this.sortedBy
? (this.sortDirection === 'asc' ? 'ascending' : 'descending') ? (this.sortDirection === 'asc' ? 'ascending' : 'descending')
: null; : 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: { computed: {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment