@chat21/chat21-web-widget 5.1.32-rc8 → 5.1.33-rc8

package/src/app/component/selection-department/selection-department.component.spec.ts

@@ -1,34 +1,179 @@
-import { ElementRef } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { A11yModule } from '@angular/cdk/a11y';
+import { Injectable } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NGXLogger } from 'ngx-logger';
+
 import { AppStorageService } from '../../../chat21-core/providers/abstract/app-storage.service';
+import { CustomLogger } from '../../../chat21-core/providers/logger/customLogger';
+import { LoggerInstance } from '../../../chat21-core/providers/logger/loggerInstance';
 import { Globals } from '../../utils/globals';
 
 import { SelectionDepartmentComponent } from './selection-department.component';
 
+@Injectable()
+class AppStorageServiceStub extends AppStorageService {
+  lastAttributesJson: string | null = null;
+  setItem = jasmine.createSpy('setItem').and.callFake((key: string, value: any) => {
+    if (key === 'attributes') {
+      this.lastAttributesJson = value as string;
+    }
+  });
+  getItem(): any {
+    return null;
+  }
+  getItemWithoutProjectID(): any {
+    return null;
+  }
+  setItemWithoutProjectID(): void {}
+  removeItem(): void {}
+  clear(): void {}
+  initialize(): void {}
+}
+
 describe('SelectionDepartmentComponent', () => {
   let component: SelectionDepartmentComponent;
   let fixture: ComponentFixture<SelectionDepartmentComponent>;
-  class MockElementRef {}
-  
-  beforeEach(async(() => {
+  let globals: Globals;
+  let storage: AppStorageServiceStub;
+
+  beforeEach(waitForAsync(() => {
+    const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+    LoggerInstance.setInstance(new CustomLogger(ngxlogger));
     TestBed.configureTestingModule({
-      declarations: [ SelectionDepartmentComponent ],
-      providers: [ 
-        Globals, 
-        { provide: ElementRef, useClass: MockElementRef },
-        AppStorageService
-      ]
-    })
-    .compileComponents();
+      imports: [A11yModule],
+      declarations: [SelectionDepartmentComponent],
+      providers: [
+        Globals,
+        { provide: AppStorageService, useClass: AppStorageServiceStub },
+        { provide: NGXLogger, useValue: ngxlogger },
+      ],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SelectionDepartmentComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    globals = TestBed.inject(Globals);
+    storage = TestBed.inject(AppStorageService) as unknown as AppStorageServiceStub;
+    globals.initDefafultParameters();
+    globals.themeColor = '#112233';
+    globals.themeForegroundColor = '#ddeeff';
+    globals.colorGradient180 = 'linear-gradient(#000,#fff)';
+    globals.LABEL_SELECT_TOPIC = 'Scegli un argomento';
+    globals.BUTTON_CLOSE_TO_ICON = 'Chiudi';
+    globals.departments = [
+      { _id: 'dep-a', name: 'Vendite' } as any,
+      { _id: 'dep-b', name: 'Supporto' } as any,
+    ];
+    globals.attributes = { userFullname: 'Ada', userEmail: 'ada@example.com' } as any;
+    globals.windowContext = {} as any;
   });
 
   it('should create', () => {
+    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
+
+  it('should render dialog with topic label and one list row per department', () => {
+    fixture.detectChanges();
+    const dialog = fixture.nativeElement.querySelector('#chat21-selection-department') as HTMLElement;
+    expect(dialog.getAttribute('role')).toBe('dialog');
+    expect(dialog.getAttribute('aria-modal')).toBe('true');
+    expect(dialog.getAttribute('aria-label')).toBe('Scegli un argomento');
+    const heading = fixture.nativeElement.querySelector('h2.c21-message-field') as HTMLElement;
+    expect(heading.textContent?.trim()).toBe('Scegli un argomento');
+    const buttons = fixture.nativeElement.querySelectorAll('.c21-button-department');
+    expect(buttons.length).toBe(2);
+    expect(buttons[0].textContent).toContain('Vendite');
+    expect(buttons[1].textContent).toContain('Supporto');
+  });
+
+  it('onSelectDepartment should set globals, attributes and persist JSON in storage', () => {
+    fixture.detectChanges();
+    spyOn(component.onDepartmentSelected, 'emit');
+    const dept = { _id: 'dep-b', name: 'Supporto' };
+    component.onSelectDepartment(dept);
+    expect(globals.departmentSelected).toEqual(dept as any);
+    expect(globals.attributes.departmentId).toBe('dep-b');
+    expect(globals.attributes.departmentName).toBe('Supporto');
+    expect(storage.setItem).toHaveBeenCalledWith('attributes', jasmine.any(String));
+    const parsed = JSON.parse(storage.lastAttributesJson!);
+    expect(parsed.departmentId).toBe('dep-b');
+    expect(parsed.departmentName).toBe('Supporto');
+    expect(parsed.userEmail).toBe('ada@example.com');
+    expect(component.onDepartmentSelected.emit).toHaveBeenCalledWith(dept);
+  });
+
+  it('click on department button should trigger selection flow', () => {
+    fixture.detectChanges();
+    spyOn(component, 'onSelectDepartment').and.callThrough();
+    const second = fixture.debugElement.queryAll(By.css('.c21-button-department'))[1];
+    second.nativeElement.click();
+    expect(component.onSelectDepartment).toHaveBeenCalledWith(jasmine.objectContaining({ _id: 'dep-b' }));
+  });
+
+  it('closePage should emit onClose', () => {
+    fixture.detectChanges();
+    spyOn(component.onClose, 'emit');
+    component.closePage();
+    expect(component.onClose.emit).toHaveBeenCalled();
+  });
+
+  it('openPage should emit onOpen', () => {
+    fixture.detectChanges();
+    spyOn(component.onOpen, 'emit');
+    component.openPage();
+    expect(component.onOpen.emit).toHaveBeenCalled();
+  });
+
+  it('cancelPage should reset newConversationStart and emit onClose', () => {
+    fixture.detectChanges();
+    globals.newConversationStart = true;
+    spyOn(component.onClose, 'emit');
+    component.cancelPage();
+    expect(globals.newConversationStart).toBe(false);
+    expect(component.onClose.emit).toHaveBeenCalled();
+  });
+
+  it('should invoke beforeDepartmentsFormRender hook when present on windowContext.tiledesk', () => {
+    const hook = jasmine.createSpy('beforeDepartmentsFormRender').and.returnValue([{ _id: 'x', name: 'Filtered' }]);
+    globals.windowContext = { tiledesk: { beforeDepartmentsFormRender: hook } } as any;
+    const f2 = TestBed.createComponent(SelectionDepartmentComponent);
+    const c2 = f2.componentInstance;
+    f2.detectChanges();
+    expect(hook).toHaveBeenCalledWith(globals.departments);
+    expect(c2.departments.length).toBe(1);
+    expect(c2.departments[0].name).toBe('Filtered');
+    f2.destroy();
+  });
+
+  it('should emit onBeforeDepartmentsFormRender when hook is absent', () => {
+    spyOn(component.onBeforeDepartmentsFormRender, 'emit');
+    fixture.detectChanges();
+    expect(component.onBeforeDepartmentsFormRender.emit).toHaveBeenCalledWith(
+      jasmine.arrayContaining([jasmine.objectContaining({ name: 'Vendite' })]),
+    );
+  });
+
+  it('Escape host listener should call closePage', () => {
+    fixture.detectChanges();
+    spyOn(component, 'closePage');
+    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.closePage).toHaveBeenCalled();
+  });
+
+  it('should focus afSelectionDepartment after delay in ngAfterViewInit', fakeAsync(() => {
+    fixture.detectChanges();
+    const dialog = fixture.nativeElement.querySelector('#chat21-selection-department') as HTMLElement;
+    spyOn(dialog, 'focus');
+    component.ngAfterViewInit();
+    tick(1000);
+    expect(dialog.focus).toHaveBeenCalled();
+  }));
 });

package/src/app/component/selection-department/selection-department.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, OnInit, Output, ViewChild } from '@angular/core';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { Globals } from '../../utils/globals';
 
@@ -172,6 +172,13 @@ export class SelectionDepartmentComponent implements OnInit, AfterViewInit {
         this.onClose.emit();
     }
 
+    @HostListener('keydown.escape', ['$event'])
+    onEscape(event: KeyboardEvent){
+        event.preventDefault();
+        event.stopPropagation();
+        this.closePage();
+    }
+
     cancelPage() {
         this.logger.debug('[SELECT-DEP] cancelPage');
         this.g.newConversationStart = false;

package/src/app/component/send-button/send-button.component.html

@@ -1,21 +1,13 @@
-<!-- tabindex="000"-->
-
-<button aflauncherbutton #aflauncherbutton id="c21-launcher-button" class="c21-button-clean scale-in-center c21-align-right" 
-    *ngIf="g.isLogged == true" 
+<button aflauncherbutton #aflauncherbutton type="button" id="c21-launcher-button" class="c21-button-clean scale-in-center c21-align-right"
+    *ngIf="g.isLogged == true"
     [style]="{ 'background-color': g.themeColor, 'bottom': g.marginY+'px!important', 'left':(g.align==='left')?g.marginX+'px!important':'', 'right':(g.align==='right')?g.marginX+'px!important':'', 'width': g.launcherWidth, 'height': g.launcherHeight, 'border-radius': g.baloonShape}"
     (click)="onSendPressed($event)"
-    tabindex="1000" 
-    aria-label="    apri chat"
-    >
+    [attr.aria-label]="g.LABEL_SEND_NEW_MESSAGE || 'Send new message'">
 
     <!-- SEND ICON -->
-    <!-- [@enterBubbleAnimation] -->
-    <div class="launcher-button rotate-center" >
-        <!-- <img *ngIf="g.baloonImage !== '' " [src]="g.baloonImage" [ngStyle]="{'width': '100%', 'height': '100%', 'margin': 'auto'}"> -->
-        <svg role="img" [style]="{'fill': g.themeForegroundColor, 'display': (g.baloonImage==='')?'':'none' }" xmlns="http://www.w3.org/2000/svg" width="100%"
+    <div class="launcher-button rotate-center">
+        <svg aria-hidden="true" focusable="false" [style]="{'fill': g.themeForegroundColor, 'display': (g.baloonImage==='')?'':'none' }" xmlns="http://www.w3.org/2000/svg" width="100%"
             height="100%" viewBox="0 0 90 90">
-            <!-- <path fill="none" d="M0 0h24v24H0V0z" />
-            <path d="M33.57,31A4.58,4.58,0,0,0,29,35.57V58.3a1.94,1.94,0,0,0,3.32,1.38l3-3a.29.29,0,0,1,.21-.09H56.43A4.58,4.58,0,0,0,61,52V35.57A4.58,4.58,0,0,0,56.43,31Z" /> -->
             <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
         </svg>
     </div>

package/src/app/component/send-button/send-button.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SendButtonComponent } from './send-button.component';
 
@@ -6,7 +6,7 @@ describe('SendButtonComponent', () => {
   let component: SendButtonComponent;
   let fixture: ComponentFixture<SendButtonComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SendButtonComponent ]
     })

package/src/app/component/star-rating-widget/star-rating-widget.component.html

@@ -9,33 +9,22 @@ svg.star:hover{
     fill: #FFD700;
 }
 </style>
-<div id="chat21-star-rating-widget">
+<div id="chat21-star-rating-widget" role="dialog" aria-modal="true" [attr.aria-label]="g.CUSTOMER_SATISFACTION">
     <!-- HEADER -->
     <div class="c21-header" [ngStyle]="{ 'color': g.themeForegroundColor, 'background-image': g.colorGradient180 }">
         <div class="c21-header-container">
-            <!-- ICON CLOSE CHAT -->
-            <!-- <div class="c21-header-button">
-                <div class="c21-close-button c21-small"  aria-label="Close" aria-hidden="true" role="button">
-                    <div 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">
-                            <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>
-                    </div>
-                </div>
-            </div> -->
-            
             <!-- CONTENT HEADER -->
             <div class="c21-header-content">
                 <!-- ICON BACK -->
-                <button *ngIf="(step > 0 && step != 2)" tabindex="1417" aria-label=" indietro " class="c21-header-button c21-left c21-button-clean" (click)="prevStep()">
-                    <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg"
+                <button *ngIf="(step > 0 && step != 2)"
+                    type="button"
+                    [attr.aria-label]="g['BACK']"
+                    class="c21-header-button c21-left c21-button-clean"
+                    (click)="prevStep()">
+                    <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg"
                         width="24px" height="24px" viewBox="0 0 24 24">
-                        <!-- <path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7.07 18.28c.43-.9 3.05-1.78 4.93-1.78s4.51.88 4.93 1.78C15.57 19.36 13.86 20 12 20s-3.57-.64-4.93-1.72zm11.29-1.45c-1.43-1.74-4.9-2.33-6.36-2.33s-4.93.59-6.36 2.33C4.62 15.49 4 13.82 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8c0 1.82-.62 3.49-1.64 4.83zM12 6c-1.94 0-3.5 1.56-3.5 3.5S10.06 13 12 13s3.5-1.56 3.5-3.5S13.94 6 12 6zm0 5c-.83 0-1.5-.67-1.5-1.5S11.17 8 12 8s1.5.67 1.5 1.5S12.83 11 12 11z"/> -->
                         <path fill="none" d="M0 0h24v24H0V0z" />
                         <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z" />
-                        <title id="altIconTitle">{{ g['BACK'] }}</title>
                     </svg>
                 </button>
                 <!-- TITLE HEADER -->
@@ -58,61 +47,56 @@ svg.star:hover{
                 <!-- ***************  STEP 0 : BEGIN ***************** -->
                 <div *ngIf="step==0" class="step-rate">
                     <div *ngIf="g.allowTranscriptDownload" class="c21-modal-content" style="text-align: right; margin: 0px 20px 30px 10px;">
-                        <div class="c21-link" (click)="dowloadTranscript()" >
+                        <button type="button" class="c21-link c21-button-clean" (click)="dowloadTranscript()">
                             <span [ngStyle]="{'color': stylesMap?.get('themeColor')}">{{ g.DOWNLOAD_TRANSCRIPT }}</span>
-                        </div>
+                        </button>
                     </div>
                     <div class="clear"></div>
-                   
+
                     <!-- CONTENT -->
                     <div class="c21-modal-content">
                         <div class="default-text">{{ g.YOUR_OPINION_ON_OUR_CUSTOMER_SERVICE }}</div>
                         <fieldset class="chat21-rating" [attr.disabled]="!g.isOpenStartRating? '' : null">
+                            <legend class="visually-hidden">{{ g.YOUR_RATING }}</legend>
                             <input class="c21-input-star" type="radio" id="star1" name="rating" value="1" />
                             <label (mouseover)="mouseOverRate(1)" (mouseleave)="mouseOverRate(0)" (click)="openRate(1)" class="full c21-button" for="star1" title="scarso - 1 star">
-                                <svg class="star" [class.active]="mouseRate>=1" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
+                                <svg aria-hidden="true" focusable="false" class="star" [class.active]="mouseRate>=1" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
                             </label>
                             <input class="c21-input-star" type="radio" id="star2" name="rating" value="2" />
                             <label (mouseover)="mouseOverRate(2)" (mouseleave)="mouseOverRate(0)" (click)="openRate(2)" class="full c21-button" for="star2" title="sufficiente - 2 stars">
-                                <svg class="star" [class.active]="mouseRate>=2" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
+                                <svg aria-hidden="true" focusable="false" class="star" [class.active]="mouseRate>=2" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
                             </label>
                             <input class="c21-input-star" type="radio" id="star3" name="rating" value="3" />
                             <label (mouseover)="mouseOverRate(3)" (mouseleave)="mouseOverRate(0)" (click)="openRate(3)" class="full c21-button" for="star3" title="buono - 3 stars">
-                                <svg class="star" [class.active]="mouseRate>=3" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
+                                <svg aria-hidden="true" focusable="false" class="star" [class.active]="mouseRate>=3" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
                             </label>
                             <input class="c21-input-star" type="radio" id="star4" name="rating" value="4" />
                             <label (mouseover)="mouseOverRate(4)" (mouseleave)="mouseOverRate(0)" (click)="openRate(4)" class="full c21-button" for="star4" title="ottimo - 4 stars">
-                                <svg class="star" [class.active]="mouseRate>=4" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
+                                <svg aria-hidden="true" focusable="false" class="star" [class.active]="mouseRate>=4" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
                             </label>
                             <input class="c21-input-star" type="radio" id="star5" name="rating" value="5" />
                             <label (mouseover)="mouseOverRate(5)" (mouseleave)="mouseOverRate(0)" (click)="openRate(5)" class="full c21-button" for="star5" title="eccellente - 5 stars">
-                                <svg class="star" [class.active]="mouseRate>=5" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
+                                <svg aria-hidden="true" focusable="false" class="star" [class.active]="mouseRate>=5" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
                             </label>
                         </fieldset>
                     </div>
                     <div class="clear"></div>
-                    <!-- <button [attr.disabled]="!g.isOpenStartRating? '' : null" *ngIf="g.allowTranscriptDownload !== true" class="c21-button-primary" [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor}"
-                        (click)="dowloadTranscript()">
-                        <span [ngStyle]="{'color': g.themeForegroundColor}">{{ g.DOWNLOAD_TRANSCRIPT }}</span>
-                    </button> -->
-                    <!-- <button class="c21-button-link" (click)="returnClosePage()">
-                        <span>{{ g.CLOSE }}</span>
-                    </button> -->
-
-                     <!-- ICON CLOSE -->
-                    <button tabindex="1414"  class="c21-button-primary" (click)="returnClosePage()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
+
+                     <!-- BUTTON CLOSE -->
+                    <button type="button" class="c21-button-primary"
+                        [attr.aria-label]="g.CLOSE"
+                        (click)="returnClosePage()"
+                        [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
                         <span class="v-align-center">
-                            <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg"
+                            <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg"
                                 width="18" height="18" 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">{{ g.CLOSE }}</title>    
                             </svg>
                         </span>
                         <span class="v-align-center c21-label-button">
                             {{ g.CLOSE }}
-                          <!-- {{translationMap?.get('LABEL_START_NW_CONV')}} -->
-                        </span>  
+                        </span>
                         <div class="clear"></div>
                     </button>
                 </div>
@@ -120,62 +104,47 @@ svg.star:hover{
 
                 <!-- ***************  STEP 1 : BEGIN ***************** -->
                 <div *ngIf="step==1" class="step-rate">
-                    <!-- CONTENT -->
-                    <!-- <div *ngIf="g.allowTranscriptDownload" class="c21-modal-content" style="text-align: right; margin: 0px 20px 30px 10px;">
-                        <div class="c21-link" (click)="dowloadTranscript()" >
-                            <span [ngStyle]="{'color': g.themeColor}">{{ g.DOWNLOAD_TRANSCRIPT }}</span>
-                        </div>
-                    </div> -->
                     <div class="clear"></div>
                     <div class="c21-step-content">
-                        <!-- il tuo voto: -->
-                        
-                        <!-- <div class="chat21-stars">
-                            <span *ngIf="rate>0" class="fa fa-star checked"></span>
-                            <span *ngIf="rate>1" class="fa fa-star checked"></span>
-                            <span *ngIf="rate>2" class="fa fa-star checked"></span>
-                            <span *ngIf="rate>3" class="fa fa-star checked"></span>
-                            <span *ngIf="rate>4" class="fa fa-star checked"></span>
-                        </div> -->
-                        <!-- <div class="default-text">{{ g.YOUR_RATING }}</div> -->
-                        
-
-                        <!-- Scrivi la tua opinione...(opzionale) -->
+
                         <textarea #textbox rows="1" id="chat21-message-rate-context" class='textarea-rate'
+                            [attr.aria-label]="g.WRITE_YOUR_OPINION"
                             placeholder="{{ g.WRITE_YOUR_OPINION }}">{{message}}</textarea>
                         <div class="clear"></div>
 
-                        <!-- ICON CLOSE -->
-                        <button tabindex="1415"  class="c21-button-primary" (click)="returnClosePage()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
+                        <!-- BUTTON CLOSE -->
+                        <button type="button" class="c21-button-primary"
+                            [attr.aria-label]="g.CLOSE"
+                            (click)="returnClosePage()"
+                            [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
                             <span class="v-align-center">
-                                <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg"
+                                <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg"
                                     width="18" height="18" 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">{{ g.CLOSE }}</title>    
                                 </svg>
                             </span>
                             <span class="v-align-center c21-label-button">
                                 {{ g.CLOSE }}
-                              <!-- {{translationMap?.get('LABEL_START_NW_CONV')}} -->
-                            </span>  
+                            </span>
                             <div class="clear"></div>
                         </button>
 
-                        <!-- ICON SUBMIT -->
-                        <button tabindex="1416"  class="c21-button-primary" (click)="sendRate()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
+                        <!-- BUTTON SUBMIT -->
+                        <button type="button" class="c21-button-primary"
+                            [attr.aria-label]="g.SUBMIT"
+                            (click)="sendRate()"
+                            [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
                             <span class="v-align-center">
-                                <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg"
+                                <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg"
                                     width="18" height="18" viewBox="0 0 24 24">
                                     <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
                                     <path d="M0 0h24v24H0z" fill="none"/>
-                                    <title id="altIconTitle">{{ g.SUBMIT }}</title>    
                                 </svg>
                             </span>
                             <span class="v-align-center c21-label-button">
                                 {{ g.SUBMIT }}
-                              <!-- {{translationMap?.get('LABEL_START_NW_CONV')}} -->
-                            </span>  
+                            </span>
                             <div class="clear"></div>
                         </button>
 
@@ -187,32 +156,33 @@ svg.star:hover{
                 <!-- ***************  STEP 2 : BEGIN ***************** -->
                 <div *ngIf="step==2" class="step-rate">
                     <div *ngIf="g.allowTranscriptDownload" class="c21-modal-content" style="text-align: right; margin: 0px 20px 30px 10px;">
-                        <div class="c21-link" (click)="dowloadTranscript()" >
+                        <button type="button" class="c21-link c21-button-clean" (click)="dowloadTranscript()">
                             <span [ngStyle]="{'color': stylesMap?.get('themeColor')}">{{ g.DOWNLOAD_TRANSCRIPT }}</span>
-                        </div>
+                        </button>
                     </div>
                     <div class="clear"></div>
-                
+
                     <!-- CONTENT -->
                     <div class="c21-step-content">
                         <div class="default-title">{{ g.THANK_YOU_FOR_YOUR_EVALUATION }}</div>
                         <div class="default-text">{{ g.YOUR_RATING_HAS_BEEN_RECEIVED }}</div>
                     </div>
 
-                    <!-- ICON CLOSE -->
-                    <button tabindex="1415"  class="c21-button-primary" (click)="returnClosePage()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
+                    <!-- BUTTON CLOSE -->
+                    <button type="button" class="c21-button-primary"
+                        [attr.aria-label]="g.CLOSE"
+                        (click)="returnClosePage()"
+                        [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
                         <span class="v-align-center">
-                            <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg"
+                            <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg"
                                 width="18" height="18" 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">{{ g.CLOSE }}</title>    
                             </svg>
                         </span>
                         <span class="v-align-center c21-label-button">
                             {{ g.CLOSE }}
-                          <!-- {{translationMap?.get('LABEL_START_NW_CONV')}} -->
-                        </span>  
+                        </span>
                         <div class="clear"></div>
                     </button>
                 </div>
@@ -225,4 +195,4 @@ svg.star:hover{
 
     </div>
 
-</div>
+</div>

package/src/app/directives/tooltip.directive.spec.ts

@@ -1,8 +1,12 @@
+import { ElementRef, Renderer2 } from '@angular/core';
+
 import { TooltipDirective } from './tooltip.directive';
 
 describe('TooltipDirective', () => {
-  // it('should create an instance', () => {
-  //   const directive = new TooltipDirective();
-  //   expect(directive).toBeTruthy();
-  // });
+  it('should create', () => {
+    const el = document.createElement('span');
+    const renderer = jasmine.createSpyObj('Renderer2', ['createElement', 'appendChild', 'addClass', 'removeClass', 'removeChild', 'setStyle']);
+    const directive = new TooltipDirective(new ElementRef(el), renderer as unknown as Renderer2);
+    expect(directive).toBeTruthy();
+  });
 });

package/src/app/modals/confirm-close/confirm-close.component.html

@@ -1,25 +1,37 @@
-<div class="modal-container">
+<div class="modal-container"
+    role="dialog"
+    aria-modal="true"
+    cdkTrapFocus
+    [cdkTrapFocusAutoCapture]="true"
+    aria-labelledby="confirm-close-title"
+    [attr.aria-label]="translationMap?.get('CONFIRM_CLOSE_CHAT')">
     <div class="header">
         <!-- ICON CLOSE CHAT -->
-        <button tabindex="-1" class="c21-header-button c21-right c21-close c21-button-clean" (click)="onBack()">
-            <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('themeColor') }" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+        <button type="button"
+            class="c21-header-button c21-right c21-close c21-button-clean"
+            [attr.aria-label]="translationMap?.get('CLOSE')"
+            (click)="onBack()">
+            <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('themeColor') }" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" 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">{{ translationMap?.get('CLOSE') }}</title>
             </svg>
         </button>
     </div>
     <div class="content">
-        <div class="text">{{ translationMap?.get('CONFIRM_CLOSE_CHAT') }}</div>
+        <h2 id="confirm-close-title" class="text">{{ translationMap?.get('CONFIRM_CLOSE_CHAT') }}</h2>
         <div class="options">
 
             <!-- BUTTON CANCEL-->
-            <span class="v-align-center c21-label-button back-button" [class.disabled]="isLoadingActive" (click)="onBack()">
+            <button type="button"
+                class="c21-button-clean v-align-center c21-label-button back-button"
+                [class.disabled]="isLoadingActive"
+                [attr.disabled]="isLoadingActive ? true : null"
+                (click)="onBack()">
                 {{translationMap?.get('BACK')}}
-            </span> 
+            </button>
 
             <!-- BUTTON CLOSE-->
-            <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="onConfirm()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
+            <button type="button" aflistconv #aflistconv class="c21-button-primary" (click)="onConfirm()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
                 <span *ngIf="isLoadingActive" class="spinner-container">
                     <svg xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25" height="25" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }"
                         viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">

package/src/app/modals/confirm-close/confirm-close.component.scss

@@ -16,6 +16,9 @@
     gap: 15px;
     .text{
         max-width: calc(100% - 30px);
+        margin: 0;
+        font-size: 1em;
+        font-weight: 500;
     }
     .options{
         display: flex;

package/src/app/modals/confirm-close/confirm-close.component.spec.ts

@@ -1,4 +1,8 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { A11yModule } from '@angular/cdk/a11y';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
 import { ConfirmCloseComponent } from './confirm-close.component';
 
@@ -6,12 +10,17 @@ describe('ConfirmCloseComponent', () => {
   let component: ConfirmCloseComponent;
   let fixture: ComponentFixture<ConfirmCloseComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
+  beforeEach(waitForAsync(() => {
+    const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+    LoggerInstance.setInstance(new CustomLogger(ngxlogger));
+    TestBed.configureTestingModule({
+      imports: [A11yModule],
       declarations: [ ConfirmCloseComponent ]
     })
-    .compileComponents();
+      .compileComponents();
+  }));
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(ConfirmCloseComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();