From 35c8814cc350024e4f38461960d3a2e8b78b39cf Mon Sep 17 00:00:00 2001
From: Conor Wright <Conor.Wright@blackbaud.com>
Date: Fri, 13 Jul 2018 10:46:04 -0400
Subject: [PATCH 1/2] made ariaLabel/title an input for tokens

---
 .../fixtures/tokens.component.fixture.html      |  4 ++++
 .../tokens/fixtures/tokens.component.fixture.ts |  3 +++
 src/modules/tokens/token.component.html         |  4 ++--
 src/modules/tokens/token.component.ts           | 13 ++++++++++++-
 src/modules/tokens/tokens.component.html        |  1 +
 src/modules/tokens/tokens.component.spec.ts     | 17 ++++++++++++++++-
 6 files changed, 38 insertions(+), 4 deletions(-)

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
 </sky-tokens>
+
+<sky-token
+  *ngIf="includeSingleToken"
+  [ariaLabel]="ariaLabel"></sky-token>
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<SkyTokensMessage>;
   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();">
     <i
diff --git a/src/modules/tokens/token.component.ts b/src/modules/tokens/token.component.ts
index 4d8e4aa97..daa9824a2 100644
--- a/src/modules/tokens/token.component.ts
+++ b/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() {
diff --git a/src/modules/tokens/tokens.component.html b/src/modules/tokens/tokens.component.html
index 2222ca2fa..9301faf6f 100644
--- a/src/modules/tokens/tokens.component.html
+++ b/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"
diff --git a/src/modules/tokens/tokens.component.spec.ts b/src/modules/tokens/tokens.component.spec.ts
index fc6d8014c..78746de03 100644
--- a/src/modules/tokens/tokens.component.spec.ts
+++ b/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();

From 37e45643713cf0833054545f4e4ca9f270c39e64 Mon Sep 17 00:00:00 2001
From: Conor Wright <Conor.Wright@blackbaud.com>
Date: Fri, 13 Jul 2018 13:44:07 -0400
Subject: [PATCH 2/2] added specific aria-label for filter close btns

---
 src/locales/resources_en_US.json                      | 4 ++++
 src/modules/filter/filter-summary-item.component.html | 1 +
 src/modules/filter/filter-summary.component.spec.ts   | 6 ++++++
 3 files changed, 11 insertions(+)

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()">
   <sky-token
+    [ariaLabel]="'filter_summary_close' | skyResources"
     [dismissible]="dismissible"
     (dismiss)="onItemDismiss()">
     <ng-content>
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');