Enable alternative text manipulation for image elements

#386

projects/common/components/media-elements/image.component.ts

@@ -18,7 +18,7 @@ import { ValueChangeElement } from 'common/models/elements/element';
       <img #image
            draggable="false"
            [src]="elementModel.src | safeResourceUrl"
-           [alt]="'imageNotFound' | translate"
+           [alt]="elementModel.alt"
            [class]="elementModel.scale ? 'fit-image' : 'max-size-image'">
       <aspect-image-magnifier *ngIf="elementModel.magnifier && ( magnifierVisible || project === 'editor')"
                         [imageId]="elementModel.id"

projects/common/models/elements/media-elements/image.ts

@@ -7,6 +7,7 @@ import { ImageComponent } from 'common/components/media-elements/image.component
 
 export class ImageElement extends UIElement implements PositionedUIElement {
   src: string | null = null;
+  alt: string = 'Bild nicht gefunden';
   scale: boolean = false;
   magnifier: boolean = false;
   magnifierSize: number = 100;
@@ -17,6 +18,7 @@ export class ImageElement extends UIElement implements PositionedUIElement {
   constructor(element: Partial<ImageElement>) {
     super({ height: 100, ...element });
     if (element.src) this.src = element.src;
+    if (element.alt) this.alt = element.alt;
     if (element.scale) this.scale = element.scale;
     if (element.magnifier) this.magnifier = element.magnifier;
     if (element.magnifierSize) this.magnifierSize = element.magnifierSize;

projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html

@@ -54,6 +54,13 @@
           (click)="changeMediaSrc(combinedProperties.type)">
     <mat-icon>upload_file</mat-icon>
   </button>
+
+  <mat-form-field *ngIf="combinedProperties.alt !== undefined">
+    <mat-label>Alternativtext</mat-label>
+    <input matInput type="text" [value]="$any(combinedProperties.alt)"
+           (input)="updateModel.emit({property: 'alt', value: $any($event.target).value })">
+  </mat-form-field>
+
   <button *ngIf="combinedProperties.player"
           class="fx-align-self-center"
           mat-raised-button