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

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

@@ -1,27 +1,163 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormGroup, 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 { clonePrechatFormJsonMock } from '../../prechat-form-test-mock';
 import { FormTextareaComponent } from './form-textarea.component';
 
+@Component({
+  template: `
+    <form [formGroup]="form">
+      <chat-form-textarea
+        [element]="element"
+        [controlName]="controlName"
+        [rows]="rows"
+        [translationErrorLabelMap]="translationErrorLabelMap"
+        [stylesMap]="stylesMap"
+        [hasSubmitted]="hasSubmitted">
+      </chat-form-textarea>
+    </form>`,
+})
+class FormTextareaHostComponent {
+  form = new FormBuilder().group({
+    notes: ['', [Validators.required, Validators.pattern(/^[A-Z]+$/)]],
+  });
+  controlName = 'notes';
+  rows = 5;
+  element = {
+    name: 'notes',
+    type: 'textarea',
+    text: 'Note libere',
+    mandatory: true,
+    tabIndex: 2,
+    errorLabel: 'Solo maiuscole',
+  } as FormArray;
+  stylesMap = new Map<string, string>([
+    ['themeColor', '#0a0'],
+    ['foregroundColor', '#efe'],
+  ]);
+  translationErrorLabelMap = new Map([['LABEL_ERROR_FIELD_REQUIRED', 'Campo obbligatorio']]);
+  hasSubmitted = false;
+}
+
 describe('FormTextareaComponent', () => {
-  let component: FormTextareaComponent;
-  let fixture: ComponentFixture<FormTextareaComponent>;
+  let hostFixture: ComponentFixture<FormTextareaHostComponent>;
+  let host: FormTextareaHostComponent;
+  let textareaEl: HTMLTextAreaElement;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ FormTextareaComponent ],
-      providers: [ FormGroupDirective ]
-    })
-    .compileComponents();
+      declarations: [FormTextareaHostComponent, FormTextareaComponent],
+      imports: [ReactiveFormsModule],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(FormTextareaComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+    hostFixture = TestBed.createComponent(FormTextareaHostComponent);
+    host = hostFixture.componentInstance;
+    hostFixture.detectChanges();
+    textareaEl = hostFixture.nativeElement.querySelector('textarea#c21-prechat-notes') as HTMLTextAreaElement;
+  });
+
+  it('should create with label bound to element text and stable id', () => {
+    expect(hostFixture.nativeElement.querySelector('chat-form-textarea')).toBeTruthy();
+    const label = hostFixture.nativeElement.querySelector('label[for="c21-prechat-notes"]') as HTMLLabelElement;
+    expect(label.textContent?.trim()).toBe('Note libere');
+    expect(textareaEl).toBeTruthy();
+    expect(textareaEl.rows).toBe(5);
+    expect(textareaEl.getAttribute('aria-required')).toBe('true');
+  });
+
+  it('fieldBaseId should sanitize unsafe characters in element name', () => {
+    const inner = hostFixture.debugElement.query(By.directive(FormTextareaComponent)).componentInstance as FormTextareaComponent;
+    inner.element = { name: 'a b<c>', text: 'x' } as FormArray;
+    expect(inner.fieldBaseId).toBe('c21-prechat-a_b_c_');
+  });
+
+  it('should set aria-invalid and show required error when submitted and empty', () => {
+    host.hasSubmitted = true;
+    hostFixture.detectChanges();
+    expect(textareaEl.getAttribute('aria-invalid')).toBe('true');
+    expect(textareaEl.getAttribute('aria-describedby')).toBe('c21-prechat-notes-errors');
+    const alert = hostFixture.nativeElement.querySelector('#c21-prechat-notes-errors') as HTMLElement;
+    expect(alert.getAttribute('role')).toBe('alert');
+    expect(alert.textContent).toContain('Campo obbligatorio');
+  });
+
+  it('should show pattern error label when value invalid for pattern', () => {
+    host.form.patchValue({ notes: 'lowercase' });
+    host.hasSubmitted = true;
+    hostFixture.detectChanges();
+    const alert = hostFixture.nativeElement.querySelector('#c21-prechat-notes-errors') as HTMLElement;
+    expect(alert.textContent).toContain('Solo maiuscole');
+  });
+
+  it('onEnterPressed should emit and call preventDefault on handler', () => {
+    const innerDe = hostFixture.debugElement.query(By.directive(FormTextareaComponent));
+    const inner = innerDe.componentInstance as FormTextareaComponent;
+    spyOn(inner.onKeyEnterPressed, 'emit');
+    const ev = new KeyboardEvent('keydown', { key: 'Enter' });
+    spyOn(ev, 'preventDefault');
+    inner.onEnterPressed(ev);
+    expect(ev.preventDefault).toHaveBeenCalled();
+    expect(inner.onKeyEnterPressed.emit).toHaveBeenCalledWith(ev);
+  });
+
+  it('onkeydown with modifier + Enter should append newline to control value', () => {
+    const inner = hostFixture.debugElement.query(By.directive(FormTextareaComponent)).componentInstance as FormTextareaComponent;
+    host.form.patchValue({ notes: 'A' });
+    const ev = {
+      metaKey: true,
+      keyCode: 13,
+      which: 13,
+      preventDefault: jasmine.createSpy('preventDefault'),
+    } as any;
+    inner.onkeydown(ev);
+    expect(host.form.controls.notes.value).toContain('\r\n');
+    expect(ev.preventDefault).toHaveBeenCalled();
+  });
+
+  it('setFormStyle should toggle form-danger / form-success on wrapper', () => {
+    const inner = hostFixture.debugElement.query(By.directive(FormTextareaComponent)).componentInstance as FormTextareaComponent;
+    host.form.patchValue({ notes: '' });
+    inner.setFormStyle();
+    hostFixture.detectChanges();
+    const wrap = hostFixture.nativeElement.querySelector('#wrap-c21-prechat-notes') as HTMLElement;
+    expect(wrap.classList.contains('form-danger')).toBe(true);
+    host.form.patchValue({ notes: 'ABC' });
+    inner.setFormStyle();
+    expect(wrap.classList.contains('form-success')).toBe(true);
+  });
+
+  it('ngOnChanges should set CSS variables from stylesMap on host element', () => {
+    const innerDe = hostFixture.debugElement.query(By.directive(FormTextareaComponent));
+    const inner = innerDe.componentInstance as FormTextareaComponent;
+    inner.ngOnChanges({
+      stylesMap: {
+        currentValue: host.stylesMap,
+        previousValue: null,
+        firstChange: true,
+        isFirstChange: () => true,
+      },
+    });
+    const hostEl: HTMLElement = innerDe.nativeElement;
+    expect(hostEl.style.getPropertyValue('--themeColor')).toBe('#0a0');
+    expect(hostEl.style.getPropertyValue('--foregroundColor')).toBe('#efe');
+  });
+
+  it('fieldBaseId for pre-chat mock fullname matches stable public id prefix', () => {
+    const inner = hostFixture.debugElement.query(By.directive(FormTextareaComponent))
+      .componentInstance as FormTextareaComponent;
+    inner.element = { name: 'userFullname', text: 'Nome' } as FormArray;
+    expect(inner.fieldBaseId).toBe('c21-prechat-userFullname');
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('errorsId should append -errors to fieldBaseId (used with aria-describedby)', () => {
+    const inner = hostFixture.debugElement.query(By.directive(FormTextareaComponent))
+      .componentInstance as FormTextareaComponent;
+    inner.element = clonePrechatFormJsonMock()[1] as FormArray;
+    expect(inner.errorsId).toBe('c21-prechat-userEmail-errors');
   });
 });

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

@@ -18,6 +18,32 @@ export class FormTextareaComponent implements OnInit {
   @Output() onKeyEnterPressed = new EventEmitter<any>();
   @ViewChild('div_input') input: ElementRef;
   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/prechat-form/prechat-form.component.html

@@ -1,19 +1,23 @@
-<!-- tabindex="1400"-->
 <div id="chat21-prechat-form"
-#afPrechatFormComponent
-tabindex="1400"
-aria-modal="true"
-onFocus="document.querySelector('[start-focus-chat21-prechat-form]').focus()">
+    #afPrechatFormComponent
+    role="dialog"
+    aria-modal="true"
+    cdkTrapFocus
+    [cdkTrapFocusAutoCapture]="true"
+    [attr.aria-label]="g.LABEL_COMPLETE_FORM">
 
         <!-- HEADER -->
-        <div class="c21-header" [ngStyle]="{'color': g.themeForegroundColor, 'background-image': g.colorGradient180 }" >
+        <div class="c21-header" [ngStyle]="{'color': g.themeForegroundColor, 'background-image': g.colorGradient180 }">
             <div class="c21-header-container">
 
-                <!-- ICON CLOSE CHAT -->
+                <!-- ICON CLOSE PANEL -->
                 <div class="c21-header-button">
                     <div class="c21-close-button c21-small">
-                        <button tabindex="1490" aria-label=" chiudi pannello"  class="c21-close-button-body" (click)="returnClosePage()">
-                            <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
+                        <button type="button"
+                            [attr.aria-label]="g.BUTTON_CLOSE_TO_ICON || 'Close panel'"
+                            class="c21-close-button-body"
+                            (click)="returnClosePage()">
+                            <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
                                 <path fill="none" d="M0 0h24v24H0V0z"/>
                                 <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
                             </svg>
@@ -38,7 +42,7 @@ onFocus="document.querySelector('[start-focus-chat21-prechat-form]').focus()">
             <div class="c21-body-container">
 
                 <div class="c21-body-header">
-                    <div start-focus-chat21-prechat-form tabindex="1410" class="c21-form-message-field">{{g.LABEL_COMPLETE_FORM}}</div>
+                    <h2 start-focus-chat21-prechat-form class="c21-form-message-field">{{g.LABEL_COMPLETE_FORM}}</h2>
                 </div>
 
                 <div class="c21-body-content">
@@ -88,7 +92,6 @@ onFocus="document.querySelector('[start-focus-chat21-prechat-form]').focus()">
                 </div>
 
             </div>
-            <span tabindex="1499" onFocus="document.querySelector('[start-focus-chat21-prechat-form]').focus()"></span>
 
         
             <!-- <label *ngIf="g.privacyField" class="privacy-field">

package/src/app/component/form/prechat-form/prechat-form.component.spec.ts

@@ -1,30 +1,122 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { A11yModule } from '@angular/cdk/a11y';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 
-import { PrechatFormComponent } from './prechat-form.component';
-import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 import { Globals } from 'src/app/utils/globals';
+import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
+import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+
+import { PrechatFormComponent } from './prechat-form.component';
+
+@Component({
+  selector: 'chat-form-builder',
+  template: '',
+})
+class ChatFormBuilderStubComponent {
+  @Input() formArray: unknown;
+  @Input() isOpenPrechatForm: boolean;
+  @Input() stylesMap: Map<string, string> | undefined;
+  @Output() onSubmitForm = new EventEmitter<Record<string, string>>();
+  @Output() onErrorRenderForm = new EventEmitter<void>();
+}
 
 describe('PrechatFormComponent', () => {
   let component: PrechatFormComponent;
   let fixture: ComponentFixture<PrechatFormComponent>;
+  let g: Globals;
+  let appStorage: jasmine.SpyObj<AppStorageService>;
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error']);
+  const customLogger = new CustomLogger(ngxlogger);
+
+  beforeEach(waitForAsync(() => {
+    appStorage = jasmine.createSpyObj('AppStorageService', [
+      'initialize',
+      'getItem',
+      'setItem',
+      'getItemWithoutProjectID',
+      'setItemWithoutProjectID',
+      'removeItem',
+      'clear',
+    ]);
 
-  beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ PrechatFormComponent ],
-      imports: [ FormsModule, ReactiveFormsModule ],
-      providers: [ Globals, AppStorageService]
-    })
-    .compileComponents();
+      declarations: [PrechatFormComponent, ChatFormBuilderStubComponent],
+      imports: [A11yModule, ReactiveFormsModule],
+      providers: [
+        Globals,
+        FormBuilder,
+        { provide: AppStorageService, useValue: appStorage },
+      ],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
+    LoggerInstance.setInstance(customLogger);
     fixture = TestBed.createComponent(PrechatFormComponent);
     component = fixture.componentInstance;
+    g = TestBed.inject(Globals);
+    g.LABEL_COMPLETE_FORM = 'Complete form';
+    g.attributes = { foo: 'bar' };
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('onSubmitForm should persist attributes, merge preChatForm, and emit onCloseForm', () => {
+    spyOn(component.onCloseForm, 'emit');
+    const form = { userFullname: 'Jane Doe', userEmail: 'jane@example.com' };
+    component.onSubmitForm(form);
+    expect(g.attributes.userFullname).toBe('Jane Doe');
+    expect(g.attributes.userEmail).toBe('jane@example.com');
+    expect(g.attributes.preChatForm).toEqual(form);
+    expect(appStorage.setItem).toHaveBeenCalledWith('attributes', jasmine.any(String));
+    expect(component.onCloseForm.emit).toHaveBeenCalled();
+  });
+
+  it('onSubmitForm should not emit when g.attributes is missing', () => {
+    g.attributes = undefined as any;
+    spyOn(component.onCloseForm, 'emit');
+    component.onSubmitForm({ userFullname: 'X' });
+    expect(component.onCloseForm.emit).not.toHaveBeenCalled();
+    expect(appStorage.setItem).not.toHaveBeenCalled();
+  });
+
+  it('returnClosePage should emit onClosePage', () => {
+    spyOn(component.onClosePage, 'emit');
+    component.returnClosePage();
+    expect(component.onClosePage.emit).toHaveBeenCalled();
+  });
+
+  it('onEscape should stop propagation, prevent default, and close page', () => {
+    spyOn(component.onClosePage, 'emit');
+    const ev = new KeyboardEvent('keydown', { key: 'Escape' });
+    spyOn(ev, 'preventDefault');
+    spyOn(ev, 'stopPropagation');
+    component.onEscape(ev);
+    expect(ev.preventDefault).toHaveBeenCalled();
+    expect(ev.stopPropagation).toHaveBeenCalled();
+    expect(component.onClosePage.emit).toHaveBeenCalled();
+  });
+
+  it('onErrorRenderForm should restore default preChatFormJson via Globals', () => {
+    spyOn(g, 'setParameter');
+    component.onErrorRenderForm();
+    expect(g.setParameter).toHaveBeenCalledWith('preChatFormJson', jasmine.any(Array));
+    const arg = (g.setParameter as jasmine.Spy).calls.mostRecent().args[1] as any[];
+    expect(arg[0].name).toBe('userFullname');
+    expect(arg[1].name).toBe('userEmail');
+  });
+
+  it('should request focus on dialog root after view init (async)', fakeAsync(() => {
+    const fixtureInner = TestBed.createComponent(PrechatFormComponent);
+    const el = fixtureInner.nativeElement.querySelector('#chat21-prechat-form') as HTMLElement;
+    spyOn(el, 'focus');
+    fixtureInner.detectChanges();
+    tick(1000);
+    expect(el.focus).toHaveBeenCalled();
+  }));
 });

package/src/app/component/form/prechat-form/prechat-form.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Globals } from 'src/app/utils/globals';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
@@ -120,6 +120,13 @@ export class PrechatFormComponent implements OnInit, AfterViewInit {
     this.onClosePage.emit();
   }
 
+  @HostListener('keydown.escape', ['$event'])
+  onEscape(event: KeyboardEvent){
+    event.preventDefault();
+    event.stopPropagation();
+    this.returnClosePage();
+  }
+
   onSubmitForm(form: {}){
     this.logger.debug('[PRE-CHAT-FORM] onSubmitForm:', form)
     if(this.g.attributes){

package/src/app/component/form/prechat-form-test-mock.ts

@@ -0,0 +1,35 @@
+/**
+ * Shared mock for pre-chat dynamic form (unit / integration-style tests).
+ * Mirrors a typical `g.preChatFormJson` payload with i18n labels and email regex.
+ */
+export const PRECHAT_FORM_JSON_MOCK = [
+  {
+    name: 'userFullname',
+    type: 'text',
+    mandatory: true,
+    label: {
+      en: 'User fullname',
+      it: 'Nome utente',
+    },
+  },
+  {
+    name: 'userEmail',
+    type: 'text',
+    mandatory: true,
+    regex:
+      "/^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)+$/",
+    label: {
+      en: 'Email',
+      it: 'Indirizzo email',
+    },
+    errorLabel: {
+      en: 'Invalid email address',
+      it: 'Indirizzo email non valido',
+    },
+  },
+];
+
+/** Deep clone so `setTranslations` / `buildFormGroup` can mutate safely in tests. */
+export function clonePrechatFormJsonMock(): any[] {
+  return JSON.parse(JSON.stringify(PRECHAT_FORM_JSON_MOCK));
+}

package/src/app/component/home/home.component.html

@@ -1,6 +1,7 @@
 
-<!-- tabindex="2000"-->
-<div #homeComponent id='chat21-home-component' tabindex="2002" onFocus="document.querySelector('[aflistconv]').focus()">
+<div #homeComponent id='chat21-home-component'
+    role="region"
+    [attr.aria-label]="g?.welcomeTitle || g?.project?.widgetTitle || 'Chat'">
 
     <!-- HEADER -->
     <div class="c21-header" (click)="hideMenuOptions()" [ngStyle]="{'color': g.themeForegroundColor, 'background-image': g.colorGradient }" >
@@ -15,50 +16,59 @@
 
                 <!-- ICON MAXIMIZE -->
                 <div *ngIf="size === 'min' && !fullscreenMode && !g?.isMobile" class="c21-size-button">
-                    <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-close-button-body" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('max')" >
-                        <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+                    <button [attr.disabled]="(isButtonsDisabled)?true:null"
+                        type="button"
+                        class="c21-close-button-body"
+                        [attr.aria-label]="translationMap?.get('MAXIMIZE')"
+                        [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}"
+                        (click)="onChangeSize('max')">
+                        <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
                             width="17" height="17" viewBox="0 0 17 17">
                             <path d="M6.49001 8.30999L3.69 11.11V9.40999C3.69 8.93999 3.31 8.55999 2.84 8.55999C2.37 8.55999 1.99001 8.93999 1.99001 9.40999V14.01H6.59C7.06 14.01 7.44 13.63 7.44 13.16C7.44 12.69 7.06 12.31 6.59 12.31H4.89L7.69 9.50999L6.49001 8.30999ZM9.41 1.98999C8.94 1.98999 8.56001 2.36999 8.56001 2.83999C8.56001 3.30999 8.94 3.68999 9.41 3.68999H11.11L8.31001 6.48999L9.51 7.68999L12.31 4.88999V6.58999C12.31 7.05999 12.69 7.43999 13.16 7.43999C13.63 7.43999 14.01 7.05999 14.01 6.58999V1.98999H9.41Z"></path>
-                            <title id="altIconTitle">{{ translationMap?.get('MAXIMIZE') }}</title>
                         </svg>
                     </button>
                 </div>
 
                 <!-- ICON MINIMIZE -->
                 <div *ngIf="size==='top' && !fullscreenMode && !g?.isMobile" class="c21-size-button">
-                    <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-close-button-body" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('min')" >
-                        <svg role="img" aria-labelledby="altIconTitle" class="icon-menu" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+                    <button [attr.disabled]="(isButtonsDisabled)?true:null"
+                        type="button"
+                        class="c21-close-button-body"
+                        [attr.aria-label]="translationMap?.get('MINIMIZE')"
+                        [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}"
+                        (click)="onChangeSize('min')">
+                        <svg aria-hidden="true" focusable="false" class="icon-menu" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
                             width="17" height="17" viewBox="0 0 17 17">
                             <path d="M13.59 5.31h-1.7l3.3-3.3-1.2-1.2-3.3 3.3v-1.7a.85.85 0 1 0-1.7 0v4.6h4.6a.85.85 0 1 0 0-1.7M1.57 9.84c0 .47.38.85.85.85h1.7l-3.3 3.3 1.2 1.2 3.3-3.3v1.7a.85.85 0 1 0 1.7 0v-4.6h-4.6a.85.85 0 0 0-.85.85"></path>
-                            <title id="altIconTitle">{{ translationMap?.get('MINIMIZE') }}</title>
                         </svg>
                     </button>
                 </div>
 
                 <!-- ICON TOP -->
                 <div *ngIf="size==='max' && !fullscreenMode && !g?.isMobile" class="c21-size-button">
-                    <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-close-button-body" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('top')" >
-                        <svg  role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+                    <button [attr.disabled]="(isButtonsDisabled)?true:null"
+                        type="button"
+                        class="c21-close-button-body"
+                        [attr.aria-label]="translationMap?.get('CENTER')"
+                        [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}"
+                        (click)="onChangeSize('top')">
+                        <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
                             width="17" height="17" viewBox="0 0 17 17">
                             <path d="M3.7,7.6L2.5,6.4C2.2,6,2.2,5.5,2.5,5.2s0.9-0.4,1.2-0.1L7,8.4l-3.3,3.3c-0.4,0.4-0.8,0.3-1.1,0s-0.4-0.9-0.1-1.2l1.2-1.2 H1.5l0-1.7H3.7z"/>
                             <path d="M13.3,7.6l1.2-1.2c0.4-0.4,0.3-0.8,0-1.1s-0.9-0.4-1.2-0.1L10,8.4l3.3,3.3c0.4,0.4,0.8,0.3,1.1,0s0.4-0.9,0.1-1.2l-1.2-1.2 h2.2l0-1.7H13.3z"/>
                             <path d="M8.5,14.5L8.5,14.5c-0.5,0-0.9-0.4-0.9-0.8V3.3c0-0.5,0.4-0.8,0.8-0.8h0c0.5,0,0.8,0.4,0.8,0.8v10.4 C9.4,14.2,9,14.5,8.5,14.5z"/>
-                            <title id="altIconTitle">{{ translationMap?.get('CENTER') }}</title>
                         </svg>
                     </button>
                 </div>
 
 
                 <div class="c21-close-button">
-                    <button tabindex="2001" aria-label="    chiudi chat" class="c21-close-button-body" (click)="f21_close()">
-                        <!-- <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
-                            <path fill="none" d="M0 0h24v24H0V0z"/>
-                            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
-                            <title id="altIconTitle">{{translationMapHeader?.get('BUTTON_CLOSE_TO_ICON')}}</title>
-                        </svg> -->
-                        <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
+                    <button type="button"
+                        class="c21-close-button-body"
+                        [attr.aria-label]="translationMapHeader?.get('BUTTON_CLOSE_TO_ICON')"
+                        (click)="f21_close()">
+                        <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
                             <path d="M19.35,9.21c.2-.2.2-.51,0-.71l-.71-.71c-.2-.2-.51-.2-.71,0l-5.94,5.94-5.94-5.94c-.2-.2-.51-.2-.71,0l-.71.71c-.2.2-.2.51,0,.71l7,7c.2.2.51.2.71,0l7-7Z"/>
-                            <title id="altIconTitle">{{translationMapHeader?.get('BUTTON_CLOSE_TO_ICON')}}</title>
                         </svg>
                     </button>
                 </div>
@@ -73,8 +83,8 @@
 
                 <!-- MESSAGE HEADER -->
                 <div class="c21-text fade-in-bottom">
-                    <div class="c21-text-welcome">{{g?.welcomeTitle}}</div>          
-                    <div *ngIf="g.welcomeMsg" class="c21-text-intro">{{g.welcomeMsg}}</div>
+                    <h1 class="c21-text-welcome">{{g?.welcomeTitle}}</h1>
+                    <p *ngIf="g.welcomeMsg" class="c21-text-intro">{{g.welcomeMsg}}</p>
                 </div>
             </div>
         </div>
@@ -114,9 +124,9 @@
     <div class="c21-footer-content fade-in-bottom-footer" *ngIf="g?.whatsappNumber || g?.telegramUsername || g?.messangerPageTitle">
         <div class="label-item">{{translationMapFooter?.get('SWITCH_TO')}}</div>
         <div id="c21-whatsapp" *ngIf="g?.whatsappNumber && g?.whatsappNumber.trim() !== ''">
-            <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openConversationOnPlatform('whatsapp')">
+            <button type="button" aflistconv #aflistconv class="c21-button-primary" aria-label="WhatsApp" (click)="openConversationOnPlatform('whatsapp')">
                 <span class="v-align-center">
-                    <svg aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 1219.547 1225.016">
+                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 1219.547 1225.016">
                         <path fill="#E0E0E0" d="M1041.858 178.02C927.206 63.289 774.753.07 612.325 0 277.617 0 5.232 272.298 5.098 606.991c-.039 106.986 27.915 211.42 81.048 303.476L0 1225.016l321.898-84.406c88.689 48.368 188.547 73.855 290.166 73.896h.258.003c334.654 0 607.08-272.346 607.222-607.023.056-162.208-63.052-314.724-177.689-429.463zm-429.533 933.963h-.197c-90.578-.048-179.402-24.366-256.878-70.339l-18.438-10.93-191.021 50.083 51-186.176-12.013-19.087c-50.525-80.336-77.198-173.175-77.16-268.504.111-278.186 226.507-504.503 504.898-504.503 134.812.056 261.519 52.604 356.814 147.965 95.289 95.36 147.728 222.128 147.688 356.948-.118 278.195-226.522 504.543-504.693 504.543z"/>
                         <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="609.77" y1="1190.114" x2="609.77" y2="21.084">
                             <stop offset="0" stop-color="#20b038"/>
@@ -125,7 +135,6 @@
                         <image overflow="visible" opacity=".08" width="20" height="20" xlink:href="FCC0802E2AF8A915.png" transform="translate(270.984 291.372)"/>
                         <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M462.273 349.294c-11.234-24.977-23.062-25.477-33.75-25.914-8.742-.375-18.75-.352-28.742-.352-10 0-26.25 3.758-39.992 18.766-13.75 15.008-52.5 51.289-52.5 125.078 0 73.797 53.75 145.102 61.242 155.117 7.5 10 103.758 166.266 256.203 226.383 126.695 49.961 152.477 40.023 179.977 37.523s88.734-36.273 101.234-71.297c12.5-35.016 12.5-65.031 8.75-71.305-3.75-6.25-13.75-10-28.75-17.5s-88.734-43.789-102.484-48.789-23.75-7.5-33.75 7.516c-10 15-38.727 48.773-47.477 58.773-8.75 10.023-17.5 11.273-32.5 3.773-15-7.523-63.305-23.344-120.609-74.438-44.586-39.75-74.688-88.844-83.438-103.859-8.75-15-.938-23.125 6.586-30.602 6.734-6.719 15-17.508 22.5-26.266 7.484-8.758 9.984-15.008 14.984-25.008 5-10.016 2.5-18.773-1.25-26.273s-32.898-81.67-46.234-111.326z"/>
                         <path fill="#FFF" d="M1036.898 176.091C923.562 62.677 772.859.185 612.297.114 281.43.114 12.172 269.286 12.039 600.137 12 705.896 39.633 809.13 92.156 900.13L7 1211.067l318.203-83.438c87.672 47.812 186.383 73.008 286.836 73.047h.255.003c330.812 0 600.109-269.219 600.25-600.055.055-160.343-62.328-311.108-175.649-424.53zm-424.601 923.242h-.195c-89.539-.047-177.344-24.086-253.93-69.531l-18.227-10.805-188.828 49.508 50.414-184.039-11.875-18.867c-49.945-79.414-76.312-171.188-76.273-265.422.109-274.992 223.906-498.711 499.102-498.711 133.266.055 258.516 52 352.719 146.266 94.195 94.266 146.031 219.578 145.992 352.852-.118 274.999-223.923 498.749-498.899 498.749z"/>
-                        <title id="altIconTitle">Whatsapp</title>
                     </svg>
                     <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" focusable="false" viewBox="0 0 448 512" xml:space="preserve">
                         <path stroke="#5f6368" stroke-width="8px" fill="#5f6368" d="M380.9,97.1C339,55.1,283.2,32,223.9,32c-122.4,0-222,99.6-222,222c0,39.1,10.2,77.3,29.6,111L0,480l117.7-30.9  c32.4,17.7,68.9,27,106.1,27h0.1c122.3,0,224.1-99.6,224.1-222C448,194.8,422.8,139.1,380.9,97.1z M223.9,438.7  c-33.2,0-65.7-8.9-94-25.7l-6.7-4l-69.8,18.3L72,359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2c0-101.7,82.8-184.5,184.6-184.5  c49.3,0,95.6,19.2,130.4,54.1s56.2,81.2,56.1,130.5C410.5,355.9,325.6,438.7,223.9,438.7z M325.1,300.5c-5.5-2.8-32.8-16.2-37.9-18  c-5.1-1.9-8.8-2.8-12.5,2.8c-3.7,5.6-14.3,18-17.6,21.8c-3.2,3.7-6.5,4.2-12,1.4c-32.6-16.3-54-29.1-75.5-66  c-5.7-9.8,5.7-9.1,16.3-30.3c1.8-3.7,0.9-6.9-0.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5c-3.2-0.2-6.9-0.2-10.6-0.2  c-3.7,0-9.7,1.4-14.8,6.9c-5.1,5.6-19.4,19-19.4,46.3s19.9,53.7,22.6,57.4c2.8,3.7,39.1,59.7,94.8,83.8c35.2,15.2,49,16.5,66.6,13.9  c10.7-1.6,32.8-13.4,37.4-26.4s4.6-24.1,3.2-26.4C334.3,304.6,330.6,303.2,325.1,300.5z"/>
@@ -135,9 +144,9 @@
             </button>
         </div>
         <div id="c21-telegram" *ngIf="g?.telegramUsername && g?.telegramUsername.trim() !== ''">
-            <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openConversationOnPlatform('telegram')">
+            <button type="button" aflistconv #aflistconv class="c21-button-primary" aria-label="Telegram" (click)="openConversationOnPlatform('telegram')">
                 <span class="v-align-center">
-                    <svg aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0 0 368 368" style="enable-background:new 0 0 368 368;" xml:space="preserve">
+                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0 0 368 368" style="enable-background:new 0 0 368 368;" xml:space="preserve">
                         <g id="XMLID_1_">
                             <linearGradient id="XMLID_7_" gradientUnits="userSpaceOnUse" x1="-66.831" y1="-68.1757" x2="-65.3102" y2="-68.1757" gradientTransform="matrix(-60 139.992 -139.992 -60 -13316.416 5324.4634)">
                                 <stop offset="0" style="stop-color:#37AEE2"/>
@@ -152,7 +161,6 @@
                             </linearGradient>
                             <path id="XMLID_6_" fill="url(#XMLID_8_)" d="M153.6,221.1l73.5,54.3c8.4,4.6,14.4,2.2,16.5-7.8l29.9-141.1c3.1-12.3-4.7-17.9-12.7-14.2   L85.2,180.2c-12,4.8-11.9,11.5-2.2,14.5l45.1,14.1l104.4-65.9c4.9-3,9.5-1.4,5.7,1.9"/>
                         </g>
-                        <title id="altIconTitle">Telegram</title>
                     </svg>
                     <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0 0 448 512" xml:space="preserve">
                         <path fill="#5f6368" d="M446.7,98.6l-67.6,318.8c-5.1,22.5-18.4,28.1-37.3,17.5l-103-75.9l-49.7,47.8c-5.5,5.5-10.1,10.1-20.7,10.1  l7.4-104.9l190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8,284L16.2,252.2c-22.1-6.9-22.5-22.1,4.6-32.7L418.2,66.4  C436.6,59.5,452.7,70.5,446.7,98.6z"/>
@@ -162,9 +170,9 @@
             </button>
         </div>
         <div id="c21-messanger" *ngIf="g?.messangerPageTitle && g?.messangerPageTitle.trim() !== ''">
-            <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openConversationOnPlatform('messanger')">
+            <button type="button" aflistconv #aflistconv class="c21-button-primary" aria-label="Facebook Messenger" (click)="openConversationOnPlatform('messanger')">
                 <span class="v-align-center">
-                    <svg aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" width="26" height="26" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 800 800">
+                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="26" height="26" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 800 800">
                         <radialGradient id="Gradient" cx="101.925" cy="809.0079" r="1.0896" gradientTransform="matrix(800 0 0 -799.9985 -81386 648000.75)" gradientUnits="userSpaceOnUse">
                          <stop offset="0" style="stop-color:#0099FF"/>
                          <stop offset="0.6098" style="stop-color:#A033FF"/>
@@ -173,7 +181,6 @@
                         </radialGradient>
                         <path fill="url(#Gradient)" d="M400,0C174.7,0,0,165.1,0,388c0,116.6,47.8,217.4,125.6,287c6.5,5.8,10.5,14,10.7,22.8l2.2,71.2  c0.7,22.7,24.1,37.5,44.9,28.3l79.4-35c6.7-3,14.3-3.5,21.4-1.6c36.5,10,75.3,15.4,115.8,15.4c225.3,0,400-165.1,400-388  S625.3,0,400,0z"/>
                         <path fill="#FFFFFF" d="M159.8,501.5l117.5-186.4c18.7-29.7,58.7-37,86.8-16l93.5,70.1c8.6,6.4,20.4,6.4,28.9-0.1    l126.2-95.8c16.8-12.8,38.8,7.4,27.6,25.3L522.7,484.9c-18.7,29.7-58.7,37-86.8,16l-93.5-70.1c-8.6-6.4-20.4-6.4-28.9,0.1    l-126.2,95.8C170.5,539.5,148.5,519.4,159.8,501.5z"/>
-                        <title id="altIconTitle">Facebook Messanger</title>
                     </svg>
                     <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" focusable="false"  viewBox="0 0 512 512"  xml:space="preserve">
                         <path fill="#5f6368" d="M256.5,8C116.5,8,8,110.3,8,248.6c0,72.3,29.7,134.8,78.1,177.9c8.3,7.5,6.6,11.9,8.1,58.2  c0.4,11,9.6,19.6,20.6,19.2c2.5-0.1,5-0.6,7.3-1.7c52.9-23.3,53.6-25.1,62.6-22.7c153.3,42.2,319.4-55.9,319.4-231  C504,110.3,396.6,8,256.5,8z M405.8,193.1l-73,115.6c-11.1,17.4-34.1,22.6-51.6,11.5c-0.8-0.5-1.6-1-2.3-1.6l-58.1-43.5  c-5.3-4-12.7-4-18,0l-78.4,59.4c-10.5,7.9-24.2-4.6-17.1-15.7l73-115.6c11-17.4,34.1-22.6,51.6-11.6c0.8,0.5,1.6,1.1,2.4,1.6  l58.1,43.5c5.3,4,12.7,4,18,0l78.4-59.4C399.1,169.5,412.8,182,405.8,193.1L405.8,193.1z"/>
@@ -187,7 +194,7 @@
     <!-- FOOTER -->
     <div class="c21-footer fade-in-bottom-footer">
         <div id="c21-powered-by" (mouseover)="hover=true" (mouseleave)="hover=false">
-            <div tabindex="-1" class="c21-powered-by" [innerHTML]="g.poweredBy" (click)="managePoweredBy($event)"></div>
+            <div class="c21-powered-by" [innerHTML]="g.poweredBy" (click)="managePoweredBy($event)"></div>
             <!-- <div class="build_version">{{g.BUILD_VERSION}}</div> -->
         </div>
         <chat-menu-options *ngIf="!hideSettings"