Skip to content
Snippets Groups Projects
Commit b3b65cfb authored by Thomas Hackl's avatar Thomas Hackl
Browse files

Resolve "Fehlende aria-Informationen für Warndialoge und fehlerhafte... 

Resolve "Fehlende aria-Informationen für Warndialoge und fehlerhafte Aria-Sortierinformation für Tabellen"

Closes #4064

Merge request studip/studip!2912
parent d7d545c1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/vue/components/FilesTable.vue
+ 47
− 28
View file @ b3b65cfb
...@@ -52,7 +52,9 @@ ...@@ -52,7 +52,9 @@
></studip-proxy-checkbox> ></studip-proxy-checkbox>
</th> </th>
<th @click="sort('mime_type')" <th @click="sort('mime_type')"
:class="sortClasses('mime_type')"> :class="sortClasses('mime_type')"
:aria-sort="getAriaSortString('mime_type')"
:aria-labelledby="sortedBy === 'mime_type' ? 'sort-indicator-mime_type' : null">
<a href="#" <a href="#"
@click.prevent @click.prevent
:title="$gettext('Nach Typ sortieren')"> :title="$gettext('Nach Typ sortieren')">
...@@ -60,14 +62,16 @@ ...@@ -60,14 +62,16 @@
</a> </a>
<span v-if="sortedBy === 'mime_type'" <span v-if="sortedBy === 'mime_type'"
role="img" role="img"
:aria-sort="sortDirection === 'asc' ? 'ascending' : 'descending'" id="sort-indicator-mime_type"
:aria-label="sortDirection === 'asc' :aria-label="sortDirection === 'asc'
? $gettext('Es wird aufsteigend nach dieser Spalte sortiert.') ? $gettext('Es wird aufsteigend nach der Spalte Typ sortiert.')
: $gettext('Es wird abfsteigend nach dieser Spalte sortiert.')"> : $gettext('Es wird absteigend nach der Spalte Typ sortiert.')">
</span> </span>
</th> </th>
<th @click="sort('name')" <th @click="sort('name')"
:class="sortClasses('name')"> :class="sortClasses('name')"
:aria-sort="getAriaSortString('name')"
:aria-labelledby="sortedBy === 'name' ? 'sort-indicator-name' : null">
<a href="#" <a href="#"
@click.prevent @click.prevent
:title="$gettext('Nach Name sortieren')"> :title="$gettext('Nach Name sortieren')">
...@@ -75,15 +79,17 @@ ...@@ -75,15 +79,17 @@
</a> </a>
<span v-if="sortedBy === 'name'" <span v-if="sortedBy === 'name'"
role="img" role="img"
:aria-sort="sortDirection === 'asc' ? 'ascending' : 'descending'" id="sort-indicator-name"
:aria-label="sortDirection === 'asc' :aria-label="sortDirection === 'asc'
? $gettext('Es wird aufsteigend nach dieser Spalte sortiert.') ? $gettext('Es wird aufsteigend nach der Spalte Name sortiert.')
: $gettext('Es wird absteigend nach dieser Spalte sortiert.')"> : $gettext('Es wird absteigend nach der Spalte Name sortiert.')">
</span> </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-labelledby="sortedBy === 'size' ? 'sort-indicator-size' : null">
<a href="#" <a href="#"
@click.prevent @click.prevent
:title="$gettext('Nach Größe sortieren')"> :title="$gettext('Nach Größe sortieren')">
...@@ -91,16 +97,18 @@ ...@@ -91,16 +97,18 @@
</a> </a>
<span v-if="sortedBy === 'size'" <span v-if="sortedBy === 'size'"
role="img" role="img"
:aria-sort="sortDirection === 'asc' ? 'ascending' : 'descending'" id="sort-indicator-size"
:aria-label="sortDirection === 'asc' :aria-label="sortDirection === 'asc'
? $gettext('Es wird aufsteigend nach dieser Spalte sortiert.') ? $gettext('Es wird aufsteigend nach der Spalte Größe sortiert.')
: $gettext('Es wird absteigend nach dieser Spalte sortiert.')"> : $gettext('Es wird absteigend nach der Spalte Größe sortiert.')">
</span> </span>
</th> </th>
<th v-if="showdownloads" <th v-if="showdownloads"
@click="sort('downloads')" @click="sort('downloads')"
class="responsive-hidden" class="responsive-hidden"
:class="sortClasses('downloads')"> :class="sortClasses('downloads')"
:aria-sort="getAriaSortString('downloads')"
:aria-labelledby="sortedBy === 'downloads' ? 'sort-indicator-downloads' : null">
<a href="#" <a href="#"
@click.prevent @click.prevent
:title="$gettext('Nach Downloads sortieren')"> :title="$gettext('Nach Downloads sortieren')">
...@@ -108,15 +116,17 @@ ...@@ -108,15 +116,17 @@
</a> </a>
<span v-if="sortedBy === 'downloads'" <span v-if="sortedBy === 'downloads'"
role="img" role="img"
:aria-sort="sortDirection === 'asc' ? 'ascending' : 'descending'" id="sort-indicator-downloads"
:aria-label="sortDirection === 'asc' :aria-label="sortDirection === 'asc'
? $gettext('Es wird aufsteigend nach dieser Spalte sortiert.') ? $gettext('Es wird aufsteigend nach der Spalte Downloads sortiert.')
: $gettext('Es wird absteigend nach dieser Spalte sortiert.')"> : $gettext('Es wird absteigend nach der Spalte Downloads sortiert.')">
</span> </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-labelledby="sortedBy === 'author_name' ? 'sort-indicator-author_name' : null">
<a href="#" <a href="#"
@click.prevent @click.prevent
:title="$gettext('Nach Autor/-in sortieren')"> :title="$gettext('Nach Autor/-in sortieren')">
...@@ -124,15 +134,17 @@ ...@@ -124,15 +134,17 @@
</a> </a>
<span v-if="sortedBy === 'author_name'" <span v-if="sortedBy === 'author_name'"
role="img" role="img"
:aria-sort="sortDirection === 'asc' ? 'ascending' : 'descending'" id="sort-indicator-author_name"
:aria-label="sortDirection === 'asc' :aria-label="sortDirection === 'asc'
? $gettext('Es wird aufsteigend nach dieser Spalte sortiert.') ? $gettext('Es wird aufsteigend nach der Spalte Autor-/in sortiert.')
: $gettext('Es wird absteigend nach dieser Spalte sortiert.')"> : $gettext('Es wird absteigend nach der Spalte Autor-/in sortiert.')">
</span> </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-labelledby="sortedBy === 'chdate' ? 'sort-indicator-chdate' : null">
<a href="#" <a href="#"
@click.prevent @click.prevent
:title="$gettext('Nach Datum sortieren')"> :title="$gettext('Nach Datum sortieren')">
...@@ -140,17 +152,19 @@ ...@@ -140,17 +152,19 @@
</a> </a>
<span v-if="sortedBy === 'chdate'" <span v-if="sortedBy === 'chdate'"
role="img" role="img"
:aria-sort="sortDirection === 'asc' ? 'ascending' : 'descending'" id="sort-indicator-chdate"
:aria-label="sortDirection === 'asc' :aria-label="sortDirection === 'asc'
? $gettext('Es wird aufsteigend nach dieser Spalte sortiert.') ? $gettext('Es wird aufsteigend nach der Spalte Datum sortiert.')
: $gettext('Es wird absteigend nach dieser Spalte sortiert.')"> : $gettext('Es wird absteigend nach der Spalte Datum sortiert.')">
</span> </span>
</th> </th>
<th v-for="(name, index) in additionalColumns" <th v-for="(name, index) in additionalColumns"
:key="index" :key="index"
@click="sort(index)" @click="sort(index)"
class="responsive-hidden" class="responsive-hidden"
:class="sortClasses(index)"> :class="sortClasses(index)"
:aria-sort="getAriaSortString(name)"
:aria-labelledby="sortedBy === name ? 'sort-indicator-' + name : null">
<a href="#" <a href="#"
@click.prevent @click.prevent
:title="$gettextInterpolate($gettext('Nach %{ colName } sortieren'), {colName: name})"> :title="$gettextInterpolate($gettext('Nach %{ colName } sortieren'), {colName: name})">
...@@ -158,10 +172,10 @@ ...@@ -158,10 +172,10 @@
</a> </a>
<span v-if="sortedBy === name" <span v-if="sortedBy === name"
role="img" role="img"
:aria-sort="sortDirection === 'asc' ? 'ascending' : 'descending'" :id="'sort-indicator-' + name"
:aria-label="sortDirection === 'asc' :aria-label="sortDirection === 'asc'
? $gettext('Es wird aufsteigend nach dieser Spalte sortiert.') ? $gettextInterpolate($gettext('Es wird aufsteigend nach der Spalte %{colName} sortiert.'), {colName: name})
: $gettext('Es wird absteigend nach dieser Spalte sortiert.')"> : $gettextInterpolate($gettext('Es wird absteigend nach der Spalte %{colName} sortiert.'), {colName: name})">
</span> </span>
</th> </th>
<th class="actions" data-sort="false">{{ $gettext('Aktionen') }}</th> <th class="actions" data-sort="false">{{ $gettext('Aktionen') }}</th>
...@@ -495,6 +509,11 @@ export default { ...@@ -495,6 +509,11 @@ export default {
this.$gettext('Datei %{name} auswählen'), this.$gettext('Datei %{name} auswählen'),
{name: file.name} {name: file.name}
); );
},
getAriaSortString(column) {
return column === this.sortedBy
? (this.sortDirection === 'asc' ? 'ascending' : 'descending')
: null;
} }
}, },
computed: { computed: {
......
templates/shared/question-box.php
+ 8
− 3
View file @ b3b65cfb
<div class="modaloverlay"> <div class="modaloverlay">
<div class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-dialog-buttons studip-confirmation"> <div class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-dialog-buttons studip-confirmation"
role="alertdialog" aria-labelledBy="studip-confirmation-title-1" aria-describedby="studip-confirmation-desc-1"
modal="true">
<form action="<?= URLHelper::getLink($accept_url) ?>" method="post"> <form action="<?= URLHelper::getLink($accept_url) ?>" method="post">
<?= CSRFProtection::tokenTag() ?> <?= CSRFProtection::tokenTag() ?>
<? foreach ($accept_parameters as $key => $value): ?> <? foreach ($accept_parameters as $key => $value): ?>
...@@ -7,13 +9,16 @@ ...@@ -7,13 +9,16 @@
<? endforeach; ?> <? endforeach; ?>
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span class="ui-dialog-title"><?= _('Bitte bestätigen Sie die Aktion') ?></span> <span class="ui-dialog-title" id="studip-confirmation-title-1">
<?= _('Bitte bestätigen Sie die Aktion') ?>
</span>
<a href="<?= URLHelper::getLink($decline_url, $decline_parameters) ?>" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close"> <a href="<?= URLHelper::getLink($decline_url, $decline_parameters) ?>" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span> <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text"><?= _('Schliessen') ?></span> <span class="ui-button-text"><?= _('Schliessen') ?></span>
</a> </a>
</div> </div>
<div class="content ui-widget-content ui-dialog-content studip-confirmation"> <div class="content ui-widget-content ui-dialog-content studip-confirmation"
id="studip-confirmation-desc-1" role="heading" aria-level="2">
<?= $question ?> <?= $question ?>
</div> </div>
<div class="buttons ui-widget-content ui-dialog-buttonpane"> <div class="buttons ui-widget-content ui-dialog-buttonpane">
......
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