fixed accessibility issues when assigning courses to a colour group

app/views/my_courses/groups.php

@@ -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', in_array($i, [3,4,5,7]) ? Icon::ROLE_INFO : Icon::ROLE_INFO_ALT)->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,16 +19,32 @@
         @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();
+        /*@include hide-text();*/
+
+        text-indent: 0;
+        text-align: center;
+        font-size: large;
+        font-weight: bold;
+        margin-top: 0.5ex;
 
         position: absolute;
         top: 0;
@@ -40,5 +56,16 @@
         background-repeat: no-repeat;
 
         cursor: pointer;
+
+        .group-number {
+            display: inline;
+        }
+        .checked-icon {
+            display: none;
+        }
     }
 }
+
+.mycourses-group-selector:not(.gruppe3, .gruppe4, .gruppe5, .gruppe7) {
+    color: $white;
+}

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