diff options
Diffstat (limited to 'resources/vue/components/FilesTable.vue')
| -rw-r--r-- | resources/vue/components/FilesTable.vue | 79 |
1 files changed, 23 insertions, 56 deletions
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: { |