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

fixes #4227 

Closes #4227

Merge request studip/studip!3058
parent d5f07fc2
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 @ 3e885087
......@@ -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');
}
}
......
resources/vue/components/FilesTable.vue
+ 23
− 56
View file @ 3e885087
......@@ -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: {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment