Resolve "Meine Veranstaltungen: Fehlende Textalternativen für die angezeigte Farbgruppierung"

Closes #4036

Merge request studip/studip!2892

resources/vue/components/MyCoursesTables.vue

@@ -12,7 +12,11 @@
             </colgroup>
             <thead>
                 <tr class="sortable">
-                    <th></th>
+                    <th>
+                        <span class="sr-only">
+                            {{ $gettext('Zugeordnete Farbgruppe') }}
+                        </span>
+                    </th>
                     <th></th>
                     <th v-if="getConfig('sem_number') && !responsiveDisplay" :class="getOrderClasses('number')">
                         <a href="#" @click.prevent="changeOrder('number')">
@@ -37,7 +41,14 @@
                     <th v-if="!responsiveDisplay" class="dont-hide" colspan="2"></th>
                 </tr>
                 <tr v-for="course in getOrderedCourses(subgroup.ids)" :data-course-id="course.id" :class="getCourseClasses(course)" :key="course.id">
-                    <td :class="`gruppe${course.group}`"></td>
+                    <td :class="`gruppe${course.group}`">
+                        <span class="sr-only">
+                            {{ $gettextInterpolate(
+                                $gettext('Diese Veranstaltung gehört zur Farbgruppe %{group}'),
+                                course
+                            ) }}
+                        </span>
+                    </td>
                     <td :class="{'subcourse-indented': isChild(course)}">
                         <span :style="{backgroundImage: `url(${course.avatar}`}" class="my-courses-avatar course-avatar-small" :title="course.name" alt=""></span>
                     </td>