@chat21/chat21-web-widget 5.1.33 → 5.1.34-rc1

package/src/app/component/form/inputs/form-checkbox/form-checkbox.component.spec.ts

@@ -1,30 +1,104 @@
-import { style } from '@angular/animations';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormGroupDirective } from '@angular/forms';
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { By } from '@angular/platform-browser';
 
+import { FormArray } from 'src/chat21-core/models/formArray';
 import { FormCheckboxComponent } from './form-checkbox.component';
 
+@Component({
+  template: `
+    <form [formGroup]="form">
+      <chat-form-checkbox
+        [element]="element"
+        controlName="acceptTerms"
+        [translationErrorLabelMap]="translationErrorLabelMap"
+        [stylesMap]="stylesMap"
+        [hasSubmitted]="hasSubmitted"
+      ></chat-form-checkbox>
+    </form>`,
+})
+class FormCheckboxHostComponent {
+  form = new FormBuilder().group({
+    acceptTerms: [false, [Validators.requiredTrue]],
+  });
+  element = {
+    name: 'acceptTerms',
+    type: 'checkbox',
+    text: 'I accept the terms',
+    mandatory: true,
+    tabIndex: 1500,
+  } as FormArray;
+  stylesMap = new Map<string, string>([
+    ['themeColor', '#2a6ac1'],
+    ['foregroundColor', '#ffffff'],
+  ]);
+  translationErrorLabelMap = new Map<string, string>([
+    ['LABEL_ERROR_FIELD_REQUIRED', 'You must accept'],
+  ]);
+  hasSubmitted = false;
+}
+
 describe('FormCheckboxComponent', () => {
-  let component: FormCheckboxComponent;
-  let fixture: ComponentFixture<FormCheckboxComponent>;
-  let stylesMap = new Map<string, string>();
+  let fixture: ComponentFixture<FormCheckboxHostComponent>;
+  let host: FormCheckboxHostComponent;
+
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ FormCheckboxComponent ],
-      providers: [ FormGroupDirective ]
-    })
-    .compileComponents();
+      declarations: [FormCheckboxHostComponent, FormCheckboxComponent],
+      imports: [ReactiveFormsModule],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(FormCheckboxComponent);
-    component = fixture.componentInstance;
-    component.stylesMap = stylesMap.set('themeColor', "#2a6ac1")
-                                    .set('foregroundColor', "#ffffff")
+    fixture = TestBed.createComponent(FormCheckboxHostComponent);
+    host = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create with checkbox wired to label for=id', () => {
+    const box = fixture.nativeElement.querySelector(
+      'input#c21-prechat-acceptTerms',
+    ) as HTMLInputElement;
+    expect(box.type).toBe('checkbox');
+    const label = fixture.nativeElement.querySelector(
+      'label[for="c21-prechat-acceptTerms"]',
+    ) as HTMLLabelElement;
+    expect(label.textContent?.trim()).toBe('I accept the terms');
+  });
+
+  it('should expose aria-invalid after submit when still unchecked', () => {
+    host.hasSubmitted = true;
     fixture.detectChanges();
+    const box = fixture.nativeElement.querySelector(
+      'input#c21-prechat-acceptTerms',
+    ) as HTMLInputElement;
+    expect(box.getAttribute('aria-invalid')).toBe('true');
+    expect(box.getAttribute('aria-describedby')).toBe('c21-prechat-acceptTerms-errors');
+    const alert = fixture.nativeElement.querySelector(
+      '#c21-prechat-acceptTerms-errors',
+    ) as HTMLElement;
+    expect(alert.textContent).toContain('You must accept');
+  });
+
+  it('onEnterPressed should bubble intent to parent form-builder via output', () => {
+    const inner = fixture.debugElement.query(By.directive(FormCheckboxComponent))
+      .componentInstance as FormCheckboxComponent;
+    spyOn(inner.onKeyEnterPressed, 'emit');
+    inner.onEnterPressed(new KeyboardEvent('keydown', { key: 'Enter' }));
+    expect(inner.onKeyEnterPressed.emit).toHaveBeenCalled();
+  });
+
+  it('ariaInvalid should be false before first submit', () => {
+    const inner = fixture.debugElement.query(By.directive(FormCheckboxComponent))
+      .componentInstance as FormCheckboxComponent;
+    expect(inner.ariaInvalid).toBe('false');
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('fieldBaseId should sanitize special characters in name', () => {
+    const inner = fixture.debugElement.query(By.directive(FormCheckboxComponent))
+      .componentInstance as FormCheckboxComponent;
+    inner.element = { name: 'a/b', text: 'x' } as FormArray;
+    expect(inner.fieldBaseId).toBe('c21-prechat-a_b');
   });
 });

package/src/app/component/form/inputs/form-checkbox/form-checkbox.component.ts

@@ -17,6 +17,32 @@ export class FormCheckboxComponent implements OnInit {
   @Output() onKeyEnterPressed = new EventEmitter<any>();
   
   form: FormGroup<any>;
+
+  get fieldBaseId(): string {
+    const raw = this.element?.name || this.controlName || 'field';
+    return 'c21-prechat-' + String(raw).replace(/[^a-zA-Z0-9_-]/g, '_');
+  }
+
+  get errorsId(): string {
+    return this.fieldBaseId + '-errors';
+  }
+
+  get ariaDescribedByErrors(): string | null {
+    const name = this.element?.name;
+    if (!this.hasSubmitted || !this.form?.controls?.[name]?.errors) {
+      return null;
+    }
+    return this.errorsId;
+  }
+
+  get ariaInvalid(): 'true' | 'false' {
+    const name = this.element?.name;
+    if (!this.hasSubmitted || !this.form?.controls?.[name]) {
+      return 'false';
+    }
+    return this.form.controls[name].invalid ? 'true' : 'false';
+  }
+
   constructor(private rootFormGroup: FormGroupDirective,
               private elementRef: ElementRef) { }
 

package/src/app/component/form/inputs/form-label/form-label.component.spec.ts

@@ -1,27 +1,61 @@
+import { Component } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormGroupDirective } from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
 
+import { FormArray } from 'src/chat21-core/models/formArray';
 import { FormLabelComponent } from './form-label.component';
 
+@Component({
+  template: `
+    <form [formGroup]="form">
+      <chat-form-label
+        [element]="element"
+        controlName="intro"
+        [hasSubmitted]="hasSubmitted"
+      ></chat-form-label>
+    </form>`,
+})
+class FormLabelHostComponent {
+  form = new FormBuilder().group({});
+  hasSubmitted = false;
+  element = {
+    name: 'intro',
+    type: 'static',
+    text: '<strong>Welcome</strong> to support',
+    tabIndex: 0,
+  } as FormArray;
+}
+
 describe('FormLabelComponent', () => {
-  let component: FormLabelComponent;
-  let fixture: ComponentFixture<FormLabelComponent>;
+  let fixture: ComponentFixture<FormLabelHostComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ FormLabelComponent ],
-      providers: [ FormGroupDirective ]
-    })
-    .compileComponents();
+      declarations: [FormLabelHostComponent, FormLabelComponent],
+      imports: [ReactiveFormsModule],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(FormLabelComponent);
-    component = fixture.componentInstance;
+    fixture = TestBed.createComponent(FormLabelHostComponent);
     fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should create and bind innerHTML from static field text', () => {
+    const host = fixture.nativeElement.querySelector('.c21-header-label label') as HTMLElement;
+    expect(host.innerHTML).toContain('<strong>Welcome</strong>');
+  });
+
+  it('should assign tabindex from element', () => {
+    const host = fixture.nativeElement.querySelector('.c21-header-label label') as HTMLElement;
+    expect(host.getAttribute('tabindex')).toBe('0');
+  });
+
+  it('should wire FormGroup from parent via FormGroupDirective', () => {
+    const inner = fixture.componentInstance;
+    const labelComp = fixture.debugElement.query(By.directive(FormLabelComponent))
+      .componentInstance as FormLabelComponent;
+    expect(labelComp.form).toBe(inner.form);
   });
 });

package/src/app/component/form/inputs/form-radio-button/form-radio-button.component.spec.ts

@@ -1,16 +1,15 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { FormRadioButtonComponent } from './form-radio-button.component';
 
-describe('RadioButtonComponent', () => {
+describe('FormRadioButtonComponent', () => {
   let component: FormRadioButtonComponent;
   let fixture: ComponentFixture<FormRadioButtonComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ FormRadioButtonComponent ]
-    })
-    .compileComponents();
+      declarations: [FormRadioButtonComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -22,4 +21,23 @@ describe('RadioButtonComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should render two radio inputs sharing a name for single-choice semantics', () => {
+    const radios = fixture.nativeElement.querySelectorAll(
+      'input[type="radio"]',
+    ) as NodeListOf<HTMLInputElement>;
+    expect(radios.length).toBe(2);
+    expect(radios[0].name).toBe(radios[1].name);
+  });
+
+  it('should associate each radio with a label via for/id', () => {
+    const r1 = fixture.nativeElement.querySelector('#flexRadioDefault1') as HTMLInputElement;
+    const r2 = fixture.nativeElement.querySelector('#flexRadioDefault2') as HTMLInputElement;
+    const l1 = fixture.nativeElement.querySelector('label[for="flexRadioDefault1"]') as HTMLLabelElement;
+    const l2 = fixture.nativeElement.querySelector('label[for="flexRadioDefault2"]') as HTMLLabelElement;
+    expect(l1).toBeTruthy();
+    expect(l2).toBeTruthy();
+    expect(r2.checked).toBe(true);
+    expect(r1.checked).toBe(false);
+  });
 });

package/src/app/component/form/inputs/form-select/form-select.component.spec.ts

@@ -1,15 +1,15 @@
-import {ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
 import { FormSelectComponent } from './form-select.component';
 
-describe('SelectComponent', () => {
+describe('FormSelectComponent', () => {
   let component: FormSelectComponent;
   let fixture: ComponentFixture<FormSelectComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ FormSelectComponent ]
-    })
-    .compileComponents();
+      declarations: [FormSelectComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -21,4 +21,13 @@ describe('SelectComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should render placeholder copy until a real select is implemented', () => {
+    const p = fixture.nativeElement.querySelector('p') as HTMLParagraphElement;
+    expect(p.textContent?.trim()).toBe('select works!');
+  });
+
+  it('ngOnInit should complete without throwing', () => {
+    expect(() => component.ngOnInit()).not.toThrow();
+  });
 });

package/src/app/component/form/inputs/form-text/form-text.component.html

@@ -1,23 +1,25 @@
 <form [formGroup]="form">
-  <div class="form-group label-floating" 
+  <div class="form-group label-floating"
       [ngClass]="{'is-empty': !form?.controls[element.name].value}"
-      id="div_input" #div_input>
-    <label class="control-label">
+      [id]="'wrap-' + fieldBaseId" #div_input>
+    <label class="control-label" [attr.for]="fieldBaseId">
       {{element?.text}}
     </label>
-    <input 
-      [formControlName]="element?.name" 
+    <input
+      [id]="fieldBaseId"
+      [formControlName]="element?.name"
       [type]="inputType"
       [tabIndex]="element?.tabIndex"
-      class="form-control" 
+      class="form-control"
       [class.errors]="form?.controls[element?.name].errors && hasSubmitted"
-      (keydown.enter)="onEnterPressed($event)" 
+      [attr.aria-required]="element?.mandatory ? 'true' : null"
+      [attr.aria-invalid]="ariaInvalid"
+      [attr.aria-describedby]="ariaDescribedByErrors"
+      (keydown.enter)="onEnterPressed($event)"
       (focus)="onFocus()" (focusout)="onFocusOut()">
   </div>
-  <div *ngIf="hasSubmitted && form?.controls[element?.name].errors && form?.controls[element?.name].hasError('required')" class="text-danger">
-    {{translationErrorLabelMap?.get('LABEL_ERROR_FIELD_REQUIRED')}}
-  </div>
-  <div *ngIf="hasSubmitted && form?.controls[element?.name].errors && form?.controls[element?.name].hasError('pattern') && element?.errorLabel" class="text-danger">
-    {{element?.errorLabel}}
+  <div [id]="errorsId" *ngIf="hasSubmitted && form?.controls[element?.name]?.errors" class="text-danger" role="alert">
+    <span *ngIf="form?.controls[element?.name].hasError('required')">{{translationErrorLabelMap?.get('LABEL_ERROR_FIELD_REQUIRED')}}</span>
+    <span *ngIf="form?.controls[element?.name].hasError('pattern') && element?.errorLabel">{{element?.errorLabel}}</span>
   </div>
 </form>

package/src/app/component/form/inputs/form-text/form-text.component.scss

@@ -41,7 +41,7 @@
   }
 
   /* Remove input border colour */
-  input:focus,
+  input:focus:not(:focus-visible),
   input:active,
   input:hover,
   input:visited {
@@ -49,6 +49,11 @@
       background-color: #ffffff;
       outline: none;
   }
+
+  input:focus-visible {
+      outline: 2px solid var(--themeColor, #1a73e8);
+      outline-offset: 2px;
+  }
   
   /* Remove input background colour for Chrome autocomplete */
   input:-webkit-autofill,
@@ -179,6 +184,11 @@ input {
   transition-duration: 0.3s;
 }
 
+.form-group.is-focused .form-control:focus-visible {
+  outline: 2px solid var(--themeColor, #1a73e8) !important;
+  outline-offset: 2px;
+}
+
 .form-group.is-focused.form-info .form-control {
   background-image: linear-gradient(#00bcd4, #00bcd4), linear-gradient(#D2D2D2, #D2D2D2);
 }

package/src/app/component/form/inputs/form-text/form-text.component.spec.ts

@@ -1,31 +1,127 @@
+import { Component } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormGroupDirective } from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { By } from '@angular/platform-browser';
 
+import { FormArray } from 'src/chat21-core/models/formArray';
+import { clonePrechatFormJsonMock } from '../../prechat-form-test-mock';
 import { FormTextComponent } from './form-text.component';
 
+@Component({
+  template: `
+    <form [formGroup]="form">
+      <chat-form-text
+        [element]="element"
+        [controlName]="controlName"
+        [translationErrorLabelMap]="translationErrorLabelMap"
+        [stylesMap]="stylesMap"
+        [hasSubmitted]="hasSubmitted"
+      ></chat-form-text>
+    </form>`,
+})
+class FormTextHostComponent {
+  form = new FormBuilder().group({
+    userFullname: ['', Validators.required],
+    userEmail: ['', [Validators.required, Validators.pattern(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)]],
+  });
+  controlName = 'userFullname';
+  element = {
+    name: 'userFullname',
+    type: 'text',
+    mandatory: true,
+    text: 'User fullname',
+    tabIndex: 1411,
+  } as FormArray;
+  stylesMap = new Map<string, string>([
+    ['themeColor', '#2a6ac1'],
+    ['foregroundColor', '#ffffff'],
+  ]);
+  translationErrorLabelMap = new Map<string, string>([
+    ['LABEL_ERROR_FIELD_REQUIRED', 'Required field'],
+  ]);
+  hasSubmitted = false;
+}
+
 describe('FormTextComponent', () => {
-  let component: FormTextComponent;
-  let fixture: ComponentFixture<FormTextComponent>;
-  let stylesMap = new Map<string, string>();
-  let translationErrorLabelMap = new Map<string, string>();
+  let hostFixture: ComponentFixture<FormTextHostComponent>;
+  let host: FormTextHostComponent;
+
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ FormTextComponent ],
-      providers: [ FormGroupDirective ]
-    })
-    .compileComponents();
+      declarations: [FormTextHostComponent, FormTextComponent],
+      imports: [ReactiveFormsModule],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(FormTextComponent);
-    component = fixture.componentInstance;
-    component.stylesMap = stylesMap.set('themeColor', "#2a6ac1")
-                                    .set('foregroundColor', "#ffffff")
-    component.translationErrorLabelMap = translationErrorLabelMap.set('LABEL_ERROR_FIELD_REQUIRED', "LABEL_ERROR_FIELD_REQUIRED")
-    fixture.detectChanges();
+    hostFixture = TestBed.createComponent(FormTextHostComponent);
+    host = hostFixture.componentInstance;
+    hostFixture.detectChanges();
+  });
+
+  it('should create with label and stable id from mock-like field', () => {
+    expect(hostFixture.nativeElement.querySelector('chat-form-text')).toBeTruthy();
+    const input = hostFixture.nativeElement.querySelector(
+      'input#c21-prechat-userFullname',
+    ) as HTMLInputElement;
+    expect(input.type).toBe('text');
+    expect(input.getAttribute('aria-required')).toBe('true');
+  });
+
+  it('should use email input type when control name suggests email', () => {
+    host.controlName = 'userEmail';
+    host.element = clonePrechatFormJsonMock()[1] as FormArray;
+    host.element.text = 'Email';
+    hostFixture.detectChanges();
+    const input = hostFixture.nativeElement.querySelector(
+      'input#c21-prechat-userEmail',
+    ) as HTMLInputElement;
+    expect(input.type).toBe('email');
+  });
+
+  it('should show required error region when submitted and empty', () => {
+    host.hasSubmitted = true;
+    hostFixture.detectChanges();
+    const input = hostFixture.nativeElement.querySelector(
+      'input#c21-prechat-userFullname',
+    ) as HTMLInputElement;
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+    expect(input.getAttribute('aria-describedby')).toBe('c21-prechat-userFullname-errors');
+    const alert = hostFixture.nativeElement.querySelector(
+      '#c21-prechat-userFullname-errors',
+    ) as HTMLElement;
+    expect(alert.textContent).toContain('Required field');
+  });
+
+  it('onEnterPressed should emit keyboard event', () => {
+    const inner = hostFixture.debugElement.query(By.directive(FormTextComponent))
+      .componentInstance as FormTextComponent;
+    spyOn(inner.onKeyEnterPressed, 'emit');
+    const ev = new KeyboardEvent('keydown', { key: 'Enter' });
+    inner.onEnterPressed(ev);
+    expect(inner.onKeyEnterPressed.emit).toHaveBeenCalledWith(ev);
+  });
+
+  it('ariaInvalid should stay false until form is submitted', () => {
+    const inner = hostFixture.debugElement.query(By.directive(FormTextComponent))
+      .componentInstance as FormTextComponent;
+    expect(inner.ariaInvalid).toBe('false');
+    host.hasSubmitted = true;
+    hostFixture.detectChanges();
+    expect(inner.ariaInvalid).toBe('true');
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('ngOnChanges should map theme CSS variables onto host', () => {
+    const innerDe = hostFixture.debugElement.query(By.directive(FormTextComponent));
+    const inner = innerDe.componentInstance as FormTextComponent;
+    inner.ngOnChanges({
+      stylesMap: {
+        currentValue: host.stylesMap,
+        previousValue: null,
+        firstChange: true,
+        isFirstChange: () => true,
+      },
+    } as any);
+    expect(innerDe.nativeElement.style.getPropertyValue('--themeColor')).toBe('#2a6ac1');
   });
 });

package/src/app/component/form/inputs/form-text/form-text.component.ts

@@ -1,5 +1,6 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChange, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, OnDestroy, Output, SimpleChange, ViewChild } from '@angular/core';
 import { FormGroup, FormGroupDirective } from '@angular/forms';
+import { Subscription } from 'rxjs';
 import { FormArray } from '../../../../../chat21-core/models/formArray';
 
 @Component({
@@ -7,7 +8,7 @@ import { FormArray } from '../../../../../chat21-core/models/formArray';
   templateUrl: './form-text.component.html',
   styleUrls: ['./form-text.component.scss']
 })
-export class FormTextComponent implements OnInit {
+export class FormTextComponent implements OnInit, OnDestroy {
 
   @Input() element: FormArray;
   @Input() controlName: string;
@@ -19,19 +20,50 @@ export class FormTextComponent implements OnInit {
   @ViewChild('div_input') input: ElementRef;
   form: FormGroup<any>;
   inputType: string = 'text'
+  private valueChangesSub?: Subscription;
+
+  get fieldBaseId(): string {
+    const raw = this.element?.name || this.controlName || 'field';
+    return 'c21-prechat-' + String(raw).replace(/[^a-zA-Z0-9_-]/g, '_');
+  }
+
+  get errorsId(): string {
+    return this.fieldBaseId + '-errors';
+  }
+
+  get ariaDescribedByErrors(): string | null {
+    const name = this.element?.name;
+    if (!this.hasSubmitted || !this.form?.controls?.[name]?.errors) {
+      return null;
+    }
+    return this.errorsId;
+  }
+
+  get ariaInvalid(): 'true' | 'false' {
+    const name = this.element?.name;
+    if (!this.hasSubmitted || !this.form?.controls?.[name]) {
+      return 'false';
+    }
+    return this.form.controls[name].invalid ? 'true' : 'false';
+  }
+
   constructor(private rootFormGroup: FormGroupDirective,
               private elementRef: ElementRef) { }
 
   ngOnInit() {
     this.form = this.rootFormGroup.control as FormGroup<any>;
     if(this.form && this.form.controls && this.form.controls[this.controlName]){
-      this.form.controls[this.controlName].valueChanges.subscribe((value) => {
+      this.valueChangesSub = this.form.controls[this.controlName].valueChanges.subscribe((value) => {
         this.hasSubmitted= false;
         this.setFormStyle();
       })
     }
   }
 
+  ngOnDestroy() {
+    this.valueChangesSub?.unsubscribe();
+  }
+
   ngOnChanges(changes: SimpleChange){
     if(this.controlName && (this.controlName.toLowerCase().includes('email') || this.controlName.toLowerCase().includes('e-mail')) ){
       this.inputType = 'email';

package/src/app/component/form/inputs/form-textarea/form-textarea.component.html

@@ -1,25 +1,27 @@
 <form [formGroup]="form">
-  <div class="form-group label-floating" id="div_input" #div_input
+  <div class="form-group label-floating" [id]="'wrap-' + fieldBaseId" #div_input
       [ngClass]="{'is-empty': !form?.controls[element.name]?.value}">
-    <label class="control-label">
+    <label class="control-label" [attr.for]="fieldBaseId">
       {{element?.text}}
     </label>
-    <textarea 
-      [formControlName]="element?.name" 
+    <textarea
+      [id]="fieldBaseId"
+      [formControlName]="element?.name"
       [rows]="rows"
       [tabIndex]="element?.tabIndex"
       type="text"
       class="form-control"
+      [attr.aria-required]="element?.mandatory ? 'true' : null"
+      [attr.aria-invalid]="ariaInvalid"
+      [attr.aria-describedby]="ariaDescribedByErrors"
       (keydown)="onkeydown($event)"
-      (keydown.enter)="onEnterPressed($event)" 
-      (focus)="onFocus()" 
+      (keydown.enter)="onEnterPressed($event)"
+      (focus)="onFocus()"
       (focusout)="onFocusOut()">
     </textarea>
   </div>
-  <div *ngIf="hasSubmitted && form?.controls[element.name].errors && form?.controls[element.name].hasError('required')" class="text-danger">
-    {{translationErrorLabelMap.get('LABEL_ERROR_FIELD_REQUIRED')}}
-  </div>
-  <div *ngIf="hasSubmitted && form?.controls[element.name].errors && form?.controls[element.name].hasError('pattern') && element?.errorLabel" class="text-danger">
-    {{element.errorLabel}}
+  <div [id]="errorsId" *ngIf="hasSubmitted && form?.controls[element.name]?.errors" class="text-danger" role="alert">
+    <span *ngIf="form?.controls[element.name].hasError('required')">{{translationErrorLabelMap.get('LABEL_ERROR_FIELD_REQUIRED')}}</span>
+    <span *ngIf="form?.controls[element.name].hasError('pattern') && element?.errorLabel">{{element.errorLabel}}</span>
   </div>
 </form>

package/src/app/component/form/inputs/form-textarea/form-textarea.component.scss

@@ -42,7 +42,7 @@
     }
 
     /* Remove input border colour */
-    textarea:focus,
+    textarea:focus:not(:focus-visible),
     textarea:active,
     textarea:hover,
     textarea:visited {
@@ -52,9 +52,6 @@
         background-position: center bottom,center calc(100% - 1px);
         background-color: rgba(0,0,0,0);
         transition: background 0s ease-out;
-        // box-shadow: none;
-        // background-color: #ffffff;
-        // outline: none;
     }
     
     /* Remove input background colour for Chrome autocomplete */
@@ -182,11 +179,15 @@ textarea {
     background-repeat: no-repeat;
     background-position: center bottom,center calc(100% - 1px);
     background-size: 100% 2px, 100% 1px;
-    // box-shadow: none;
     transition-duration: 0.3s;
     width: 100%;
 }
 
+.form-group.is-focused .form-control:focus-visible {
+    outline: 2px solid var(--themeColor, #1a73e8) !important;
+    outline-offset: 2px;
+}
+
 .form-group.is-focused.form-info .form-control {
     background-image: linear-gradient(#00bcd4, #00bcd4), linear-gradient(#D2D2D2, #D2D2D2);
 }