diff --git a/resources/assets/stylesheets/scss/tables.scss b/resources/assets/stylesheets/scss/tables.scss index 8af41e9fb70f5e0dc9d92d24130261eacdff61dc..6ca8de6e610052696ecbf1a77c47a3958c863882 100644 --- a/resources/assets/stylesheets/scss/tables.scss +++ b/resources/assets/stylesheets/scss/tables.scss @@ -7,14 +7,10 @@ table.default { 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 8d1835bde946ae95f39ef205c729386acf3e399b..f2850f43fdbbc47bec559e5a8e509ee44386f5ab 100644 --- a/resources/vue/components/FilesTable.vue +++ b/resources/vue/components/FilesTable.vue @@ -55,56 +55,38 @@ <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" @@ -112,57 +94,39 @@ 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" @@ -170,19 +134,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> @@ -521,6 +479,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: {