refactor(course-update): improve HTML structure and accessibility attributes (CodeRabbit)

Author: jonas-de

src/main/webapp/app/core/course/manage/update/course-update.component.html

@@ -43,9 +43,11 @@ <h4 class="form-group" jhiTranslate="artemisApp.course.form.sections.general"></
                     </div>
                     <div class="col-2">
                         <div class="form-group" style="position: relative">
-                            <label class="form-control-label" jhiTranslate="artemisApp.course.color" for="field_title"></label>
+                            <label class="form-control-label" jhiTranslate="artemisApp.course.color"></label>
                             <div
                                 class="color-preview form-control"
+                                role="button"
+                                [attr.aria-label]="'artemisApp.course.color' | artemisTranslate"
                                 [ngStyle]="{ backgroundColor: courseForm.get('color')!.value || ARTEMIS_DEFAULT_COLOR }"
                                 (click)="openColorSelector($event)"
                             ></div>
@@ -79,9 +81,14 @@ <h4 class="form-group" jhiTranslate="artemisApp.course.form.sections.general"></
                             @for (organization of courseOrganizations; track organization) {
                                 <div>
                                     <h5>
-                                        <span class="badge bg-primary font-weight-normal m-1" [ngClass]="{ 'ps-3': isAdmin }">
+                                        <span class="badge bg-primary font-weight-normal m-2 ps-2">
                                             {{ organization.name }}
-                                            <button id="removeOrganizationButton" type="button" class="btn text-light" (click)="removeOrganizationFromCourse(organization)">
+                                            <button
+                                                id="removeOrganizationButton-{{ organization.id }}"
+                                                type="button"
+                                                class="btn text-light"
+                                                (click)="removeOrganizationFromCourse(organization)"
+                                            >
                                                 <fa-icon [icon]="faTimes" />
                                             </button>
                                         </span>

src/main/webapp/app/core/course/manage/update/course-update.component.spec.ts

@@ -805,8 +805,9 @@ describe('Course Management Update Component', () => {
     });
 
     describe('changeOrganizations', () => {
+        let organization: Organization;
         beforeEach(() => {
-            const organization = new Organization();
+            organization = new Organization();
             organization.id = 12345;
             jest.spyOn(organizationService, 'getOrganizationsByCourse').mockReturnValue(of([organization]));
         });
@@ -816,7 +817,7 @@ describe('Course Management Update Component', () => {
             fixture.detectChanges();
 
             const addButton = fixture.debugElement.query(By.css('#addOrganizationButton'));
-            const removeButton = fixture.debugElement.query(By.css('#removeOrganizationButton'));
+            const removeButton = fixture.debugElement.query(By.css('#removeOrganizationButton-' + organization.id));
 
             expect(addButton).not.toBeNull();
             expect(removeButton).not.toBeNull();