Merge pull request #3212 from autavares-dev/fix-truncatable-part-keyboard-accessibility

Fix truncatable-part keyboard accessibility

Author: tdonohue

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>

src/app/shared/truncatable/truncatable-part/truncatable-part.component.spec.ts

@@ -87,6 +87,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', () => {
@@ -115,6 +120,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');
+    });
   });
 });
 

src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts

@@ -150,6 +150,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
    */