diff options
| author | Moritz Strohm <strohm@data-quest.de> | 2024-05-27 16:39:20 +0000 |
|---|---|---|
| committer | Moritz Strohm <strohm@data-quest.de> | 2024-05-27 16:39:20 +0000 |
| commit | e1c2f5b8f32ddb3de73499cef9bc50efbe142409 (patch) | |
| tree | cb88f7a49b62e7fca7c8e98a3a723e1d8ae82f27 | |
| parent | 203eb5a996d40d7acd17db5e9c342059eabde749 (diff) | |
fixed accessibility issues when assigning courses to a colour group, fixes #4047
Closes #4047
Merge request studip/studip!2902
| -rw-r--r-- | app/views/my_courses/groups.php | 9 | ||||
| -rw-r--r-- | resources/assets/stylesheets/scss/my_courses.scss | 39 | ||||
| -rw-r--r-- | templates/header.php | 3 |
3 files changed, 35 insertions, 16 deletions
diff --git a/app/views/my_courses/groups.php b/app/views/my_courses/groups.php index 22628c5..4476aeb 100644 --- a/app/views/my_courses/groups.php +++ b/app/views/my_courses/groups.php @@ -25,7 +25,7 @@ <thead> <tr> <th><?= _('Veranstaltung') ?></th> - <th colspan="100%"><?= _('Gruppen/Farbe') ?></th> + <th colspan="100%"><?= _('Gruppe/Farbe') ?></th> </tr> </thead> <? foreach ($groups as $group_id => $group_members): ?> @@ -58,11 +58,14 @@ <? for ($i = 0; $i < 9; $i++): ?> <td class="gruppe<?= $i ?> mycourses-group-selector" onclick="this.querySelector('input').checked = true;"> <input type="radio" name="gruppe[<?= $member['seminar_id'] ?>]" value="<?= $i ?>" - aria-label="<?= _('Zugeordnet zu Gruppe ') . ($i + 1) ?>" + aria-label="<?= sprintf(_('Gruppe %u zuordnen'), $i + 1) ?>" id="course-group-<?= htmlReady($member['seminar_id']) ?>-<?= $i ?>" <? if ($my_sem[$member['seminar_id']]['gruppe'] == $i) echo 'checked'; ?>> <label for="course-group-<?= htmlReady($member['seminar_id']) ?>-<?= $i ?>"> - <?= sprintf(_('Gruppe %u zuordnen'), $i + 1) ?> + <span class="group-number"><?= $i + 1 ?></span> + <span class="checked-icon"> + <?= Icon::create('accept', Icon::ROLE_INFO)->asImg(20) ?> + </span> </label> </td> <? endfor; ?> diff --git a/resources/assets/stylesheets/scss/my_courses.scss b/resources/assets/stylesheets/scss/my_courses.scss index b82ec2b..769f3d2 100644 --- a/resources/assets/stylesheets/scss/my_courses.scss +++ b/resources/assets/stylesheets/scss/my_courses.scss @@ -9,7 +9,7 @@ background: var(--white); } -.mycourses-group-selector { +form.default .mycourses-group-selector { position: relative; background-clip: padding-box; @@ -19,26 +19,41 @@ @extend .sr-only; &:checked + label { - @include background-icon(accept, info); + .group-number { + display: none; + } + .checked-icon { + display: inline; + } } } &:hover label { - @include background-icon(accept, info); + .group-number { + display: none; + } + .checked-icon { + display: inline; + } } label { - @include hide-text(); + text-align: center; + font-size: large; + font-weight: bold; + cursor: pointer; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + background-color: var(--white); + margin-bottom: 0; + text-indent: 0; - background-position: center; - background-repeat: no-repeat; + height: 1.2em; - cursor: pointer; + .group-number { + display: inline; + } + .checked-icon { + display: none; + } } } diff --git a/templates/header.php b/templates/header.php index 5a935b3..b875038 100644 --- a/templates/header.php +++ b/templates/header.php @@ -277,7 +277,8 @@ if ($navigation) { <? $membership = CourseMember::find([Context::get()->id, $GLOBALS['user']->id]) ?> <? if ($membership) : ?> <a href="<?= URLHelper::getLink('dispatch.php/my_courses/groups') ?>" - data-dialog + data-dialog aria-label="<?= _('Gruppenzuordnung der Veranstaltung ändern') ?>" + title="<?= _('Gruppenzuordnung der Veranstaltung ändern') ?>" class="colorblock gruppe<?= $membership ? $membership['gruppe'] : 1 ?>"></a> <? endif ?> <? endif ?> |