fix(expandable-section, expandable-text, expandable-panel): Added ari…

…a-controls and aria-expanded.

Fixed an issue where the correct aria attributes where not present on accordion like elements like
expandable-section, expandable-text and expandable-panel.

Fixes #788

libs/barista-components/expandable-panel/src/expandable-panel-trigger.ts

@@ -33,6 +33,8 @@ import { DtExpandablePanel } from './expandable-panel';
     '[attr.disabled]':
       'dtExpandablePanel && dtExpandablePanel.disabled ? true: null',
     '[attr.aria-disabled]': 'dtExpandablePanel && dtExpandablePanel.disabled',
+    '[attr.aria-expanded]': 'dtExpandablePanel && dtExpandablePanel.expanded',
+    '[attr.aria-controls]': 'dtExpandablePanel && dtExpandablePanel._uniqueId',
     '[tabindex]': 'dtExpandablePanel && dtExpandablePanel.disabled ? -1 : 0',
     '(click)': '_handleClick()',
     '(keydown)': '_handleKeydown($event)',

libs/barista-components/expandable-panel/src/expandable-panel.html

@@ -1,3 +1,3 @@
-<div [@animationState]="expanded">
+<div [@animationState]="expanded" [attr.id]="_uniqueId">
   <ng-content></ng-content>
 </div>

libs/barista-components/expandable-panel/src/expandable-panel.spec.ts

@@ -172,6 +172,49 @@ describe('DtExpandablePanel', () => {
       expect(triggerInstanceElement.getAttribute('disabled')).toBe('true');
     });
 
+    // check aria-controls attribute
+    it('should have the correct aria-controls attribute', () => {
+      const panelFixture = createComponent(ExpandablePanelWithTriggerComponent);
+      const triggerInstanceElement = panelFixture.debugElement.query(
+        By.css('.dt-expandable-panel-trigger'),
+      ).nativeElement;
+
+      expect(triggerInstanceElement.getAttribute('aria-controls')).toMatch(
+        /dt-expandable-panel-\d/,
+      );
+    });
+
+    // check if it has the correct aria-expanded attribute
+    it('should have the correct aria-expanded attribute', () => {
+      const panelFixture = createComponent(ExpandablePanelWithTriggerComponent);
+      const triggerInstanceElement = panelFixture.debugElement.query(
+        By.css('.dt-expandable-panel-trigger'),
+      ).nativeElement;
+
+      expect(triggerInstanceElement.getAttribute('aria-expanded')).toBe(
+        'false',
+      );
+    });
+
+    // check if it has the correct aria-expanded attribute is set after expanding
+    it('should have the correct aria-expanded attribute after opening the expandable', () => {
+      const panelFixture = createComponent(ExpandablePanelWithTriggerComponent);
+      const panelDebugElement = panelFixture.debugElement.query(
+        By.directive(DtExpandablePanel),
+      );
+      const triggerInstanceElement = panelFixture.debugElement.query(
+        By.css('.dt-expandable-panel-trigger'),
+      ).nativeElement;
+      const panelInstance = panelDebugElement.injector.get<DtExpandablePanel>(
+        DtExpandablePanel,
+      );
+
+      panelInstance.expanded = true;
+      panelFixture.detectChanges();
+
+      expect(triggerInstanceElement.getAttribute('aria-expanded')).toBe('true');
+    });
+
     // check expanded and expandChange outputs
     it('should fire expanded and expandChange events on open', () => {
       const expandedSpy = jest.fn();

libs/barista-components/expandable-panel/src/expandable-panel.ts

@@ -34,6 +34,12 @@ import {
 import { filter } from 'rxjs/operators';
 import { Observable } from 'rxjs';
 
+/**
+ * UniqueId counter, will be incremented with every
+ * instatiation of the ExpandablePanel class
+ */
+let uniqueId = 0;
+
 @Component({
   selector: 'dt-expandable-panel',
   exportAs: 'dtExpandablePanel',
@@ -71,6 +77,9 @@ import { Observable } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DtExpandablePanel {
+  /** @internal Unique identifier on the page for the expandable panel */
+  _uniqueId = `dt-expandable-panel-${uniqueId++}`;
+
   /** Whether the panel is expanded. */
   @Input()
   get expanded(): boolean {

libs/barista-components/expandable-section/src/expandable-section.html

@@ -2,6 +2,8 @@
   <button
     [dtExpandablePanel]="expandablepanel"
     class="dt-expandable-section-header-trigger"
+    [attr.aria-controls]="expandablepanel._uniqueId"
+    [attr.aria-expanded]="expanded"
   >
     <div>
       <dt-icon

libs/barista-components/expandable-section/src/expandable-section.spec.ts

@@ -124,6 +124,40 @@ describe('DtExpandableSection', () => {
       );
     });
 
+    // check aria-controls attribute
+    it('should have the correct aria-controls attribute', () => {
+      const triggerInstanceElement = fixture.debugElement.query(
+        By.css('.dt-expandable-panel-trigger'),
+      ).nativeElement;
+
+      expect(triggerInstanceElement.getAttribute('aria-controls')).toMatch(
+        /dt-expandable-panel-\d/,
+      );
+    });
+
+    // check if it has the correct aria-expanded attribute
+    it('should have the correct aria-expanded attribute', () => {
+      const triggerInstanceElement = fixture.debugElement.query(
+        By.css('.dt-expandable-panel-trigger'),
+      ).nativeElement;
+
+      expect(triggerInstanceElement.getAttribute('aria-expanded')).toBe(
+        'false',
+      );
+    });
+
+    // check if it has the correct aria-expanded attribute is set after expanding
+    it('should have the correct aria-expanded attribute after opening the expandable', () => {
+      const triggerInstanceElement = fixture.debugElement.query(
+        By.css('.dt-expandable-panel-trigger'),
+      ).nativeElement;
+
+      expandableSectionInstance.toggle();
+      fixture.detectChanges();
+
+      expect(triggerInstanceElement.getAttribute('aria-expanded')).toBe('true');
+    });
+
     // check attributes of section and trigger when disabled
     it('should have correct attributes when disabled', () => {
       const triggerInstanceElement = fixture.debugElement.query(

libs/barista-components/expandable-text/src/expandable-text.html

@@ -1,8 +1,13 @@
-<span class="dt-expandable-text-content">
+<span class="dt-expandable-text-content" [attr.id]="_uniqueId">
   <ng-container *ngIf="expanded">
     <ng-content></ng-content>
   </ng-container>
 </span>
-<button class="dt-expandable-text-trigger" (click)="toggle()">
+<button
+  class="dt-expandable-text-trigger"
+  (click)="toggle()"
+  [attr.aria-controls]="_uniqueId"
+  [attr.aria-expanded]="expanded"
+>
   {{!expanded ? label : labelClose}}
 </button>

libs/barista-components/expandable-text/src/expandable-text.spec.ts

@@ -156,6 +156,38 @@ describe('dt-expandable-text', () => {
     collapsedSubscription.unsubscribe();
     changedSubscription.unsubscribe();
   });
+
+  // check aria-controls attribute
+  it('should have the correct aria-controls attribute', () => {
+    const triggerInstanceElement = fixture.debugElement.query(
+      By.css('.dt-expandable-text-trigger'),
+    ).nativeElement;
+
+    expect(triggerInstanceElement.getAttribute('aria-controls')).toMatch(
+      /dt-expandable-text-\d/,
+    );
+  });
+
+  // check if it has the correct aria-expanded attribute
+  it('should have the correct aria-expanded attribute', () => {
+    const triggerInstanceElement = fixture.debugElement.query(
+      By.css('.dt-expandable-text-trigger'),
+    ).nativeElement;
+
+    expect(triggerInstanceElement.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  // check if it has the correct aria-expanded attribute is set after expanding
+  it('should have the correct aria-expanded attribute after opening the expandable', () => {
+    const triggerInstanceElement = fixture.debugElement.query(
+      By.css('.dt-expandable-text-trigger'),
+    ).nativeElement;
+
+    expandableTextInstance.open();
+    fixture.detectChanges();
+
+    expect(triggerInstanceElement.getAttribute('aria-expanded')).toBe('true');
+  });
 });
 
 function checkTextVisibility<T>(

libs/barista-components/expandable-text/src/expandable-text.ts

@@ -27,6 +27,12 @@ import {
 import { filter } from 'rxjs/operators';
 import { Observable } from 'rxjs';
 
+/**
+ * UniqueId counter, will be incremented with every
+ * instatiation of the expandableText class
+ */
+let uniqueId = 0;
+
 /**
  * Provides basic expand/collaps functionality for
  * inline-text without any styling.
@@ -45,6 +51,9 @@ import { Observable } from 'rxjs';
   encapsulation: ViewEncapsulation.Emulated,
 })
 export class DtExpandableText {
+  /** @internal Unique identifier on the page for the expandable text. */
+  _uniqueId = `dt-expandable-text-${uniqueId++}`;
+
   /** Label for the expand button */
   @Input() label: string;
   /** Label for the collapse button */