fixed accessibility issues when assigning courses to a colour group, fixes #4047

Closes #4047

Merge request studip/studip!2902

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; ?>

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;
+        }
     }
 }

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 ?>