From aaa166593e8fb2a2f082808934a0ad95c890d639 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Wed, 27 Apr 2022 18:59:29 +0200
Subject: [PATCH] [DSC-516] Fix accessibility issues

---
 .../truncatable-part.component.html              | 16 +++++++---------
 .../truncatable-part.component.scss              | 15 ++++++---------
 .../truncatable-part.component.spec.ts           |  4 ++--
 .../truncatable-part.component.ts                | 11 +++++------
 4 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
index 34227e2583..cb9f529f99 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
@@ -1,11 +1,9 @@
 <div class="clamp-{{background}}-{{lines}} min-{{minLines}} {{type}} {{fixedHeight ? 'fixedHeight' : ''}}">
-    <div class="content dont-break-out" id="dontBreakContent">
-        <ng-content></ng-content>
-    </div>
-    <label for="dontBreakContent" role="button" id="expandButton">
-        <a dsDragClick (actualClick)="toggle()">
-            <i class="fas fa-angle-down"></i> {{ 'item.truncatable-part.show-more' | translate }}</a>
-    </label>
-    <a id="collapseButton" dsDragClick (actualClick)="toggle()" *ngIf="expand && expandable">
-        <i class="fas fa-angle-up"></i> {{ 'item.truncatable-part.show-less' | translate }}</a>
+  <div class="content dont-break-out">
+    <ng-content></ng-content>
+  </div>
+  <button class="btn btn-link p-0 expandButton" dsDragClick (actualClick)="toggle()">
+    <i class="fas fa-angle-down"></i> {{ 'item.truncatable-part.show-more' | translate }}</button>
+  <button class="btn btn-link p-0 collapseButton" dsDragClick (actualClick)="toggle()" *ngIf="expand && expandable">
+    <i class="fas fa-angle-up"></i> {{ 'item.truncatable-part.show-less' | translate }}</button>
 </div>
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
index 7a1f31f578..f67d343cd6 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
@@ -1,10 +1,7 @@
-#dontBreakContent:not(.truncated) ~ label{
-    display: none;
-  }
+.content:not(.truncated) ~ button.expandButton {
+  display: none;
+}
 
-a {
-    color: #207698 !important;
-    text-decoration: none !important;
-    background-color: transparent !important;
-    cursor: pointer;
-}
\ No newline at end of file
+.btn:focus {
+  box-shadow: none !important;
+}
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.spec.ts b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.spec.ts
index 09d603e6b7..08d3e18117 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.spec.ts
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.spec.ts
@@ -70,7 +70,7 @@ describe('TruncatablePartComponent', () => {
     });
 
     it('collapseButton should be hidden', () => {
-      const a = fixture.debugElement.query(By.css('#collapseButton'));
+      const a = fixture.debugElement.query(By.css('.collapseButton'));
       expect(a).toBeNull();
     });
   });
@@ -98,7 +98,7 @@ describe('TruncatablePartComponent', () => {
       (comp as any).setLines();
       (comp as any).expandable = true;
       fixture.detectChanges();
-      const a = fixture.debugElement.query(By.css('#collapseButton'));
+      const a = fixture.debugElement.query(By.css('.collapseButton'));
       expect(a).not.toBeNull();
     });
   });
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
index 7fe36e950a..0bfcf25d39 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject, Input, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { AfterContentChecked, Component, Inject, Input, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
 import { TruncatableService } from '../truncatable.service';
 import { hasValue } from '../../empty.util';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
@@ -14,7 +14,7 @@ import { NativeWindowRef, NativeWindowService } from '../../../core/services/win
  * Component that truncates/clamps a piece of text
  * It needs a TruncatableComponent parent to identify it's current state
  */
-export class TruncatablePartComponent implements OnInit, OnDestroy {
+export class TruncatablePartComponent implements AfterContentChecked, OnInit, OnDestroy {
   /**
    * Number of lines shown when the part is collapsed
    */
@@ -116,10 +116,9 @@ export class TruncatablePartComponent implements OnInit, OnDestroy {
    * Function to get data to be observed
    */
   toObserve() {
-    this.observedContent = this.document.querySelectorAll('#dontBreakContent');
-    this.observer = new (this._window.nativeWindow as any).ResizeObserver(entries => {
-      // tslint:disable-next-line:prefer-const
-      for (let entry of entries) {
+    this.observedContent = this.document.querySelectorAll('.content');
+    this.observer = new (this._window.nativeWindow as any).ResizeObserver((entries) => {
+       for (let entry of entries) {
         if (!entry.target.classList.contains('notruncatable')) {
           if (entry.target.scrollHeight > entry.contentRect.height) {
             if (entry.target.children.length > 0) {