diff --git a/libs/barista-components/expandable-panel/src/expandable-panel-trigger.ts b/libs/barista-components/expandable-panel/src/expandable-panel-trigger.ts index 0cbf868d67..f98630b07c 100644 --- a/libs/barista-components/expandable-panel/src/expandable-panel-trigger.ts +++ b/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)', diff --git a/libs/barista-components/expandable-panel/src/expandable-panel.html b/libs/barista-components/expandable-panel/src/expandable-panel.html index ede028cc2b..d11cb920f1 100644 --- a/libs/barista-components/expandable-panel/src/expandable-panel.html +++ b/libs/barista-components/expandable-panel/src/expandable-panel.html @@ -1,3 +1,3 @@ -
+
diff --git a/libs/barista-components/expandable-panel/src/expandable-panel.spec.ts b/libs/barista-components/expandable-panel/src/expandable-panel.spec.ts index a98051db65..eafeb26fa8 100644 --- a/libs/barista-components/expandable-panel/src/expandable-panel.spec.ts +++ b/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, + ); + + 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(); diff --git a/libs/barista-components/expandable-panel/src/expandable-panel.ts b/libs/barista-components/expandable-panel/src/expandable-panel.ts index 2c75b8e553..b6e570ed86 100644 --- a/libs/barista-components/expandable-panel/src/expandable-panel.ts +++ b/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 { diff --git a/libs/barista-components/expandable-section/src/expandable-section.html b/libs/barista-components/expandable-section/src/expandable-section.html index 76e1dce4c6..5bd023c1c8 100644 --- a/libs/barista-components/expandable-section/src/expandable-section.html +++ b/libs/barista-components/expandable-section/src/expandable-section.html @@ -2,6 +2,8 @@ diff --git a/libs/barista-components/expandable-text/src/expandable-text.spec.ts b/libs/barista-components/expandable-text/src/expandable-text.spec.ts index dcb6f62d27..5425776310 100644 --- a/libs/barista-components/expandable-text/src/expandable-text.spec.ts +++ b/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( diff --git a/libs/barista-components/expandable-text/src/expandable-text.ts b/libs/barista-components/expandable-text/src/expandable-text.ts index ab29be539e..93055d6efb 100644 --- a/libs/barista-components/expandable-text/src/expandable-text.ts +++ b/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 */