From 5d6bf0bb334ddda17741837058a27de60f1a9e26 Mon Sep 17 00:00:00 2001
From: autavares-dev <autavares.dev@gmail.com>
Date: Mon, 22 Jul 2024 21:20:05 -0300
Subject: [PATCH] Fix truncatable-part keyboard accessibility

(cherry picked from commit 6cb4faa8d34cbb18eb0516506c2c6da6b5e15df9)
---
 .../truncatable-part.component.html            | 18 +++++++++++-------
 .../truncatable-part.component.spec.ts         | 13 +++++++++++++
 .../truncatable-part.component.ts              |  7 +++++++
 3 files changed, 31 insertions(+), 7 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 32a2a21349..55ebe2d957 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
@@ -2,12 +2,16 @@
   <div #content class="content dont-break-out preserve-line-breaks">
     <ng-content></ng-content>
   </div>
-  <button class="btn btn-link p-0 expandButton" dsDragClick (actualClick)="toggle()">
-    <i class="fas fa-angle-down"></i>
-    <span class="ml-1">{{ 'item.truncatable-part.show-more' | translate }}</span>
-  </button>
-  <button class="btn btn-link p-0 collapseButton" dsDragClick (actualClick)="toggle()" *ngIf="expand && expandable">
-    <i class="fas fa-angle-up"></i>
-    <span class="ml-1">{{ 'item.truncatable-part.show-less' | translate }}</span>
+  <button
+    class="btn btn-link p-0 {{isExpanded ? 'collapseButton' : 'expandButton'}}"
+    dsDragClick
+    (actualClick)="toggle()"
+    (keyup.Enter)="toggle()"
+    (keyup.Space)="toggle()"
+    role="button"
+    [attr.aria-expanded]="isExpanded"
+  >
+    <i class="fas {{isExpanded ? 'fa-angle-up' : 'fa-angle-down'}}"></i>
+    <span class="ml-1">{{ 'item.truncatable-part.show-' + (isExpanded ? 'less' : 'more') | translate }}</span>
   </button>
 </div>
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 08d3e18117..a40703bbf3 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
@@ -73,6 +73,11 @@ describe('TruncatablePartComponent', () => {
       const a = fixture.debugElement.query(By.css('.collapseButton'));
       expect(a).toBeNull();
     });
+
+    it('expandButton aria-expanded should be false', () => {
+      const btn = fixture.debugElement.query(By.css('.expandButton'));
+      expect(btn.nativeElement.getAttribute('aria-expanded')).toEqual('false');
+    });
   });
 
   describe('When the item is expanded', () => {
@@ -101,6 +106,14 @@ describe('TruncatablePartComponent', () => {
       const a = fixture.debugElement.query(By.css('.collapseButton'));
       expect(a).not.toBeNull();
     });
+
+    it('collapseButton aria-expanded should be true', () => {
+      (comp as any).setLines();
+      (comp as any).expandable = true;
+      fixture.detectChanges();
+      const btn = fixture.debugElement.query(By.css('.collapseButton'));
+      expect(btn.nativeElement.getAttribute('aria-expanded')).toEqual('true');
+    });
   });
 });
 
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 790bd5985d..c25e44c968 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
@@ -136,6 +136,13 @@ export class TruncatablePartComponent implements AfterViewChecked, OnInit, OnDes
     }
   }
 
+  /**
+   * Indicates if the content is expanded, button state is 'Collapse'
+   */
+  public get isExpanded() {
+    return this.expand && this.expandable;
+  }
+
   /**
    * Unsubscribe from the subscription
    */