npm - @chat21/chat21-web-widget - Versions diffs - 5.1.32-rc9 → 5.1.33-rc11 - Mend

@chat21/chat21-web-widget 5.1.32-rc9 → 5.1.33-rc11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (246) hide show

package/src/app/component/message/image/image.component.ts CHANGED Viewed

@@ -42,60 +42,99 @@ export class ImageComponent implements OnInit {
     // this.onClickImage()
   }
+  /**
+   * Opens the image in an accessible lightbox.
+   *
+   * Accessibility features (WCAG 2.1.1, 2.1.2, 2.4.3, 4.1.2):
+   * - Lightbox container is rendered as role="dialog" aria-modal="true" with aria-label.
+   * - A real <button> with aria-label closes the dialog.
+   * - The dialog can be dismissed via Escape, click on the backdrop, or the close button.
+   * - The previously focused element is restored when the lightbox closes.
+   * - Focus is moved to the close button on open to keep keyboard users inside the dialog.
+   */
   onClickImage(){
-    const that = this;
-    var ifrm = document.createElement("iframe");
-    ifrm.setAttribute("frameborder", "0");
-    // ifrm.setAttribute("border", "0");
-    ifrm.setAttribute('id','tiledesk-image-preview');
-    ifrm.setAttribute('tiledesk_context','parent');
-    ifrm.setAttribute('style', 'width: 100%; height: 100%; position: absolute; z-index: 2147483003;')
-    var iframeContent = '<head>'
-    iframeContent += '<style> .tiledesk-popup {position: absolute; inset: 1px; outline-offset: -5px; background-color: rgba(0, 0, 0, 0.35); border-radius:16px; will-change: opacity;}'
-    iframeContent +=    '.tiledesk-popup-content { position: fixed; inset: 0px; width: 100%;  height: 100%; display: flex;  justify-content: center; align-items: center; outline: 0px;}'
-    iframeContent +=    '.tiledesk-popup-button { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; position: absolute; top: 0px; right: 0px; background-color: transparent; border: none; cursor: pointer; margin: 9px; padding: 0px; }'
-    iframeContent +=    '.tiledesk-popup-image { max-height: 80vh; max-width: 80vw; }'
-    iframeContent += '</style>'
-    iframeContent += '</head>';
-    iframeContent += '<body>'
-    iframeContent +=  '<div class="frame-root" id="frame-root">'
-    iframeContent +=    '<div class="frame-content">'
-    iframeContent +=      '<div class="tiledesk-popup" style="opacity: 1;"></div>'
-    iframeContent +=      '<div role="button" tabindex="-1" class="tiledesk-popup-content">'
-    // iframeContent +=         '<button id="button" type="button" data-testid="closeButton" class="tiledesk-popup-button">'
-    // iframeContent +=           '<svg id="ic_close" fill="#000000" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><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 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>'
-    // iframeContent +=         '</button>'
-    iframeContent +=         '<a href="'+this.metadata.src+'" data-testid="popupImage-wrapper" class="tidio-popup-vgwcqv" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">'
-    iframeContent +=           '<img src="'+this.metadata.src+'" class="tiledesk-popup-image" id="image-popup">'
-    iframeContent +=         '</a>'
-    iframeContent +=      '</div>'
-    iframeContent +=   '</div>'
-    iframeContent +='</body>'
-    // ifrm.src = 'data:text/html;charset=utf-8,' + encodeURI(iframeContent);
-    ifrm.srcdoc = iframeContent
-    window.document.body.appendChild(ifrm)
-    ifrm.onload = function(ev) {
-      var iframe = window.document.getElementById('tiledesk-image-preview')
-      // var button = ifrm.contentWindow.document.getElementById("button");
-      // button.addEventListener("click", function(event){
-      //   window.document.body.removeChild(iframe)
-      // });
-      var div = ifrm.contentWindow.document.getElementById('frame-root')
-      div.addEventListener("click", function(event){
-        window.document.body.removeChild(iframe)
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+    const altText = this.metadata?.name || 'Image preview';
+    const closeLabel = this.tooltipMessage || 'Close';
+    const ifrm = document.createElement('iframe');
+    ifrm.setAttribute('frameborder', '0');
+    ifrm.setAttribute('id', 'tiledesk-image-preview');
+    ifrm.setAttribute('tiledesk_context', 'parent');
+    ifrm.setAttribute('title', altText);
+    ifrm.setAttribute('aria-label', altText);
+    ifrm.setAttribute('style', 'width: 100%; height: 100%; position: absolute; z-index: 2147483003; border: 0;');
+    let iframeContent = '<!doctype html><html lang="' + (document.documentElement.lang || 'en') + '"><head>';
+    iframeContent += '<meta charset="utf-8"/>';
+    iframeContent += '<title>' + altText.replace(/[<>]/g, '') + '</title>';
+    iframeContent += '<style>';
+    iframeContent += 'html,body{margin:0;padding:0;height:100%;}';
+    iframeContent += '.tiledesk-popup-backdrop{position:fixed;inset:0;background-color:rgba(0,0,0,0.6);}';
+    iframeContent += '.tiledesk-popup-content{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;padding:32px;}';
+    iframeContent += '.tiledesk-popup-image{max-height:85vh;max-width:90vw;border-radius:8px;}';
+    iframeContent += '.tiledesk-popup-button{position:fixed;top:16px;right:16px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,0.95);border:1px solid rgba(0,0,0,0.1);border-radius:50%;cursor:pointer;padding:0;}';
+    iframeContent += '.tiledesk-popup-button:focus-visible{outline:3px solid #1a73e8;outline-offset:2px;}';
+    iframeContent += '.tiledesk-popup-button svg{width:20px;height:20px;fill:#000;}';
+    iframeContent += '@media (prefers-reduced-motion: reduce){.tiledesk-popup-backdrop{transition:none;}}';
+    iframeContent += '</style></head><body>';
+    iframeContent += '<div role="dialog" aria-modal="true" aria-label="' + altText.replace(/"/g, '&quot;') + '" id="frame-root">';
+    iframeContent += '<div class="tiledesk-popup-backdrop" id="popup-backdrop"></div>';
+    iframeContent += '<div class="tiledesk-popup-content">';
+    iframeContent += '<img src="' + this.metadata.src + '" class="tiledesk-popup-image" id="image-popup" alt="' + altText.replace(/"/g, '&quot;') + '">';
+    iframeContent += '</div>';
+    iframeContent += '<button type="button" id="closeButton" class="tiledesk-popup-button" aria-label="' + closeLabel.replace(/"/g, '&quot;') + '">';
+    iframeContent += '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><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 12z"/></svg>';
+    iframeContent += '</button>';
+    iframeContent += '</div>';
+    iframeContent += '</body></html>';
+    ifrm.srcdoc = iframeContent;
+    window.document.body.appendChild(ifrm);
+    const closeLightbox = () => {
+      const node = window.document.getElementById('tiledesk-image-preview');
+      if (node && node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+      if (previouslyFocused && typeof previouslyFocused.focus === 'function') {
+        try { previouslyFocused.focus(); } catch(e) { /* noop */ }
+      }
+    };
+    ifrm.onload = function () {
+      const doc = ifrm.contentWindow?.document;
+      if (!doc) { return; }
+      const closeBtn = doc.getElementById('closeButton') as HTMLButtonElement | null;
+      const backdrop = doc.getElementById('popup-backdrop');
+      const image = doc.getElementById('image-popup');
+      if (closeBtn) {
+        closeBtn.addEventListener('click', (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          closeLightbox();
+        });
+        closeBtn.focus();
+      }
+      if (backdrop) {
+        backdrop.addEventListener('click', () => closeLightbox());
+      }
+      if (image) {
+        image.addEventListener('click', (e) => e.stopPropagation());
+      }
+      // Escape key handler from inside the lightbox iframe
+      doc.addEventListener('keydown', (event: KeyboardEvent) => {
+        if (event.key === 'Escape' || event.keyCode === 27) {
+          event.preventDefault();
+          closeLightbox();
+        }
       });
-      // var image = ifrm.contentWindow.document.getElementById('image-popup')
-      // image.addEventListener("click", function(event){
-      //   event.preventDefault();
-      //   event.stopPropagation();
-      //   that.downloadImage(that.metadata.src, that.metadata.name)
-      // });
     };
   }

package/src/app/component/message/info-message/info-message.component.spec.ts CHANGED Viewed

@@ -1,36 +1,48 @@
-import { CustomLogger } from './../../../../chat21-core/providers/logger/customLogger';
-import { LoggerInstance } from './../../../../chat21-core/providers/logger/loggerInstance';
-import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MarkedPipe } from '../../../pipe/marked.pipe';
-import { InfoMessageComponent } from './info-message.component';
+import { MessageModel } from 'src/chat21-core/models/message';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 import { NGXLogger } from 'ngx-logger';
+import { TooltipDirective } from '../../../directives/tooltip.directive';
+import { DateAgoPipe } from '../../../pipe/date-ago.pipe';
+import { MarkedPipe } from '../../../pipe/marked.pipe';
+import { InfoMessageComponent } from './info-message.component';
 describe('InfoMessageComponent', () => {
   let component: InfoMessageComponent;
   let fixture: ComponentFixture<InfoMessageComponent>;
-  let ngxlogger: NGXLogger;
-  let customLogger = new CustomLogger(ngxlogger)
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+  const customLogger = new CustomLogger(ngxlogger);
   beforeEach(waitForAsync(() => {
+    LoggerInstance.setInstance(customLogger);
     TestBed.configureTestingModule({
-      declarations: [ InfoMessageComponent, MarkedPipe ],
-      providers: [LoggerService, NGXLogger]
-    })
-    .compileComponents();
+      declarations: [InfoMessageComponent, MarkedPipe, DateAgoPipe, TooltipDirective],
+    }).compileComponents();
   }));
   beforeEach(() => {
     fixture = TestBed.createComponent(InfoMessageComponent);
     component = fixture.componentInstance;
-    LoggerInstance.setInstance(customLogger)
-    let logger = LoggerInstance.getInstance()
-    component['logger']= logger
+    component.message = { text: 'hello', timestamp: Date.now() } as MessageModel;
     fixture.detectChanges();
   });
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+  it('ngOnInit should replace br tags with newlines in message text', () => {
+    const msg = { text: 'a<br/>b<br>c', timestamp: Date.now() } as MessageModel;
+    component.message = { ...msg };
+    component.ngOnInit();
+    expect(component.message.text).toContain('\n');
+    expect(component.message.text).not.toContain('<br');
+  });
+  it('ngOnInit should tolerate missing message', () => {
+    component.message = undefined as any;
+    expect(() => component.ngOnInit()).not.toThrow();
+  });
 });

package/src/app/component/message/json-sources/json-sources.component.html ADDED Viewed

@@ -0,0 +1,38 @@
+<div class="sources-panel" *ngIf="items && items.length > 0">
+  <div class="sources-header">
+    <div class="sources-favicons">
+      <img class="header-favicon"
+           *ngFor="let item of headerFavicons; trackBy: trackByLink"
+           [src]="getFavicon(item)"
+           alt=""
+           loading="lazy" />
+    </div>
+    <span class="sources-count">{{ items.length }} {{ items.length === 1 ? 'sito' : 'siti' }}</span>
+  </div>
+  <a class="source-row"
+     *ngFor="let item of visibleItems; trackBy: trackByLink"
+     [href]="item.link"
+     target="_blank"
+     rel="noopener noreferrer">
+    <div class="source-row__left">
+      <div class="source-row__title">{{ item.title }}</div>
+      <div class="source-row__desc" *ngIf="item.description">{{ item.description }}</div>
+      <div class="source-row__meta">
+        <img class="source-row__favicon" *ngIf="getFavicon(item)" [src]="getFavicon(item)" alt="" loading="lazy" />
+        <span class="source-row__host">{{ getHostname(item) }}</span>
+      </div>
+    </div>
+    <div class="source-row__thumb" *ngIf="item.image">
+      <img [src]="item.image" alt="" loading="lazy" (error)="$event.target.closest('.source-row__thumb').remove()" />
+    </div>
+  </a>
+  <button class="show-all" *ngIf="canExpand" type="button" (click)="toggleShowAll()">
+    {{ showAll ? 'Mostra meno' : 'Mostra tutto' }}
+  </button>
+</div>

package/src/app/component/message/json-sources/json-sources.component.scss ADDED Viewed

@@ -0,0 +1,201 @@
+:host {
+  --panel-bck: #ffffff; // #f7f8fa;
+  --row-sep: rgba(66, 133, 244, 0.18);
+  --text: rgba(0, 0, 0, 0.90);
+  --muted: rgba(0, 0, 0, 0.62);
+  --accent: #1a73e8;
+  --pill-bck: #eaebf1;
+  font-family: "Google Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  --title-line-height: 1.4;
+  --title-font-size: 14px;
+  --desc-line-height: 1.3;
+  --desc-font-size: 12px;
+  display: block;
+  width: 100%;
+  max-width: 652px;
+}
+.sources-header {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 4px 8px 4px;
+  border-bottom: 1px solid var(--row-sep);
+}
+.sources-favicons {
+  display: flex;
+  align-items: center;
+}
+.header-favicon {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  background: rgba(255, 255, 255, 0.7);
+  object-fit: cover;
+  & + & {
+    margin-left: -2px;
+  }
+}
+.sources-count {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--muted);
+}
+.sources-panel {
+  display: flex;
+  flex-direction: column;
+  padding: 18px 12px 10px 12px;
+  background: var(--panel-bck);
+  border-radius: 18px;
+  font-size: 14px;
+  width: 100%;
+  max-width: 652px;
+  box-sizing: border-box;
+}
+.source-row {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 14px;
+  text-decoration: none;
+  color: inherit;
+  padding: 10px 10px;
+  border-radius: 12px;
+  transition: background 140ms ease;
+  font-family: 'Google Sans', Arial, sans-serif;
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--row-sep);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  &:hover {
+    background: rgba(255, 255, 255, 0.55);
+    .source-row__title {
+      text-decoration: underline;
+    }
+  }
+  // & + & {
+  //   border-top: 1px solid var(--row-sep);
+  //   border-top-left-radius: 0;
+  //   border-top-right-radius: 0;
+  // }
+  .source-row__left {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex: 1 1 auto;
+  }
+  .source-row__title {
+    font-weight: 500;
+    color: var(--text);
+    font-size: var(--title-font-size);
+    line-height: var(--title-line-height);
+    margin: 0px;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+  }
+  .source-row__desc {
+    font-size: var(--desc-font-size);
+    line-height: var(--desc-line-height);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    color: #56595e;
+    margin: 0;
+  }
+  .source-row__meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: auto;
+    padding-top: 2px;
+  }
+  .source-row__favicon {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    flex: 0 0 auto;
+    border: 2px solid #fff;
+    background: rgba(255, 255, 255, 0.7);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+  }
+  .source-row__host {
+    color: rgba(0, 0, 0, 0.55);
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+  .source-row__thumb {
+    width: 56px;
+    height: 56px;
+    border-radius: 10px;
+    overflow: hidden;
+    flex: 0 0 auto;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    background: rgba(255, 255, 255, 0.65);
+    align-self: flex-start;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .source-row__thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+.show-all {
+  margin-top: 10px;
+  border: 0;
+  background: var(--pill-bck);
+  color: rgba(0, 0, 0, 0.78);
+  font-weight: 500;
+  padding: 10px 12px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: filter 140ms ease, transform 140ms ease;
+}
+.show-all:hover {
+  filter: brightness(0.98);
+  transform: translateY(-1px);
+}

package/src/app/component/message/json-sources/json-sources.component.ts ADDED Viewed

@@ -0,0 +1,89 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { getTopLevelDomainFromUrl } from 'src/app/utils/url-utils';
+export type JsonSourceItem = {
+  title?: string;
+  link?: string;
+  description?: string;
+  favicon?: string;
+  favicon_hd?: string;
+  image?: string;
+};
+@Component({
+  selector: 'chat-json-sources',
+  templateUrl: './json-sources.component.html',
+  styleUrls: ['./json-sources.component.scss']
+})
+export class JsonSourcesComponent {
+  @Input() items: JsonSourceItem[] = [];
+  @Input() themeColor?: string;
+  @Input() limit = 3;
+  @Output() onElementRendered = new EventEmitter<{ element: string; status: boolean }>();
+  showAll = false;
+  trackByLink = (_: number, item: JsonSourceItem) => item?.link || item?.title || _;
+  ngAfterViewInit() {
+    this.onElementRendered.emit({ element: 'json_sources', status: true });
+  }
+  getFavicon(item: JsonSourceItem): string | null {
+    const domain = getTopLevelDomainFromUrl(item?.link || '');
+    if (!domain) return null;
+    const explicit = (item?.favicon_hd || item?.favicon || '').trim();
+    if (explicit) {
+      try {
+        const faviconDomain = getTopLevelDomainFromUrl(explicit);
+        return faviconDomain ? explicit.replace(new URL(explicit).hostname, faviconDomain) : explicit;
+      } catch {
+        return explicit;
+      }
+    }
+    return `https://favicon.im/${domain}`;
+    //return `https://${domain}/favicon.ico`;
+  }
+  getHostname(item: JsonSourceItem): string {
+    const hostname = this.safeHostname(item?.link || '');
+    return hostname || '';
+  }
+  private safeHostname(url: string): string {
+    try {
+      return new URL(url).hostname.replace(/^www\./, '');
+    } catch {
+      return '';
+    }
+  }
+  get visibleItems(): JsonSourceItem[] {
+    if (!this.items) return [];
+    const normalizedLimit = Math.max(1, this.limit || 1);
+    return this.showAll ? this.items : this.items.slice(0, normalizedLimit);
+  }
+  get headerFavicons(): JsonSourceItem[] {
+    const seen = new Set<string>();
+    return (this.items || []).reduce<JsonSourceItem[]>((acc, item) => {
+      const url = this.getFavicon(item);
+      if (url && !seen.has(url)) {
+        seen.add(url);
+        acc.push(item);
+      }
+      return acc;
+    }, []).slice(0, 3);
+  }
+  get canExpand(): boolean {
+    const normalizedLimit = Math.max(1, this.limit || 1);
+    return (this.items?.length || 0) > normalizedLimit;
+  }
+  toggleShowAll() {
+    this.showAll = !this.showAll;
+  }
+}

package/src/app/component/message/like-unlike/like-unlike.component.html CHANGED Viewed

@@ -1,21 +1,19 @@
 <div class="like-container">
     <div class="menu">
         <!-- LIKE -->
-        <button class="c21-button-clean c21-like" (click)="onClick('like')">
-            <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                width="24" height="24" viewBox="0 0 24 24" xml:space="preserve">
+        <button type="button" class="c21-button-clean c21-like" (click)="onClick('like')" aria-label="Like message">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                width="24" height="24" viewBox="0 0 24 24" xml:space="preserve" aria-hidden="true" focusable="false">
                 <path fill="black" d="M4.5,9h-3C0.7,9,0,9.6,0,10.4v10.4c0,0.8,0.7,1.5,1.5,1.5h3c0.8,0,1.5-0.7,1.5-1.5V10.5C6,9.7,5.3,9,4.5,9z"/>
                 <path fill="black" d="M24,10.5c-0.1-1.7-1.6-3-3.3-3h-4.5c0,0,0,0,0,0c0.4-1.2,0.7-2.2,0.7-2.7c0-1.6-1.2-3.2-3.3-3.2  c-2.2,0-2.8,1.5-3.3,2.7C8.8,8,7.5,7.4,7.5,8.6c0,0.6,0.5,1.1,1.1,1.1c0.2,0,0.5-0.1,0.7-0.2c3.6-2.9,2.7-5.8,4.3-5.8  c0.8,0,1,0.6,1,1c0,0.3-0.4,1.9-1.2,3.4c-0.1,0.2-0.1,0.4-0.1,0.5c0,0.7,0.5,1.1,1.1,1.1h6.5c0.5,0,0.9,0.4,0.9,0.9  c0,0.5-0.4,0.8-0.8,0.9c-0.6,0-1,0.5-1,1.1c0,0.7,0.5,0.7,0.5,1.4c0,1.2-1.6,0.6-1.6,2c0,0.5,0.3,0.6,0.3,1c0,1.1-1.4,0.6-1.4,1.9  c0,0.1,0,0.2,0,0.2c0.1,0.6-0.3,1.1-0.9,1.1l-2.4,0c-1.2,0-2.4-0.4-3.4-1.1l-1.7-1.3c-0.2-0.2-0.4-0.2-0.7-0.2  c-0.6,0-1.1,0.5-1.1,1.1c0,0.3,0.2,0.7,0.4,0.9l1.7,1.3c1.4,1,3,1.6,4.7,1.6h2.5c1.7,0,3-1.3,3.1-2.9c0,0,0,0,0,0  c0.8-0.6,1.3-1.5,1.3-2.6c0-0.1,0-0.3,0-0.4c0.8-0.6,1.4-1.5,1.4-2.6c0-0.2,0-0.5-0.1-0.7C23.5,12.6,24.1,11.6,24,10.5z"/>
-                <title id="altIconTitle">LIKE</title>
-            </svg>
+            </svg>
         </button>
         <!-- UNLIKE -->
-        <button class="c21-button-clean" (click)="onClick('like')">
-            <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                width="24" height="24" viewBox="0 0 24 24" xml:space="preserve">
+        <button type="button" class="c21-button-clean" (click)="onClick('unlike')" aria-label="Unlike message">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                width="24" height="24" viewBox="0 0 24 24" xml:space="preserve" aria-hidden="true" focusable="false">
                 <path d="M6,13.5V3c0-0.8-0.7-1.5-1.5-1.5h-3C0.7,1.5,0,2.2,0,3v10.5c0,0.8,0.7,1.5,1.5,1.5h3C5.3,15,6,14.3,6,13.5z"/>
                 <path d="M22.6,10.7c0.1-0.2,0.1-0.5,0.1-0.7c0-1.1-0.5-2-1.4-2.6c0-0.1,0-0.3,0-0.4c0-1-0.5-2-1.4-2.6c-0.1-1.6-1.5-2.9-3.1-2.9  h-2.5c-1.7,0-3.4,0.6-4.7,1.6L8,4.4C7.7,4.6,7.5,4.9,7.5,5.3c0,0.6,0.5,1.1,1.1,1.1c0.2,0,0.5-0.1,0.7-0.2L11,4.9  c1-0.7,2.2-1.1,3.4-1.1h2.5c0.5,0,0.9,0.4,0.9,0.9c0,0.2-0.1,0.2-0.1,0.4c0,1.3,1.4,0.8,1.4,1.9c0,0.4-0.3,0.5-0.3,1  c0,0.7,0.5,1,0.9,1.1c0.4,0.1,0.7,0.4,0.7,0.9c0,0.6-0.5,0.6-0.5,1.4c0,0.6,0.5,1.1,1,1.1c0.5,0,0.8,0.4,0.8,0.8  c0,0.5-0.4,0.9-0.9,0.9h-6.5c-0.6,0-1.1,0.5-1.1,1.1c0,0.2,0,0.4,0.1,0.5c0.8,1.6,1.2,3.1,1.2,3.4c0,0.4-0.3,1-1,1  c-0.6,0-0.7,0-1.2-1.3c-1.2-2.9-2.9-4.7-3.8-4.7c-0.6,0-1.1,0.5-1.1,1.1c0,0.3,0.1,0.7,0.4,0.9c3.2,2.6,2,6.2,5.7,6.2  c2.1,0,3.3-1.6,3.3-3.2c0-0.6-0.2-1.7-0.7-2.8h4.7c1.7,0,3.1-1.4,3.1-3.2C24,12.3,23.4,11.3,22.6,10.7z"/>
-                <title id="altIconTitle">UNLIKE</title>
             </svg>
         </button>
     </div>

package/src/app/component/message/like-unlike/like-unlike.component.spec.ts CHANGED Viewed

@@ -1,16 +1,22 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
+import { NGXLogger } from 'ngx-logger';
 import { LikeUnlikeComponent } from './like-unlike.component';
 describe('LikeUnlikeComponent', () => {
   let component: LikeUnlikeComponent;
   let fixture: ComponentFixture<LikeUnlikeComponent>;
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+  const customLogger = new CustomLogger(ngxlogger);
   beforeEach(async () => {
+    LoggerInstance.setInstance(customLogger);
     await TestBed.configureTestingModule({
-      declarations: [ LikeUnlikeComponent ]
-    })
-    .compileComponents();
+      declarations: [LikeUnlikeComponent],
+    }).compileComponents();
   });
   beforeEach(() => {
@@ -22,4 +28,26 @@ describe('LikeUnlikeComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+  it('onClick should log icon id', () => {
+    spyOn((component as any).logger, 'debug');
+    component.onClick('like');
+    expect((component as any).logger.debug).toHaveBeenCalledWith('[LIKE-UNLIKE] onClick-->', 'like');
+  });
+  it('like button should have accessible name', () => {
+    const btn = fixture.debugElement.queryAll(By.css('button'))[0];
+    expect(btn.nativeElement.getAttribute('aria-label')).toBe('Like message');
+  });
+  it('unlike button should have accessible name', () => {
+    const btn = fixture.debugElement.queryAll(By.css('button'))[1];
+    expect(btn.nativeElement.getAttribute('aria-label')).toBe('Unlike message');
+  });
+  it('clicking like should invoke logger', () => {
+    spyOn((component as any).logger, 'debug');
+    fixture.debugElement.queryAll(By.css('button'))[0].triggerEventHandler('click', {});
+    expect((component as any).logger.debug).toHaveBeenCalledWith('[LIKE-UNLIKE] onClick-->', 'like');
+  });
 });