From 92176f565b5269238d059fa8cdfd0b35cbdb1f7d Mon Sep 17 00:00:00 2001
From: Murtaza Sultani <sultani@data-quest.de>
Date: Thu, 25 Sep 2025 10:47:15 +0200
Subject: Resolve "Vue Komponente: StudipSelect -  funktioniert schlecht, wenn
 das Item einen langen Namen hat und beim Auf- oder Zuklappen"

Closes #5820

Merge request studip/studip!4499
---
 resources/assets/stylesheets/scss/forum.scss       |   3 -
 resources/assets/stylesheets/scss/select.scss      |   4 +
 resources/vue/apps/ConsultationCreator.vue         |  61 ++++----
 resources/vue/apps/forum/discussions/Edit.vue      |  46 ++++--
 resources/vue/apps/forum/search/Index.vue          |  64 ++++++---
 resources/vue/apps/forum/topics/Edit.vue           |  64 ++++-----
 .../courseware/blocks/CoursewareChartBlock.vue     |  26 ++--
 .../courseware/blocks/CoursewareHeadlineBlock.vue  | 156 +++++++++++----------
 .../courseware/blocks/CoursewareImageMapBlock.vue  |  26 ++--
 .../courseware/blocks/CoursewareKeyPointBlock.vue  |  29 ++--
 .../courseware/blocks/CoursewareTestBlock.vue      |  51 +++----
 .../courseware/blocks/CoursewareTimelineBlock.vue  |  30 ++--
 .../containers/CoursewareAccordionContainer.vue    |  34 +++--
 .../containers/CoursewareTabsContainer.vue         |  34 +++--
 .../CoursewareStructuralElementDialogAdd.vue       |  42 +++---
 .../CoursewareStructuralElementDialogCopy.vue      |  56 ++++----
 .../CoursewareStructuralElementDialogSettings.vue  |  43 +++---
 .../courseware/toolbar/CoursewareToolbarBlocks.vue |   5 +-
 .../courseware/unit/CoursewareShelfDialogAdd.vue   |  51 +++----
 .../courseware/unit/CoursewareShelfDialogCopy.vue  |  54 +++----
 .../unit/CoursewareShelfDialogImport.vue           |  51 +++----
 .../unit/CoursewareShelfDialogTopics.vue           |  39 +++---
 .../unit/CoursewareUnitItemDialogLayout.vue        |  39 +++---
 .../components/file-chooser/FileChooserToolbar.vue |  13 +-
 resources/vue/components/forum/SelectTagsInput.vue |   5 +-
 resources/vue/components/forum/SelectUserInput.vue |   1 +
 .../forum/discussions/SelectDiscussionType.vue     |   3 +-
 .../components/forum/topics/SelectTopicInput.vue   |   5 +-
 .../components/stock-images/ColorFilterWidget.vue  |  10 +-
 .../vue/components/stock-images/SelectorSearch.vue |   4 +-
 30 files changed, 600 insertions(+), 449 deletions(-)

diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss
index ccfe15f..480a3ca 100644
--- a/resources/assets/stylesheets/scss/forum.scss
+++ b/resources/assets/stylesheets/scss/forum.scss
@@ -334,9 +334,6 @@ $card-max-width: 300px;
     .forum-form {
         flex: 1;
         padding: 5px 10px;
-        .multi-select-input .vs__dropdown-toggle {
-            max-height: fit-content;
-        }
 
         fieldset:not(.undecorated) > :not(legend, table) {
             max-width: calc(100% - 1px);
diff --git a/resources/assets/stylesheets/scss/select.scss b/resources/assets/stylesheets/scss/select.scss
index 22c6c20..e9c3ddf 100644
--- a/resources/assets/stylesheets/scss/select.scss
+++ b/resources/assets/stylesheets/scss/select.scss
@@ -83,6 +83,10 @@ form.default .studip-v-select .vs__selected {
             display: none;
         }
     }
+
+    &__dropdown-toggle {
+        max-height: fit-content;
+    }
 }
 
 .multiselect__tags {
diff --git a/resources/vue/apps/ConsultationCreator.vue b/resources/vue/apps/ConsultationCreator.vue
index c0e3551..4e92eb5 100644
--- a/resources/vue/apps/ConsultationCreator.vue
+++ b/resources/vue/apps/ConsultationCreator.vue
@@ -157,47 +157,60 @@
                 </p>
             </template>
 
-            <label v-if="withResponsible.users">
-                {{ $gettext('Durchführende Personen') }}
-                <StudipSelect v-model="responsibleUsers"
-                              :options="withResponsible.users"
-                              :reduce="option => option.id"
-                              multiple
-                              :clearable="true"
+            <template v-if="withResponsible.users">
+                <label for="responsible-users">
+                    {{ $gettext('Durchführende Personen') }}
+
+                </label>
+                <StudipSelect
+                    id="responsible-users"
+                    v-model="responsibleUsers"
+                    :options="withResponsible.users"
+                    :reduce="option => option.id"
+                    multiple
+                    :clearable="true"
                 >
                     <template #open-indicator>
                         <span><studip-icon shape="arr_1down" :size="10" /></span>
                     </template>
                 </StudipSelect>
-            </label>
+            </template>
 
-            <label v-if="withResponsible.groups">
-                {{ $gettext('Durchführende Gruppen') }}
-                <StudipSelect v-model="responsibleGroups"
-                              :options="withResponsible.groups"
-                              :reduce="option => option.id"
-                              multiple
-                              :clearable="true"
+            <template v-if="withResponsible.groups">
+                <label id="responsible-groups">
+                    {{ $gettext('Durchführende Gruppen') }}
+                </label>
+                <StudipSelect
+                    id="responsible-groups"
+                    v-model="responsibleGroups"
+                    :options="withResponsible.groups"
+                    :reduce="option => option.id"
+                    multiple
+                    :clearable="true"
                 >
                     <template #open-indicator>
                         <span><studip-icon shape="arr_1down" :size="10" /></span>
                     </template>
                 </StudipSelect>
-            </label>
+            </template>
 
-            <label v-if="withResponsible.institutes">
-                {{ $gettext('Durchführende Einrichtungen') }}
-                <StudipSelect v-model="responsibleInstitutes"
-                              :options="withResponsible.institutes"
-                              :reduce="option => option.id"
-                              multiple
-                              :clearable="true"
+            <template v-if="withResponsible.institutes">
+                <label for="responsible-institutes">
+                    {{ $gettext('Durchführende Einrichtungen') }}
+                </label>
+                <StudipSelect
+                    id="responsible-institutes"
+                    v-model="responsibleInstitutes"
+                    :options="withResponsible.institutes"
+                    :reduce="option => option.id"
+                    multiple
+                    :clearable="true"
                 >
                     <template #open-indicator>
                         <span><studip-icon shape="arr_1down" :size="10" /></span>
                     </template>
                 </StudipSelect>
-            </label>
+            </template>
         </fieldset>
 
         <fieldset>
diff --git a/resources/vue/apps/forum/discussions/Edit.vue b/resources/vue/apps/forum/discussions/Edit.vue
index 26960b1..68ef00f 100644
--- a/resources/vue/apps/forum/discussions/Edit.vue
+++ b/resources/vue/apps/forum/discussions/Edit.vue
@@ -118,21 +118,43 @@ onMounted(() => {
                 </section>
 
                 <section class="inputs-container">
-                    <label class="flex-1">
-                        <span class="sr-only">{{ $gettext('Thema') }}</span>
+                    <div class="flex-1">
+                        <label for="select-topic-input">
+                            <span class="sr-only">{{ $gettext('Thema') }}</span>
+                        </label>
+                        <SelectTopicInput
+                            id="select-topic-input"
+                            :options="topics"
+                            v-model="discussionForm.topic"
+                            :taggable="true"
+                            :required="true"
+                        />
                         <input type="hidden" name="topic" :value="JSON.stringify(discussionForm.topic)">
-                        <SelectTopicInput :options="topics" v-model="discussionForm.topic" :taggable="true" :required="true" />
-                    </label>
-                    <label class="flex-1">
-                        <span class="sr-only">{{ $gettext('Diskussionstyp') }}</span>
+                    </div>
+                    <div class="flex-1">
+                        <label for="select-discussion-type">
+                            <span class="sr-only">{{ $gettext('Diskussionstyp') }}</span>
+                        </label>
+                        <SelectDiscussionType
+                            id="select-discussion-type"
+                            :options="discussion_types"
+                            v-model="discussionForm.type"
+                        />
                         <input v-if="discussionForm.type" type="hidden" name="type_id" :value="discussionForm.type.type_id">
-                        <SelectDiscussionType :options="discussion_types" v-model="discussionForm.type" />
-                    </label>
-                    <label class="flex-1">
-                        <span class="sr-only">{{ $gettext('Schlagworte') }}</span>
+                    </div>
+                    <div class="flex-1">
+                        <label for="select-tags-input">
+                            <span class="sr-only">{{ $gettext('Schlagworte') }}</span>
+                        </label>
+                        <SelectTagsInput
+                            id="select-tags-input"
+                            :options="availableTags"
+                            v-model="discussionForm.tags"
+                            multiple
+                            :taggable="true"
+                        />
                         <input type="hidden" name="tags" :value="JSON.stringify(discussionForm.tags)">
-                        <SelectTagsInput :options="availableTags"  v-model="discussionForm.tags" multiple :taggable="true" />
-                    </label>
+                    </div>
                 </section>
 
                 <section class="mt-10" v-if="!discussion.discussion_id">
diff --git a/resources/vue/apps/forum/search/Index.vue b/resources/vue/apps/forum/search/Index.vue
index bf077f4..7ae1b74 100644
--- a/resources/vue/apps/forum/search/Index.vue
+++ b/resources/vue/apps/forum/search/Index.vue
@@ -265,21 +265,46 @@ onMounted(async () => {
                     <StudipIcon v-else shape="arr_1down"  :size="20" />
                 </button>
                 <div v-if="isFilterVisible" class="filter-controls">
-                    <label>
-                        <span class="sr-only">{{ $gettext('Thema') }}</span>
-                        <SelectTopicInput id="" :options="availableTopics" v-model="searchForm.topics" :required="false" multiple />
-                    </label>
-                    <label>
-                        <span class="sr-only">{{ $gettext('Diskussionstyp') }}</span>
-                        <SelectDiscussionType :options="availableTypes" v-model="searchForm.types" multiple />
-                    </label>
-                    <label>
-                        <span class="sr-only">{{ $gettext('Schlagworte') }}</span>
-                        <SelectTagsInput :options="availableTags" v-model="searchForm.tags" multiple />
-                    </label>
-                    <label>
-                        <span class="sr-only">{{ $gettext('Status der Diskussion') }}</span>
+                    <div>
+                        <label for="select-topic-input" class="sr-only">
+                            {{ $gettext('Thema') }}
+                        </label>
+                        <SelectTopicInput
+                            id="select-topic-input"
+                            :options="availableTopics"
+                            v-model="searchForm.topics"
+                            :required="false"
+                            multiple
+                        />
+                    </div>
+                    <div>
+                        <label for="select-discussion-type" class="sr-only">
+                            {{ $gettext('Diskussionstyp') }}
+                        </label>
+                        <SelectDiscussionType
+                            id="select-discussion-type"
+                            :options="availableTypes"
+                            v-model="searchForm.types"
+                            multiple
+                        />
+                    </div>
+                    <div>
+                        <label for="select-tags-input" class="sr-only">
+                            {{ $gettext('Schlagworte') }}
+                        </label>
+                        <SelectTagsInput
+                            id="select-tags-input"
+                            :options="availableTags"
+                            v-model="searchForm.tags"
+                            multiple
+                        />
+                    </div>
+                    <div>
+                        <label for="discussion-statuses-input" class="sr-only">
+                            {{ $gettext('Status der Diskussion') }}
+                        </label>
                         <StudipSelect
+                            id="discussion-statuses-input"
                             :options="discussionStatuses"
                             :placeholder="$gettext('Status der Diskussion')"
                             v-model="searchForm.status"
@@ -290,19 +315,22 @@ onMounted(async () => {
                                 </div>
                             </template>
                         </StudipSelect>
-                    </label>
+                    </div>
                     <div class="date-inputs-container">
                         <input type="date" v-model="searchForm.begin" :placeholder="$gettext('Von')" :aria-label="$gettext('Von')" autocomplete="off" />
                         <input type="date" v-model="searchForm.end" :placeholder="$gettext('Bis')" :aria-label="$gettext('Bis')" autocomplete="off" />
                     </div>
-                    <label>
-                        <span class="sr-only">{{ $gettext('Autor/-in') }}</span>
+                    <div>
+                        <label for="select-user-input" class="sr-only">
+                            {{ $gettext('Autor/-in') }}
+                        </label>
                         <SelectUserInput
+                            id="select-user-input"
                             :options="course_members"
                             multiple
                             v-model="searchForm.authors"
                         />
-                    </label>
+                    </div>
                 </div>
             </div>
         </form>
diff --git a/resources/vue/apps/forum/topics/Edit.vue b/resources/vue/apps/forum/topics/Edit.vue
index 845e062..b0c2018 100644
--- a/resources/vue/apps/forum/topics/Edit.vue
+++ b/resources/vue/apps/forum/topics/Edit.vue
@@ -76,39 +76,39 @@ onMounted(() => {
                     <input type="hidden" name="category" :value="JSON.stringify(topicForm.category)">
                     <label for="category_input">
                         {{ $gettext('Kategorie') }}
-                        <StudipSelect
-                            id="category_input"
-                            label="name"
-                            :options="categories"
-                            v-model="topicForm.category"
-                            :reduce="(category) => {
-                                if(category.name) {
-                                    return category;
-                                }
-
-                                return { name: category };
-                            }"
-                            :taggable="true"
-                        >
-                            <template #selected-option="{name, color}">
-                                <div class="flex items-center">
-                                    <span v-if="color" :style="{ backgroundColor: color, height: '14px', width: '14px', marginRight: '8px'}"></span>
-                                    <span class="line-clamp-1 flex-1">{{name}}</span>
-                                </div>
-                            </template>
-                            <template #option="{name, color}">
-                                <div :style="{ display: 'flex', alignItems: 'center' }">
-                                    <span v-if="color" :style="{ backgroundColor: color, height: '14px', width: '14px', marginRight: '8px'}"></span>
-                                    <span :style="{ flex: '1'}" class="line-clamp-1">{{name}}</span>
-                                </div>
-                            </template>
-                            <template #no-options>
-                                <div>
-                                    {{ $gettext('Es gibt keine Kategorie.') }}
-                                </div>
-                            </template>
-                        </StudipSelect>
                     </label>
+                    <StudipSelect
+                        id="category_input"
+                        label="name"
+                        :options="categories"
+                        v-model="topicForm.category"
+                        :reduce="(category) => {
+                            if(category.name) {
+                                return category;
+                            }
+
+                            return { name: category };
+                        }"
+                        :taggable="true"
+                    >
+                        <template #selected-option="{name, color}">
+                            <div class="flex items-center">
+                                <span v-if="color" :style="{ backgroundColor: color, height: '14px', width: '14px', marginRight: '8px'}"></span>
+                                <span class="line-clamp-1 flex-1">{{name}}</span>
+                            </div>
+                        </template>
+                        <template #option="{name, color}">
+                            <div :style="{ display: 'flex', alignItems: 'center' }">
+                                <span v-if="color" :style="{ backgroundColor: color, height: '14px', width: '14px', marginRight: '8px'}"></span>
+                                <span :style="{ flex: '1'}" class="line-clamp-1">{{name}}</span>
+                            </div>
+                        </template>
+                        <template #no-options>
+                            <div>
+                                {{ $gettext('Es gibt keine Kategorie.') }}
+                            </div>
+                        </template>
+                    </StudipSelect>
                 </section>
             </fieldset>
             <footer data-dialog-button>
diff --git a/resources/vue/components/courseware/blocks/CoursewareChartBlock.vue b/resources/vue/components/courseware/blocks/CoursewareChartBlock.vue
index cbf62f9..2051adc 100644
--- a/resources/vue/components/courseware/blocks/CoursewareChartBlock.vue
+++ b/resources/vue/components/courseware/blocks/CoursewareChartBlock.vue
@@ -18,9 +18,12 @@
                         {{ $gettext('Beschriftung') }}
                         <input type="text" v-model="currentLabel"  />
                     </label>
-                    <label class="col-3">
-                        {{ $gettext('Typ') }}
-                        <studip-select
+                    <div class="col-3">
+                        <label for="current-type">
+                            {{ $gettext('Typ') }}
+                        </label>
+                        <StudipSelect
+                            id="current-type"
                             v-model="currentType"
                             :options="chartTypes"
                             :reduce="chartTypes => chartTypes.value"
@@ -36,8 +39,8 @@
                             <template #option="option">
                                 <span>{{ option.name }}</span>
                             </template>
-                        </studip-select>
-                    </label>
+                        </StudipSelect>
+                    </div>
                 </form>
                 <button class="button add" @click="addItem">{{ $gettext('Datensatz hinzufügen') }}</button>
                 <button class="button" @click="buildChart">{{ $gettext('Diagramm aktualisieren') }}</button>
@@ -59,9 +62,12 @@
                                 {{ $gettext('Wert') }}
                                 <input type="number" v-model="item.value" />
                             </label>
-                            <label class="col-2">
-                                {{ $gettext('Farbe') }}
-                                <studip-select
+                            <div class="col-2">
+                                <label for="colors">
+                                    {{ $gettext('Farbe') }}
+                                </label>
+                                <StudipSelect
+                                    id="colors"
                                     :options="colors"
                                     :reduce="colors => colors.value"
                                     label="name"
@@ -80,8 +86,8 @@
                                     <template #option="option">
                                         <span class="vs__option-color" :style="{'background-color': 'rgb(' + option.rgb + ')'}"></span><span>{{ option.name }}</span>
                                     </template>
-                                </studip-select>
-                            </label>
+                                </StudipSelect>
+                            </div>
                             <label class="col-3">
                                 {{ $gettext('Bezeichnung') }}
                                 <input type="text" v-model="item.label" />
diff --git a/resources/vue/components/courseware/blocks/CoursewareHeadlineBlock.vue b/resources/vue/components/courseware/blocks/CoursewareHeadlineBlock.vue
index bfce0d4..f80d93a 100644
--- a/resources/vue/components/courseware/blocks/CoursewareHeadlineBlock.vue
+++ b/resources/vue/components/courseware/blocks/CoursewareHeadlineBlock.vue
@@ -93,42 +93,46 @@
                                 {{ $gettext('2. Untertitel') }}
                                 <input type="text" v-model="currentSecondSubtitle" />
                             </label>
-                            <label>
+                            <label for="current-text-color">
                                 {{ $gettext('Textfarbe') }}
-                                <studip-select
-                                    :options="colors"
-                                    label="name"
-                                    :reduce="(color) => color.hex"
-                                    :clearable="false"
-                                    v-model="currentTextColor"
-                                >
-                                    <template #open-indicator="{ selectAttributes }">
+                            </label>
+                            <StudipSelect
+                                id="current-text-color"
+                                :options="colors"
+                                label="name"
+                                :reduce="(color) => color.hex"
+                                :clearable="false"
+                                v-model="currentTextColor"
+                            >
+                                <template #open-indicator="{ selectAttributes }">
                                         <span v-bind="selectAttributes"
-                                            ><studip-icon shape="arr_1down" :size="10"
+                                        ><studip-icon shape="arr_1down" :size="10"
                                         /></span>
-                                    </template>
-                                    <template #no-options>
-                                        {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
-                                    </template>
-                                    <template #selected-option="option">
+                                </template>
+                                <template #no-options>
+                                    {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
+                                </template>
+                                <template #selected-option="option">
                                         <span
                                             class="vs__option-color"
                                             :style="{ 'background-color': option.hex }"
                                         ></span
                                         ><span>{{ option.name }}</span>
-                                    </template>
-                                    <template #option="option">
+                                </template>
+                                <template #option="option">
                                         <span
                                             class="vs__option-color"
                                             :style="{ 'background-color': option.hex }"
                                         ></span
                                         ><span>{{ option.name }}</span>
-                                    </template>
-                                </studip-select>
-                            </label>
-                            <label v-if="hasTextBackgroundColor">
-                                {{ $gettext('Texthintergrundfarbe') }}
-                                <studip-select
+                                </template>
+                            </StudipSelect>
+                            <template v-if="hasTextBackgroundColor">
+                                <label for="current-tex-background-color">
+                                    {{ $gettext('Texthintergrundfarbe') }}
+                                </label>
+                                <StudipSelect
+                                    id="current-tex-background-color"
                                     :options="colors"
                                     label="name"
                                     :reduce="(color) => color.hex"
@@ -136,51 +140,56 @@
                                     v-model="currentTextBackgroundColor"
                                 >
                                     <template #open-indicator="{ selectAttributes }">
-                                        <span v-bind="selectAttributes"
+                                            <span v-bind="selectAttributes"
                                             ><studip-icon shape="arr_1down" :size="10"
-                                        /></span>
+                                            /></span>
                                     </template>
                                     <template #no-options>
                                         {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
                                     </template>
                                     <template #selected-option="option">
-                                        <span
-                                            class="vs__option-color"
-                                            :style="{ 'background-color': option.hex }"
-                                        ></span
-                                        ><span>{{ option.name }}</span>
+                                            <span
+                                                class="vs__option-color"
+                                                :style="{ 'background-color': option.hex }"
+                                            ></span
+                                            ><span>{{ option.name }}</span>
                                     </template>
                                     <template #option="option">
-                                        <span
-                                            class="vs__option-color"
-                                            :style="{ 'background-color': option.hex }"
-                                        ></span
-                                        ><span>{{ option.name }}</span>
+                                            <span
+                                                class="vs__option-color"
+                                                :style="{ 'background-color': option.hex }"
+                                            ></span
+                                            ><span>{{ option.name }}</span>
                                     </template>
-                                </studip-select>
-                            </label>
+                                </StudipSelect>
+                            </template>
                             <template v-if="hasIcon">
-                                <label>
+                                <label for="current-icon">
                                     {{ $gettext('Icon') }}
-                                    <studip-select :clearable="false" :options="icons" v-model="currentIcon">
-                                        <template #open-indicator="{ selectAttributes }">
+                                </label>
+                                <StudipSelect
+                                    id="current-icon"
+                                    :clearable="false"
+                                    :options="icons"
+                                    v-model="currentIcon"
+                                >
+                                    <template #open-indicator="{ selectAttributes }">
                                             <span v-bind="selectAttributes"
-                                                ><studip-icon shape="arr_1down" :size="10"
+                                            ><studip-icon shape="arr_1down" :size="10"
                                             /></span>
-                                        </template>
-                                        <template #no-options>
-                                            {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
-                                        </template>
-                                        <template #selected-option="option">
-                                            <studip-icon :shape="option.label" />
-                                            <span class="vs__option-with-icon">{{ option.label }}</span>
-                                        </template>
-                                        <template #option="option">
-                                            <studip-icon :shape="option.label" />
-                                            <span class="vs__option-with-icon">{{ option.label }}</span>
-                                        </template>
-                                    </studip-select>
-                                </label>
+                                    </template>
+                                    <template #no-options>
+                                        {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
+                                    </template>
+                                    <template #selected-option="option">
+                                        <studip-icon :shape="option.label" />
+                                        <span class="vs__option-with-icon">{{ option.label }}</span>
+                                    </template>
+                                    <template #option="option">
+                                        <studip-icon :shape="option.label" />
+                                        <span class="vs__option-with-icon">{{ option.label }}</span>
+                                    </template>
+                                </StudipSelect>
                             </template>
                         </form>
                     </courseware-tab>
@@ -195,9 +204,12 @@
                                     <option value="structural-element-image">{{ $gettext('Seiten-Bild') }}</option>
                                 </select>
                             </label>
-                            <label v-if="currentBackgroundType === 'color'">
-                                {{ $gettext('Hintergrundfarbe') }}
-                                <studip-select
+                            <template v-if="currentBackgroundType === 'color'">
+                                <label for="current-background-color">
+                                    {{ $gettext('Hintergrundfarbe') }}
+                                </label>
+                                <StudipSelect
+                                    id="current-background-color"
                                     :options="colors"
                                     label="name"
                                     :reduce="(color) => color.hex"
@@ -205,29 +217,29 @@
                                     :clearable="false"
                                 >
                                     <template #open-indicator="{ selectAttributes }">
-                                        <span v-bind="selectAttributes"
+                                            <span v-bind="selectAttributes"
                                             ><studip-icon shape="arr_1down" :size="10"
-                                        /></span>
+                                            /></span>
                                     </template>
                                     <template #no-options>
                                         {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
                                     </template>
                                     <template #selected-option="option">
-                                        <span
-                                            class="vs__option-color"
-                                            :style="{ 'background-color': option.hex }"
-                                        ></span
-                                        ><span>{{ option.name }}</span>
+                                            <span
+                                                class="vs__option-color"
+                                                :style="{ 'background-color': option.hex }"
+                                            ></span
+                                            ><span>{{ option.name }}</span>
                                     </template>
                                     <template #option="option">
-                                        <span
-                                            class="vs__option-color"
-                                            :style="{ 'background-color': option.hex }"
-                                        ></span
-                                        ><span>{{ option.name }}</span>
+                                            <span
+                                                class="vs__option-color"
+                                                :style="{ 'background-color': option.hex }"
+                                            ></span
+                                            ><span>{{ option.name }}</span>
                                     </template>
-                                </studip-select>
-                            </label>
+                                </StudipSelect>
+                            </template>
                             <label v-if="currentBackgroundType === 'image'">
                                 <div>{{ $gettext('Hintergrundbild') }}</div>
 
diff --git a/resources/vue/components/courseware/blocks/CoursewareImageMapBlock.vue b/resources/vue/components/courseware/blocks/CoursewareImageMapBlock.vue
index 4b55693..dd5d180 100644
--- a/resources/vue/components/courseware/blocks/CoursewareImageMapBlock.vue
+++ b/resources/vue/components/courseware/blocks/CoursewareImageMapBlock.vue
@@ -97,9 +97,12 @@
                             :icon="shape.title === '' ? 'link-extern' : ''"
                             :selected="index === 0"
                         >
-                            <label class="col-2">
-                                {{ $gettext('Farbe') }}
-                                <studip-select
+                            <div class="col-2">
+                                <label for="shape-color">
+                                    {{ $gettext('Farbe') }}
+                                </label>
+                                <StudipSelect
+                                    id="shape-color"
                                     :options="colors"
                                     label="name"
                                     :reduce="(color) => color.class"
@@ -123,11 +126,14 @@
                                         <span class="vs__option-color" :style="{ 'background-color': option.rgba }"></span
                                         ><span>{{ option.name }}</span>
                                     </template>
-                                </studip-select>
-                            </label>
-                            <label class="col-2">
-                                {{ $gettext('Textfarbe') }}
-                                <studip-select
+                                </StudipSelect>
+                            </div>
+                            <div class="col-2">
+                                <label for="shape-text-color">
+                                    {{ $gettext('Textfarbe') }}
+                                </label>
+                                <StudipSelect
+                                    id="shape-text-color"
                                     :options="colors"
                                     label="name"
                                     :reduce="(color) => color.class"
@@ -151,8 +157,8 @@
                                         <span class="vs__option-color" :style="{ 'background-color': rgba }"></span
                                         ><span>{{ name }}</span>
                                     </template>
-                                </studip-select>
-                            </label>
+                                </StudipSelect>
+                            </div>
                             <br />
                             <template v-if="shape.type === 'arc'">
                                 <label class="col-1">
diff --git a/resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue b/resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue
index 1c0e9ce..736ba32 100644
--- a/resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue
+++ b/resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue
@@ -30,9 +30,12 @@
                         />
                     </label>
                     <br />
-                    <label class="col-2">
-                        {{ $gettext('Farbe') }}
-                        <studip-select
+                    <div class="col-2">
+                        <label for="current-color">
+                            {{ $gettext('Farbe') }}
+                        </label>
+                        <StudipSelect
+                            id="current-color"
                             :options="colors"
                             label="name"
                             :clearable="false"
@@ -53,11 +56,17 @@
                                 <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
                                 ><span>{{ option.name }}</span>
                             </template>
-                        </studip-select>
-                    </label>
-                    <label class="col-2">
-                        {{ $gettext('Icon') }}
-                        <studip-select :options="icons" :clearable="false" v-model="currentIcon">
+                        </StudipSelect>
+                    </div>
+                    <div class="col-2">
+                        <label for="current-icon">
+                            {{ $gettext('Icon') }}
+                        </label>
+                        <StudipSelect
+                            id="current-icon"
+                            :options="icons"
+                            :clearable="false"
+                            v-model="currentIcon">
                             <template #open-indicator="{ selectAttributes }">
                                 <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span>
                             </template>
@@ -72,8 +81,8 @@
                                 <studip-icon :shape="option.label" />
                                 <span class="vs__option-with-icon">{{ option.label }}</span>
                             </template>
-                        </studip-select>
-                    </label>
+                        </StudipSelect>
+                    </div>
                 </form>
             </template>
             <template #info>
diff --git a/resources/vue/components/courseware/blocks/CoursewareTestBlock.vue b/resources/vue/components/courseware/blocks/CoursewareTestBlock.vue
index 0659604..6b8e880 100644
--- a/resources/vue/components/courseware/blocks/CoursewareTestBlock.vue
+++ b/resources/vue/components/courseware/blocks/CoursewareTestBlock.vue
@@ -66,33 +66,34 @@
             </template>
             <template v-if="canEdit" #edit>
                 <form class="default" @submit.prevent="">
-                    <label>
+                    <label for="assignments">
                         {{ $gettext('Aufgabenblatt') }}
-                        <studip-select
-                            :options="assignments"
-                            label="title"
-                            :reduce="assignment => assignment.id"
-                            :clearable="false"
-                            v-model="assignment_id"
-                            class="cw-vs-select"
-                        >
-                            <template #open-indicator="{ attributes }">
-                                <span v-bind="attributes"><studip-icon shape="arr_1down" :size="10"/></span>
-                            </template>
-                            <template #no-options="{}">
-                                {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
-                            </template>
-                            <template #selected-option="{title, icon, start, end}">
-                                <studip-icon :shape="icon" role="info"/>
-                                {{title}} ({{start}} - {{end}})
-                            </template>
-                            <template #option="{title, icon, start, end, block}">
-                                <studip-icon :shape="icon" role="info"/>
-                                {{ block ? block + ' / ' + title : title }}<br>
-                                <small>{{start}} - {{end}}</small>
-                            </template>
-                        </studip-select>
                     </label>
+                    <StudipSelect
+                        id="assignments"
+                        :options="assignments"
+                        label="title"
+                        :reduce="assignment => assignment.id"
+                        :clearable="false"
+                        v-model="assignment_id"
+                        class="cw-vs-select"
+                    >
+                        <template #open-indicator="{ attributes }">
+                            <span v-bind="attributes"><studip-icon shape="arr_1down" :size="10"/></span>
+                        </template>
+                        <template #no-options="{}">
+                            {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
+                        </template>
+                        <template #selected-option="{title, icon, start, end}">
+                            <studip-icon :shape="icon" role="info"/>
+                            {{title}} ({{start}} - {{end}})
+                        </template>
+                        <template #option="{title, icon, start, end, block}">
+                            <studip-icon :shape="icon" role="info"/>
+                            {{ block ? block + ' / ' + title : title }}<br>
+                            <small>{{start}} - {{end}}</small>
+                        </template>
+                    </StudipSelect>
                 </form>
             </template>
         </courseware-default-block>
diff --git a/resources/vue/components/courseware/blocks/CoursewareTimelineBlock.vue b/resources/vue/components/courseware/blocks/CoursewareTimelineBlock.vue
index 8b5e64d..7e884fe 100644
--- a/resources/vue/components/courseware/blocks/CoursewareTimelineBlock.vue
+++ b/resources/vue/components/courseware/blocks/CoursewareTimelineBlock.vue
@@ -79,9 +79,12 @@
                                 <textarea v-model="item.description" />
                             </label>
                             <br>
-                            <label class="col-2">
-                                {{ $gettext('Farbe') }}
-                                <studip-select
+                            <div class="col-2">
+                                <label for="item-color">
+                                    {{ $gettext('Farbe') }}
+                                </label>
+                                <StudipSelect
+                                    id="item-color"
                                     :options="colors"
                                     label="name"
                                     :clearable="false"
@@ -100,11 +103,18 @@
                                     <template #option="option">
                                         <span class="vs__option-color" :style="{'background-color': option.hex}"></span><span>{{ option.name }}</span>
                                     </template>
-                                </studip-select>
-                            </label>
-                            <label class="col-2">
-                                {{ $gettext('Icon') }}
-                                <studip-select :options="icons" :clearable="false" v-model="item.icon">
+                                </StudipSelect>
+                            </div>
+                            <div class="col-2">
+                                <label for="item-icon">
+                                    {{ $gettext('Icon') }}
+                                </label>
+                                <StudipSelect
+                                    id="item-icon"
+                                    :options="icons"
+                                    :clearable="false"
+                                    v-model="item.icon"
+                                >
                                     <template #open-indicator="{ selectAttributes }">
                                         <span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10"/></span>
                                     </template>
@@ -117,8 +127,8 @@
                                     <template #option="option">
                                         <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
                                     </template>
-                                </studip-select>
-                            </label>
+                                </StudipSelect>
+                            </div>
                             <br>
                             <label class="col-1">
                                 {{ $gettext('Datum') }}
diff --git a/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue b/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue
index a5af503..6f1ee0d 100644
--- a/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue
+++ b/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue
@@ -108,23 +108,27 @@
                         {{ $gettext('Titel')}}
                         <input type="text" v-model="section.name" />
                     </label>
-                    <label>
+                    <label for="section-icon">
                         {{ $gettext('Symbol')}}
-                        <studip-select :options="icons" v-model="section.icon">
-                            <template #open-indicator="{ selectAttributes }">
-                                <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10"/></span>
-                            </template>
-                            <template #no-options>
-                                {{ $gettext('Es steht keine Auswahl zur Verfügung.')}}
-                            </template>
-                            <template #selected-option="option">
-                                <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
-                            </template>
-                            <template #option="option">
-                                <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
-                            </template>
-                        </studip-select>
                     </label>
+                    <StudipSelect
+                        id="section-icon"
+                        :options="icons"
+                        v-model="section.icon"
+                    >
+                        <template #open-indicator="{ selectAttributes }">
+                            <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10"/></span>
+                        </template>
+                        <template #no-options>
+                            {{ $gettext('Es steht keine Auswahl zur Verfügung.')}}
+                        </template>
+                        <template #selected-option="option">
+                            <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
+                        </template>
+                        <template #option="option">
+                            <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
+                        </template>
+                    </StudipSelect>
                     <label
                         class="cw-container-section-delete"
                         v-if="currentContainer.attributes.payload.sections.length > 1"
diff --git a/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue b/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue
index e74d3ae..b86e610 100644
--- a/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue
+++ b/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue
@@ -104,23 +104,27 @@
                         {{ $gettext('Titel') }}
                         <input type="text" v-model="section.name" />
                     </label>
-                    <label>
+                    <label for="section-icon">
                         {{ $gettext('Symbol') }}
-                        <studip-select :options="icons" v-model="section.icon">
-                            <template #open-indicator="{ selectAttributes }">
-                                <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10"/></span>
-                            </template>
-                            <template #no-options>
-                                {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
-                            </template>
-                            <template #selected-option="option">
-                                <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
-                            </template>
-                            <template #option="option">
-                                <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
-                            </template>
-                        </studip-select>
                     </label>
+                    <StudipSelect
+                        id="section-icon"
+                        :options="icons"
+                        v-model="section.icon"
+                    >
+                        <template #open-indicator="{ selectAttributes }">
+                            <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10"/></span>
+                        </template>
+                        <template #no-options>
+                            {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
+                        </template>
+                        <template #selected-option="option">
+                            <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
+                        </template>
+                        <template #option="option">
+                            <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span>
+                        </template>
+                    </StudipSelect>
                     <label
                         class="cw-container-section-delete"
                         v-if="currentContainer.attributes.payload.sections.length > 1"
diff --git a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogAdd.vue b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogAdd.vue
index 235fa52..1c3a6fb 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogAdd.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogAdd.vue
@@ -80,25 +80,33 @@
                         class="cw-companion-box-in-form"
                     />
                 </label>
-                <label>
+                <label for="color">
                     {{ $gettext('Farbe') }}
-                    <studip-select v-model="color" :options="colors" :reduce="(color) => color.class" label="name" name="color" :clearable="false">
-                        <template #open-indicator="{ selectAttributes }">
-                            <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span>
-                        </template>
-                        <template #no-options>
-                            {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
-                        </template>
-                        <template #selected-option="option">
-                            <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span>
-                            <span>{{ option.name }}</span>
-                        </template>
-                        <template #option="option">
-                            <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span>
-                            <span>{{ option.name }}</span>
-                        </template>
-                    </studip-select>
                 </label>
+                <StudipSelect
+                    id="color"
+                    v-model="color"
+                    :options="colors"
+                    :reduce="(color) => color.class"
+                    label="name"
+                    name="color"
+                    :clearable="false"
+                >
+                    <template #open-indicator="{ selectAttributes }">
+                        <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span>
+                    </template>
+                    <template #no-options>
+                        {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
+                    </template>
+                    <template #selected-option="option">
+                        <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span>
+                        <span>{{ option.name }}</span>
+                    </template>
+                    <template #option="option">
+                        <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span>
+                        <span>{{ option.name }}</span>
+                    </template>
+                </StudipSelect>
             </form>
         </template>
         <template v-slot:advanced>
diff --git a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogCopy.vue b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogCopy.vue
index 9652bfb..a3669b4 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogCopy.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogCopy.vue
@@ -63,9 +63,12 @@
                             </option>
                         </select>
                     </label>
-                    <label>
-                        <span>{{ $gettext('Veranstaltung') }}</span><span aria-hidden="true" class="wizard-required">*</span>
-                        <studip-select
+                    <div>
+                        <label for="selected-range">
+                            <span>{{ $gettext('Veranstaltung') }}</span><span aria-hidden="true" class="wizard-required">*</span>
+                        </label>
+                        <StudipSelect
+                            id="selected-range"
                             v-if="filteredCourses.length !== 0 && !loadingCourses"
                             :options="filteredCourses"
                             :clearable="false"
@@ -75,17 +78,17 @@
                         >
                             <template #open-indicator="{ selectAttributes }">
                                 <span v-bind="selectAttributes"
-                                    ><studip-icon shape="arr_1down" :size="10"
+                                ><studip-icon shape="arr_1down" :size="10"
                                 /></span>
                             </template>
-                        </studip-select>
+                        </StudipSelect>
                         <p v-if="loadingCourses">
                             {{$gettext('Lade Veranstaltungen…')}}
                         </p>
                         <p v-if="filteredCourses.length === 0 && !loadingCourses">
                             {{$gettext('Es wurden keine geeigneten Veranstaltungen gefunden.')}}
                         </p>
-                    </label>
+                    </div>
                 </template>
 
             </form>
@@ -138,33 +141,34 @@
                     {{$gettext('Titel')}}
                     <input type="text" v-model="modifiedTitle" name="title" required />
                 </label>
-                <label>
+                <label for="modified-color">
                     {{$gettext('Farbe')}}
-                    <studip-select
-                        v-model="modifiedColor"
-                        :options="colors"
-                        :reduce="(color) => color.class"
-                        :clearable="false"
-                        label="name"
-                    >
-                        <template #open-indicator="{ selectAttributes }">
+                </label>
+                <StudipSelect
+                    id="modified-color"
+                    v-model="modifiedColor"
+                    :options="colors"
+                    :reduce="(color) => color.class"
+                    :clearable="false"
+                    label="name"
+                >
+                    <template #open-indicator="{ selectAttributes }">
                             <span v-bind="selectAttributes"
-                                ><studip-icon shape="arr_1down" :size="10"
+                            ><studip-icon shape="arr_1down" :size="10"
                             /></span>
-                        </template>
-                        <template #no-options>
-                            {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
-                        </template>
-                        <template #selected-option="option">
+                    </template>
+                    <template #no-options>
+                        {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
+                    </template>
+                    <template #selected-option="option">
                             <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
                             ><span>{{ option.name }}</span>
-                        </template>
-                        <template #option="option">
+                    </template>
+                    <template #option="option">
                             <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
                             ><span>{{ option.name }}</span>
-                        </template>
-                    </studip-select>
-                </label>
+                    </template>
+                </StudipSelect>
                 <label>
                     {{$gettext('Beschreibung')}}
                     <textarea v-model="modifiedDescription" required />
diff --git a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogSettings.vue b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogSettings.vue
index fa81530..e15268d 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogSettings.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogSettings.vue
@@ -30,32 +30,33 @@
                 </courseware-tab>
                 <courseware-tab :name="$gettext('Metadaten')" :index="1">
                     <form class="default" @submit.prevent="">
-                        <label>
+                        <label for="current-payload-color">
                             {{ $gettext('Farbe') }}
-                            <studip-select
-                                v-model="currentElement.attributes.payload.color"
-                                :options="colors"
-                                :reduce="(color) => color.class"
-                                label="name"
-                                class="cw-vs-select"
-                                :clearable="false"
-                            >
-                                <template #open-indicator="selectAttributes">
-                                    <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span>
-                                </template>
-                                <template #no-options>
-                                    {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}.
-                                </template>
-                                <template #selected-option="option">
+                        </label>
+                        <StudipSelect
+                            id="current-payload-color"
+                            v-model="currentElement.attributes.payload.color"
+                            :options="colors"
+                            :reduce="(color) => color.class"
+                            label="name"
+                            class="cw-vs-select"
+                            :clearable="false"
+                        >
+                            <template #open-indicator="selectAttributes">
+                                <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span>
+                            </template>
+                            <template #no-options>
+                                {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}.
+                            </template>
+                            <template #selected-option="option">
                                     <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
                                     ><span>{{ option.name }}</span>
-                                </template>
-                                <template #option="option">
+                            </template>
+                            <template #option="option">
                                     <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
                                     ><span>{{ option.name }}</span>
-                                </template>
-                            </studip-select>
-                        </label>
+                            </template>
+                        </StudipSelect>
                         <label v-if="!isTask">
                             {{ $gettext('Art des Lernmaterials') }}
                             <select v-model="currentElement.attributes.purpose">
diff --git a/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue b/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue
index 30531aa..c964fe8 100644
--- a/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue
+++ b/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue
@@ -34,7 +34,8 @@
             </form>
             <form class="default">
                 <span class="sr-only">{{ $gettext('Kategorien-Filter') }}</span>
-                <studip-select
+                <StudipSelect
+                    id="current-filter-category"
                     :clearable="true"
                     label="title"
                     :options="blockCategories"
@@ -50,7 +51,7 @@
                     </template>
                     <template #selected-option="{ title }"><span>{{ title }}</span></template>
                     <template #option="{ title }"><span>{{ title }}</span></template>
-                </studip-select>
+                </StudipSelect>
             </form>
         </div>
         <div class="cw-toolbar-tool-content" :style="toolContentStyle">
diff --git a/resources/vue/components/courseware/unit/CoursewareShelfDialogAdd.vue b/resources/vue/components/courseware/unit/CoursewareShelfDialogAdd.vue
index 36d4c56..4305766 100644
--- a/resources/vue/components/courseware/unit/CoursewareShelfDialogAdd.vue
+++ b/resources/vue/components/courseware/unit/CoursewareShelfDialogAdd.vue
@@ -50,33 +50,34 @@
                     </button>
                     <StockImageSelector v-if="showStockImageSelector" @close="showStockImageSelector = false" @select="onSelectStockImage" />
                 </label>
-                <label>
+                <label for="color">
                     {{ $gettext('Farbe') }}
-                    <studip-select
-                        v-model="addWizardData.color"
-                        :options="colors"
-                        :reduce="(color) => color.class"
-                        label="name"
-                        :clearable="false"
-                    >
-                        <template #open-indicator="selectAttributes">
-                            <span v-bind="{ selectAttributes }"
-                                ><studip-icon shape="arr_1down" :size="10"
-                            /></span>
-                        </template>
-                        <template #no-options>
-                            {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
-                        </template>
-                        <template #selected-option="option">
-                            <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
-                            ><span>{{ option.name }}</span>
-                        </template>
-                        <template #option="option">
-                            <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
-                            ><span>{{ option.name }}</span>
-                        </template>
-                    </studip-select>
                 </label>
+                <StudipSelect
+                    id="color"
+                    v-model="addWizardData.color"
+                    :options="colors"
+                    :reduce="(color) => color.class"
+                    label="name"
+                    :clearable="false"
+                >
+                    <template #open-indicator="selectAttributes">
+                        <span v-bind="{ selectAttributes }"
+                            ><studip-icon shape="arr_1down" :size="10"
+                        /></span>
+                    </template>
+                    <template #no-options>
+                        {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
+                    </template>
+                    <template #selected-option="option">
+                        <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
+                        ><span>{{ option.name }}</span>
+                    </template>
+                    <template #option="option">
+                        <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
+                        ><span>{{ option.name }}</span>
+                    </template>
+                </StudipSelect>
                 <label>
                     <span>{{ $gettext('Titelseite') }}</span>
                     <select v-model="addWizardData.rootLayout" name="layout">
diff --git a/resources/vue/components/courseware/unit/CoursewareShelfDialogCopy.vue b/resources/vue/components/courseware/unit/CoursewareShelfDialogCopy.vue
index 0d17cc1..07c1083 100644
--- a/resources/vue/components/courseware/unit/CoursewareShelfDialogCopy.vue
+++ b/resources/vue/components/courseware/unit/CoursewareShelfDialogCopy.vue
@@ -64,9 +64,12 @@
                             </option>
                         </select>
                     </label>
-                    <label>
-                        <span>{{ $gettext('Veranstaltung') }}</span><span aria-hidden="true" class="wizard-required">*</span>
-                        <studip-select
+                    <div>
+                        <label for="selected-range">
+                            <span>{{ $gettext('Veranstaltung') }}</span><span aria-hidden="true" class="wizard-required">*</span>
+                        </label>
+                        <StudipSelect
+                            id="selected-range"
                             v-if="filteredCourses.length !== 0 && !loadingCourses"
                             :options="filteredCourses"
                             :clearable="false"
@@ -79,14 +82,14 @@
                                     ><studip-icon shape="arr_1down" :size="10"
                                 /></span>
                             </template>
-                        </studip-select>
+                        </StudipSelect>
                         <p v-if="loadingCourses">
                             {{$gettext('Lade Veranstaltungen…')}}
                         </p>
                         <p v-if="filteredCourses.length === 0 && !loadingCourses">
                             {{$gettext('Es wurden keine geeigneten Veranstaltungen gefunden.')}}
                         </p>
-                    </label>
+                    </div>
                 </template>
 
             </form>
@@ -124,33 +127,34 @@
                     {{$gettext('Titel')}}
                     <input type="text" v-model="modifiedTitle" :placeholder="selectedUnitTitle" name="title" />
                 </label>
-                <label>
+                <label for="modified-color">
                     {{$gettext('Farbe')}}
-                    <studip-select
-                        v-model="modifiedColor"
-                        :options="colors"
-                        :reduce="(color) => color.class"
-                        :clearable="false"
-                        label="name"
-                    >
-                        <template #open-indicator="{ selectAttributes }">
+                </label>
+                <StudipSelect
+                    id="modified-color"
+                    v-model="modifiedColor"
+                    :options="colors"
+                    :reduce="(color) => color.class"
+                    :clearable="false"
+                    label="name"
+                >
+                    <template #open-indicator="{ selectAttributes }">
                             <span v-bind="selectAttributes"
-                                ><studip-icon shape="arr_1down" :size="10"
+                            ><studip-icon shape="arr_1down" :size="10"
                             /></span>
-                        </template>
-                        <template #no-options>
-                            {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
-                        </template>
-                        <template #selected-option="option">
+                    </template>
+                    <template #no-options>
+                        {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
+                    </template>
+                    <template #selected-option="option">
                             <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
                             ><span>{{ option.name }}</span>
-                        </template>
-                        <template #option="option">
+                    </template>
+                    <template #option="option">
                             <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
                             ><span>{{ option.name }}</span>
-                        </template>
-                    </studip-select>
-                </label>
+                    </template>
+                </StudipSelect>
                 <label>
                     {{$gettext('Beschreibung')}}
                     <textarea v-model="modifiedDescription" :placeholder="selectedUnitDescription" />
diff --git a/resources/vue/components/courseware/unit/CoursewareShelfDialogImport.vue b/resources/vue/components/courseware/unit/CoursewareShelfDialogImport.vue
index 841360c..7c2c267 100644
--- a/resources/vue/components/courseware/unit/CoursewareShelfDialogImport.vue
+++ b/resources/vue/components/courseware/unit/CoursewareShelfDialogImport.vue
@@ -34,33 +34,34 @@
                         {{ text.title }}
                         <input type="text" v-model="modifiedData.title" :placeholder="loadedTitle" />
                     </label>
-                    <label>
+                    <label for="color">
                         {{ text.color }}
-                        <studip-select
-                            v-model="modifiedData.color"
-                            :options="colors"
-                            :reduce="(color) => color.class"
-                            :clearable="false"
-                            label="name"
-                        >
-                            <template #open-indicator="{ selectAttributes }">
-                                <span v-bind="selectAttributes"
-                                    ><studip-icon shape="arr_1down" :size="10"
-                                /></span>
-                            </template>
-                            <template #no-options>
-                                {{$gettext('Es steht keine Auswahl zur Verfügung.')}}
-                            </template>
-                            <template #selected-option="option">
-                                <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
-                                ><span>{{ option.name }}</span>
-                            </template>
-                            <template #option="option">
-                                <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
-                                ><span>{{ option.name }}</span>
-                            </template>
-                        </studip-select>
                     </label>
+                    <StudipSelect
+                        id="color"
+                        v-model="modifiedData.color"
+                        :options="colors"
+                        :reduce="(color) => color.class"
+                        :clearable="false"
+                        label="name"
+                    >
+                        <template #open-indicator="{ selectAttributes }">
+                            <span v-bind="selectAttributes"
+                                ><studip-icon shape="arr_1down" :size="10"
+                            /></span>
+                        </template>
+                        <template #no-options>
+                            {{$gettext('Es steht keine Auswahl zur Verfügung.')}}
+                        </template>
+                        <template #selected-option="option">
+                            <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
+                            ><span>{{ option.name }}</span>
+                        </template>
+                        <template #option="option">
+                            <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
+                            ><span>{{ option.name }}</span>
+                        </template>
+                    </StudipSelect>
                     <label>
                         {{ text.description }}
                         <textarea v-model="modifiedData.description" :placeholder="loadedDescription" />
diff --git a/resources/vue/components/courseware/unit/CoursewareShelfDialogTopics.vue b/resources/vue/components/courseware/unit/CoursewareShelfDialogTopics.vue
index e105c31..1f24005 100644
--- a/resources/vue/components/courseware/unit/CoursewareShelfDialogTopics.vue
+++ b/resources/vue/components/courseware/unit/CoursewareShelfDialogTopics.vue
@@ -62,25 +62,32 @@
                             @select="onSelectStockImage"
                         />
                     </label>
-                    <label>
+                    <label for="color">
                         {{ $gettext('Farbe') }}
-                        <studip-select v-model="color" :options="colors" :reduce="(color) => color.class" label="name" :clearable="false">
-                            <template #open-indicator="{ selectAttributes }">
-                                <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span>
-                            </template>
-                            <template #no-options>
-                                {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
-                            </template>
-                            <template #selected-option="option">
-                                <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span>
-                                <span>{{ name }}</span>
-                            </template>
-                            <template #option="option">
+                    </label>
+                    <StudipSelect
+                        id="color"
+                        v-model="color"
+                        :options="colors"
+                        :reduce="(color) => color.class"
+                        label="name"
+                        :clearable="false"
+                    >
+                        <template #open-indicator="{ selectAttributes }">
+                            <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span>
+                        </template>
+                        <template #no-options>
+                            {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
+                        </template>
+                        <template #selected-option="option">
+                            <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span>
+                            <span>{{ name }}</span>
+                        </template>
+                        <template #option="option">
                                 <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
                                 ><span>{{ option.name }}</span>
-                            </template>
-                        </studip-select>
-                    </label>
+                        </template>
+                    </StudipSelect>
                 </courseware-collapsible-box>
             </form>
         </template>
diff --git a/resources/vue/components/courseware/unit/CoursewareUnitItemDialogLayout.vue b/resources/vue/components/courseware/unit/CoursewareUnitItemDialogLayout.vue
index 14a9195..e6169e4 100644
--- a/resources/vue/components/courseware/unit/CoursewareUnitItemDialogLayout.vue
+++ b/resources/vue/components/courseware/unit/CoursewareUnitItemDialogLayout.vue
@@ -66,30 +66,31 @@
                             class="cw-structural-element-description"
                         />
                     </label>
-                    <label>
+                    <label for="payload-color">
                         {{ $gettext('Farbe') }}
-                        <studip-select
-                            v-model="currentElement.attributes.payload.color"
-                            :options="colors"
-                            :reduce="(color) => color.class"
-                            label="name"
-                            class="cw-vs-select"
-                            :clearable="false"
-                        >
-                            <template #open-indicator="{ selectAttributes }">
-                                <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span>
-                            </template>
-                            <template #no-options> {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}. </template>
-                            <template #selected-option="option">
+                    </label>
+                    <StudipSelect
+                        id="payload-color"
+                        v-model="currentElement.attributes.payload.color"
+                        :options="colors"
+                        :reduce="(color) => color.class"
+                        label="name"
+                        class="cw-vs-select"
+                        :clearable="false"
+                    >
+                        <template #open-indicator="{ selectAttributes }">
+                            <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span>
+                        </template>
+                        <template #no-options> {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}. </template>
+                        <template #selected-option="option">
                                 <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
                                 ><span>{{ option.name }}</span>
-                            </template>
-                            <template #option="option">
+                        </template>
+                        <template #option="option">
                                 <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span
                                 ><span>{{ option.name }}</span>
-                            </template>
-                        </studip-select>
-                    </label>
+                        </template>
+                    </StudipSelect>
                     <label>
                         {{ $gettext('Titelseite') }}
                         <select v-model="currentRootLayout">
diff --git a/resources/vue/components/file-chooser/FileChooserToolbar.vue b/resources/vue/components/file-chooser/FileChooserToolbar.vue
index ff98463..1331347 100644
--- a/resources/vue/components/file-chooser/FileChooserToolbar.vue
+++ b/resources/vue/components/file-chooser/FileChooserToolbar.vue
@@ -35,9 +35,12 @@
                     @click="$refs.fileInput.click()"
                 />
             </label>
-            <label class="file-chooser-license">
-                {{ $gettext('Lizenzauswahl') }}
-                <studip-select
+            <div class="file-chooser-license">
+                <label for="upload-file-license">
+                    {{ $gettext('Lizenzauswahl') }}
+                </label>
+                <StudipSelect
+                    id="upload-file-license"
                     :options="termsOfUse"
                     label="name"
                     :reduce="(termsOfUse) => termsOfUse.id"
@@ -58,8 +61,8 @@
                         <studip-icon :shape="option.attributes.icon" />
                         <span>{{ option.attributes.name }}</span>
                     </template>
-                </studip-select>
-            </label>
+                </StudipSelect>
+            </div>
 
             <div class="inline-button-group">
                 <button :title="$gettext('Datei hochladen')" @click="createFile"><studip-icon shape="accept" /></button>
diff --git a/resources/vue/components/forum/SelectTagsInput.vue b/resources/vue/components/forum/SelectTagsInput.vue
index 2582852..6875289 100644
--- a/resources/vue/components/forum/SelectTagsInput.vue
+++ b/resources/vue/components/forum/SelectTagsInput.vue
@@ -6,12 +6,10 @@ import StudipIcon from "@/vue/components/StudipIcon.vue";
 
 <template>
     <StudipSelect
-        v-bind="$attrs"
-        class="multi-select-input"
         :placeholder="$gettext('Schlagworte')"
         label="name"
         :clearable="true"
-        :reduce="(tag) => {
+        :reduce="tag => {
             if(tag.name) {
                 return tag;
             }
@@ -19,6 +17,7 @@ import StudipIcon from "@/vue/components/StudipIcon.vue";
             return { name: tag };
         }"
         :closeOnSelect="false"
+        v-bind="{...$props, ...$attrs}"
     >
         <template #open-indicator>
             <StudipIcon shape="add" :size="15" />
diff --git a/resources/vue/components/forum/SelectUserInput.vue b/resources/vue/components/forum/SelectUserInput.vue
index 68bd283..16b272c 100644
--- a/resources/vue/components/forum/SelectUserInput.vue
+++ b/resources/vue/components/forum/SelectUserInput.vue
@@ -7,6 +7,7 @@ import StudipSelect from "..//StudipSelect.vue";
     <StudipSelect
         label="name"
         :placeholder="$gettext('Autor/-in')"
+        v-bind="{...$props, ...$attrs}"
     >
         <template #selected-option="{name, avatar_url}">
             <div class="flex items-center">
diff --git a/resources/vue/components/forum/discussions/SelectDiscussionType.vue b/resources/vue/components/forum/discussions/SelectDiscussionType.vue
index c6e71d4..e8b1595 100644
--- a/resources/vue/components/forum/discussions/SelectDiscussionType.vue
+++ b/resources/vue/components/forum/discussions/SelectDiscussionType.vue
@@ -6,10 +6,9 @@ import StudipSelect from "@/vue/components/StudipSelect.vue";
 
 <template>
     <StudipSelect
-        v-bind="$attrs"
-        class="multi-select-input"
         :placeholder="$gettext('Diskussionstyp (Optional)')"
         label="name"
+        v-bind="{...$props, ...$attrs}"
     >
         <template #open-indicator>
             <StudipIcon shape="arr_1sort" :size="15"/>
diff --git a/resources/vue/components/forum/topics/SelectTopicInput.vue b/resources/vue/components/forum/topics/SelectTopicInput.vue
index 0b4d0c1..55f56d3 100644
--- a/resources/vue/components/forum/topics/SelectTopicInput.vue
+++ b/resources/vue/components/forum/topics/SelectTopicInput.vue
@@ -7,18 +7,17 @@ const selectedTopics = defineModel();
 
 <template>
     <StudipSelect
-        v-bind="$attrs"
-        class="multi-select-input"
         :placeholder="$gettext('Thema')"
         label="name"
         v-model="selectedTopics"
-        :reduce="(topic) => {
+        :reduce="topic => {
             if(topic.name) {
                 return topic;
             }
 
             return { name: topic };
         }"
+        v-bind="{...$props, ...$attrs}"
     >
         <template #search="{attributes, events}">
             <input
diff --git a/resources/vue/components/stock-images/ColorFilterWidget.vue b/resources/vue/components/stock-images/ColorFilterWidget.vue
index d9546fe..59be388 100644
--- a/resources/vue/components/stock-images/ColorFilterWidget.vue
+++ b/resources/vue/components/stock-images/ColorFilterWidget.vue
@@ -1,7 +1,13 @@
 <template>
     <SidebarWidget :title="$gettext('Farbe')">
         <template #content>
-            <studip-select multiple v-model="selectedColors" :options="selectableColors" @input="onVueSelectInput" label="name">
+            <StudipSelect
+                multiple
+                v-model="selectedColors"
+                :options="selectableColors"
+                @input="onVueSelectInput"
+                label="name"
+            >
                 <template #open-indicator>
                     <span><studip-icon shape="arr_1down" :size="10" /></span>
                 </template>
@@ -16,7 +22,7 @@
                 </template>
 
                 <template #no-options>{{ $gettext('Keine Auswahlmöglichkeiten') }}</template>
-            </studip-select>
+            </StudipSelect>
         </template>
     </SidebarWidget>
 </template>
diff --git a/resources/vue/components/stock-images/SelectorSearch.vue b/resources/vue/components/stock-images/SelectorSearch.vue
index 4820474..6edfe5a 100644
--- a/resources/vue/components/stock-images/SelectorSearch.vue
+++ b/resources/vue/components/stock-images/SelectorSearch.vue
@@ -37,7 +37,7 @@
             <div>
                 <div>{{ $gettext('Farbfilter') }}</div>
 
-                <studip-select
+                <StudipSelect
                     multiple
                     v-model="selectedColors"
                     :options="selectableColors"
@@ -55,7 +55,7 @@
                     <template #selected-option-container>{{ ' ' }}</template>
 
                     <template #no-options>{{ $gettext('Keine Auswahlmöglichkeiten') }}</template>
-                </studip-select>
+                </StudipSelect>
             </div>
         </div>
     </SearchWithFilter>
-- 
cgit v1.0