@chat21/chat21-web-widget 5.1.34 → 5.2.1

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();

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChange, SimpleChanges, ViewChild, OnDestroy } from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, SimpleChange, SimpleChanges, ViewChild, OnDestroy } from '@angular/core';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
@@ -25,6 +25,13 @@ export class ConfirmCloseComponent implements OnInit{
     // this.dialog.showModal();
   }
 
+  @HostListener('keydown.escape', ['$event'])
+  onEscape(event: KeyboardEvent){
+    event.preventDefault();
+    event.stopPropagation();
+    this.onBack();
+  }
+
   ngOnChanges(changes: SimpleChanges){
     if(changes && 
       changes['conversationId'] && 

package/src/app/pipe/html-entites-encode.pipe.spec.ts

@@ -1,8 +1,41 @@
 import { HtmlEntitiesEncodePipe } from './html-entities-encode.pipe';
 
 describe('HtmlEntitiesEncodePipe', () => {
-  it('create an instance', () => {
-    const pipe = new HtmlEntitiesEncodePipe();
+  let pipe: HtmlEntitiesEncodePipe;
+
+  beforeEach(() => {
+    pipe = new HtmlEntitiesEncodePipe();
+  });
+
+  it('should create', () => {
     expect(pipe).toBeTruthy();
   });
+
+  it('should encode angle brackets so raw HTML tags are not preserved (XSS mitigation)', () => {
+    const malicious = '<script>alert(1)</script><img src=x onerror=alert(1)>';
+    const out = pipe.transform(malicious);
+    expect(out).not.toContain('<script');
+    expect(out).not.toContain('<img');
+    expect(out).toContain('&lt;');
+    expect(out).toContain('&gt;');
+  });
+
+  it('should encode double quotes for attribute injection contexts', () => {
+    expect(pipe.transform('say "hello"')).toContain('&quot;');
+  });
+
+  it('should replace newlines with <br> via replaceEndOfLine', () => {
+    const out = pipe.transform('line1\nline2');
+    expect(out).toContain('<br>');
+    expect(out).toContain('line1');
+    expect(out).toContain('line2');
+  });
+
+  it('should trim leading and trailing whitespace', () => {
+    expect(pipe.transform('  abc  ')).toBe('abc');
+  });
+
+  it('should coerce non-string input to string before encoding', () => {
+    expect(pipe.transform(123 as any)).toBe('123');
+  });
 });

package/src/app/pipe/marked.pipe.spec.ts

@@ -1,8 +1,44 @@
 import { MarkedPipe } from './marked.pipe';
 
 describe('MarkedPipe', () => {
-  it('create an instance', () => {
-    const pipe = new MarkedPipe();
+  let pipe: MarkedPipe;
+
+  beforeEach(() => {
+    pipe = new MarkedPipe();
+  });
+
+  it('should create', () => {
     expect(pipe).toBeTruthy();
   });
+
+  it('should render markdown bold as HTML strong', () => {
+    const html = pipe.transform('Hello **world**') as string;
+    expect(html).toMatch(/<strong>world<\/strong>|<b>world<\/b>/);
+  });
+
+  it('should not leave raw script tags in output (HTML tokens escaped)', () => {
+    const html = pipe.transform('<script>alert(1)</script>') as string;
+    expect(html.toLowerCase()).not.toContain('<script>');
+    expect(html).toContain('&lt;');
+  });
+
+  it('should not emit javascript: links as clickable href', () => {
+    const html = pipe.transform('[clickme](javascript:alert(1))') as string;
+    expect(html).not.toMatch(/href=["']javascript:/i);
+  });
+
+  it('should add rel noopener on http links', () => {
+    const html = pipe.transform('[x](https://example.com)') as string;
+    expect(html).toContain('rel="noopener noreferrer"');
+    expect(html).toContain('target="_blank"');
+  });
+
+  it('should treat escaped newlines as real newlines (GFM breaks)', () => {
+    const html = pipe.transform('a\\nb') as string;
+    expect(html).toMatch(/<br\s*\/?>/i);
+  });
+
+  it('should coerce null to empty string', () => {
+    expect(pipe.transform(null)).toBe('');
+  });
 });

package/src/app/pipe/marked.pipe.ts

@@ -5,61 +5,71 @@ import { marked, Tokens } from 'marked';
   name: 'marked'
 })
 export class MarkedPipe implements PipeTransform {
+  private static renderer: any = null;
 
-  transform(value: any): string {
+  private static getRenderer(): any {
+    if (!MarkedPipe.renderer) {
+      const renderer = new marked.Renderer();
 
-    const input =
-      typeof value === 'string'
-        ? value
-        : (value === null || value === undefined) ? '' : String(value);
+      /* --------------------------------------------------
+         🔐 1. NON renderizzare HTML raw
+      -------------------------------------------------- */
+      renderer.html = function(token: Tokens.HTML | Tokens.Tag): string {
+        const html = 'text' in token ? token.text : '';
 
-    const inputWithNewlines = input.replace(/\\n/g, '\n');
+        return html
+          .replace(/&/g, '&')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;');
+      };
+
+      /* --------------------------------------------------
+         🔐 2. Link sicuri
+      -------------------------------------------------- */
+      const originalLinkRenderer = renderer.link.bind(renderer);
+
+      const dangerousProtocols = [
+        /^javascript:/i,
+        /^data:/i,
+        /^vbscript:/i
+      ];
 
-    const renderer = new marked.Renderer();
+      renderer.link = function({ href, title, tokens }: any) {
 
-    /* --------------------------------------------------
-       🔐 1. NON renderizzare HTML raw
-    -------------------------------------------------- */
-    renderer.html = function(token: Tokens.HTML | Tokens.Tag): string {
-      const html = 'text' in token ? token.text : '';
+        const normalized = (href || '').trim();
 
-      return html
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-    };
+        const isDangerous = dangerousProtocols.some(pattern =>
+          pattern.test(normalized)
+        );
 
-    /* --------------------------------------------------
-       🔐 2. Link sicuri
-    -------------------------------------------------- */
-    const originalLinkRenderer = renderer.link.bind(renderer);
+        if (isDangerous) {
+          return tokens ? tokens.map((t: any) => t.raw).join('') : href || '';
+        }
 
-    const dangerousProtocols = [
-      /^javascript:/i,
-      /^data:/i,
-      /^vbscript:/i
-    ];
+        const html = originalLinkRenderer({ href, title, tokens });
 
-    renderer.link = function({ href, title, tokens }) {
+        // aggiunge sicurezza ai link
+        return html.replace(
+          '<a ',
+          '<a target="_blank" rel="noopener noreferrer" '
+        );
+      };
 
-      const normalized = (href || '').trim();
+      MarkedPipe.renderer = renderer;
+    }
+    return MarkedPipe.renderer;
+  }
 
-      const isDangerous = dangerousProtocols.some(pattern =>
-        pattern.test(normalized)
-      );
+  transform(value: any): string {
 
-      if (isDangerous) {
-        return tokens ? tokens.map(t => t.raw).join('') : href || '';
-      }
+    const input =
+      typeof value === 'string'
+        ? value
+        : (value === null || value === undefined) ? '' : String(value);
 
-      const html = originalLinkRenderer({ href, title, tokens });
+    const inputWithNewlines = input.replace(/\\n/g, '\n');
 
-      // aggiunge sicurezza ai link
-      return html.replace(
-        '<a ',
-        '<a target="_blank" rel="noopener noreferrer" '
-      );
-    };
+    const renderer = MarkedPipe.getRenderer();
 
     marked.setOptions({
       renderer,

package/src/app/providers/app-config.service.ts

@@ -40,8 +40,10 @@ export class AppConfigService {
     }
     // END GET BASE URL and create absolute url of remoteConfigUrl //
     const that = this;
-    return this.http.get(urlConfigFile).toPromise().then(data => {
-      that.appConfig = data;
+    return this.http.get(urlConfigFile).toPromise().then((data: any) => {
+      if (data) {
+        that.appConfig = data;
+      }
       }).catch(err => {
         console.error('error loadAppConfig', err);
       });