made ariaLabel/title an input for tokens

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"

src/modules/filter/filter-summary-item.component.html

@@ -3,6 +3,7 @@
   (click)="onItemClick()"
   (keypress.enter)="onItemKeypress()">
   <sky-token
+    [ariaLabel]="'filter_summary_close' | skyResources"
     [dismissible]="dismissible"
     (dismiss)="onItemDismiss()">
     <ng-content>

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');

src/modules/tokens/fixtures/tokens.component.fixture.html

@@ -10,3 +10,7 @@
   (tokenSelected)="onTokenSelected($event)">
   INNER CONTENT
 </sky-tokens>
+
+<sky-token
+  *ngIf="includeSingleToken"
+  [ariaLabel]="ariaLabel"></sky-token>

src/modules/tokens/fixtures/tokens.component.fixture.ts

@@ -25,13 +25,16 @@ export class SkyTokensTestComponent implements OnDestroy {
   @ViewChild(SkyTokensComponent)
   public tokensComponent: SkyTokensComponent;
 
+  public ariaLabel: string;
   public disabled: boolean;
   public dismissible: boolean;
   public displayWith: string;
   public focusable: boolean;
   public messageStream: Subject<SkyTokensMessage>;
   public tokens: SkyToken[];
 
+  public includeSingleToken = false;
+
   public data: any[] = [
     { name: 'Red' },
     { name: 'White' },

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();">
     <i

src/modules/tokens/token.component.ts

@@ -6,6 +6,7 @@ import {
   Input,
   Output
 } from '@angular/core';
+import { SkyResourcesService } from '../resources';
 
 @Component({
   selector: 'sky-token',
@@ -23,6 +24,14 @@ export class SkyTokenComponent {
     return (this._disabled === true);
   }
 
+  @Input()
+  public set ariaLabel(value: string) {
+    this._ariaLabel = value;
+  }
+  public get ariaLabel() {
+    return this._ariaLabel || this.skyResourcesService.getString('token_dismiss_button_title');
+  }
+
   @Input()
   public set dismissible(value: boolean) {
     this._dismissible = value;
@@ -51,12 +60,14 @@ export class SkyTokenComponent {
     return (this.focusable) ? 0 : -1;
   }
 
+  private _ariaLabel: string;
   private _disabled: boolean;
   private _dismissible: boolean;
   private _focusable: boolean;
 
   constructor(
-    private elementRef: ElementRef
+    private elementRef: ElementRef,
+    private skyResourcesService: SkyResourcesService
   ) { }
 
   public dismissToken() {

src/modules/tokens/tokens.component.html

@@ -6,6 +6,7 @@
   <sky-token
     *ngFor="let token of tokens; let i = index"
     role="listitem"
+    [ariaLabel]="ariaLabel"
     [disabled]="disabled"
     [dismissible]="dismissible"
     [focusable]="focusable"

src/modules/tokens/tokens.component.spec.ts

@@ -1,6 +1,8 @@
 import {
   ComponentFixture,
-  TestBed
+  TestBed,
+  fakeAsync,
+  tick
 } from '@angular/core/testing';
 
 import {
@@ -169,6 +171,19 @@ describe('Tokens component', function () {
       });
     });
 
+    it('should use inputted values for ariaLabel', fakeAsync(() => {
+      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();