diff --git a/src/locales/resources_en_US.json b/src/locales/resources_en_US.json index 919b5453e..21e705418 100644 --- a/src/locales/resources_en_US.json +++ b/src/locales/resources_en_US.json @@ -443,6 +443,10 @@ "_description": "Text for the filter summary component", "message": "Filter" }, + "filter_summary_close": { + "_description": "Text for the filter summary component's close button", + "message": "Remove filter" + }, "flyout_close": { "_description": "Text for flyout close button", "message": "Close flyout" diff --git a/src/modules/filter/filter-summary-item.component.html b/src/modules/filter/filter-summary-item.component.html index 96c61366c..1646e1902 100644 --- a/src/modules/filter/filter-summary-item.component.html +++ b/src/modules/filter/filter-summary-item.component.html @@ -3,6 +3,7 @@ (click)="onItemClick()" (keypress.enter)="onItemKeypress()"> diff --git a/src/modules/filter/filter-summary.component.spec.ts b/src/modules/filter/filter-summary.component.spec.ts index c45000de5..19ffeea36 100644 --- a/src/modules/filter/filter-summary.component.spec.ts +++ b/src/modules/filter/filter-summary.component.spec.ts @@ -52,6 +52,12 @@ describe('Filter summary', () => { expect(items.item(1).querySelector('.sky-token-btn-close')).not.toBeNull(); }); + it('should set aria-label and title on close filter button', () => { + let el = nativeElement.querySelector('.sky-token-btn-close'); + expect(el.getAttribute('aria-label')).toBe('Remove filter'); + expect(el.getAttribute('title')).toBe('Remove filter'); + }); + it('should emit an event on item click', () => { let items = nativeElement .querySelectorAll('.sky-filter-summary-items .sky-filter-summary-item'); diff --git a/src/modules/tokens/fixtures/tokens.component.fixture.html b/src/modules/tokens/fixtures/tokens.component.fixture.html index 81a48587d..2bf1989e8 100644 --- a/src/modules/tokens/fixtures/tokens.component.fixture.html +++ b/src/modules/tokens/fixtures/tokens.component.fixture.html @@ -10,3 +10,7 @@ (tokenSelected)="onTokenSelected($event)"> INNER CONTENT + + diff --git a/src/modules/tokens/fixtures/tokens.component.fixture.ts b/src/modules/tokens/fixtures/tokens.component.fixture.ts index 2766bab30..e3197b6b6 100644 --- a/src/modules/tokens/fixtures/tokens.component.fixture.ts +++ b/src/modules/tokens/fixtures/tokens.component.fixture.ts @@ -25,6 +25,7 @@ export class SkyTokensTestComponent implements OnDestroy { @ViewChild(SkyTokensComponent) public tokensComponent: SkyTokensComponent; + public ariaLabel: string; public disabled: boolean; public dismissible: boolean; public displayWith: string; @@ -32,6 +33,8 @@ export class SkyTokensTestComponent implements OnDestroy { public messageStream: Subject; public tokens: SkyToken[]; + public includeSingleToken = false; + public data: any[] = [ { name: 'Red' }, { name: 'White' }, diff --git a/src/modules/tokens/token.component.html b/src/modules/tokens/token.component.html index 41cd93c9a..21e2492a8 100644 --- a/src/modules/tokens/token.component.html +++ b/src/modules/tokens/token.component.html @@ -13,9 +13,9 @@ *ngIf="dismissible" class="sky-btn sky-token-btn-close" type="button" - [attr.aria-label]="'token_dismiss_button_title' | skyResources" + [attr.aria-label]="ariaLabel" [attr.tabindex]="tabIndex" - [attr.title]="'token_dismiss_button_title' | skyResources" + [attr.title]="ariaLabel" [disabled]="disabled" (click)="dismissToken();$event.stopPropagation();"> { + component.ariaLabel = 'this is a custom label'; + component.includeSingleToken = true; + + fixture.detectChanges(); + tick(); + fixture.detectChanges(); + + let token = fixture.nativeElement.querySelector('.sky-token-btn-close'); + expect(token.getAttribute('aria-label')).toBe('this is a custom label'); + expect(token.getAttribute('title')).toBe('this is a custom label'); + })); + it('should not emit when token is clicked if disabled', function () { component.disabled = true; const spy = spyOn(component, 'onTokenSelected').and.callThrough();