disabled aria-controls when the target has not been drawn

package.json

@@ -56,7 +56,7 @@
     "@angular/platform-browser-dynamic": "4.3.6",
     "@angular/router": "4.3.6",
     "@blackbaud/skyux": "latest",
-    "@blackbaud/skyux-builder": "1.19.3",
+    "@blackbaud/skyux-builder": "1.20.2",
     "@types/core-js": "0.9.41",
     "@types/jasmine": "2.5.47",
     "@types/node": "7.0.18",

skyux-spa-visual-tests/package.json

@@ -20,7 +20,7 @@
   "license": "ISC",
   "devDependencies": {
     "@blackbaud/skyux": "latest",
-    "@blackbaud/skyux-builder": "1.13.0",
+    "@blackbaud/skyux-builder": "1.20.2",
     "@skyux/theme": "3.1.0",
     "browserstack-local": "1.3.0",
     "pix-diff": "2.0.0"

skyux-spa-visual-tests/src/app/list-toolbar/list-toolbar-visual.component.html

@@ -15,10 +15,6 @@
         type="string"
         [descending]="false">
       </sky-list-toolbar-sort>
-      <sky-list-filter-button>
-        <sky-filter-button [showButtonText]="true">
-        </sky-filter-button>
-      </sky-list-filter-button>
       <sky-list-toolbar-view-actions>
         <button
           class="sky-btn sky-btn-default"
@@ -35,6 +31,25 @@
           <sky-icon icon="angle-double-up"></sky-icon>
         </button>
       </sky-list-toolbar-view-actions>
+      <sky-list-filter-inline>
+        <sky-list-filter-inline-item
+          name="fruitType"
+          [filter]="fruitTypeFilterFunction"
+          value="any"
+          defaultValue="any">
+          <ng-template let-filter="filter">
+            <label for="sky-demo-select-type">Fruit type</label>
+            <select
+              id="sky-demo-select-type"
+              [ngModel]="filter.value"
+              (ngModelChange)="filter.changed($event)">
+              <option value="any">Any fruit</option>
+              <option value="citrus">Citrus</option>
+              <option value="berry">Berry</option>
+            </select>
+          </ng-template>
+        </sky-list-filter-inline-item>
+      </sky-list-filter-inline>
     </sky-list-toolbar>
     <sky-list-view-grid fit="scroll" #grid>
       <sky-grid-column field="column1" heading="Column1"></sky-grid-column>

skyux-spa-visual-tests/src/app/list-toolbar/list-toolbar-visual.component.ts

@@ -18,4 +18,8 @@ export class ListToolbarVisualComponent {
     { id: '6', column1: 606, column2: 'Lemon', column3: 'Larry eats lemons' },
     { id: '7', column1: 707, column2: 'Strawberry', column3: 'Sally eats strawberries' }
   ]);
+
+  public fruitTypeFilterFunction(): boolean {
+    return true;
+  }
 }

skyux-spa-visual-tests/src/app/list-toolbar/list-toolbar.visual-spec.ts

@@ -18,6 +18,21 @@ describe('list-toolbar component', () => {
       });
   });
 
+  it('should display inline filters correctly when openned', () => {
+    return SkyVisualTest
+      .setupTest('list-toolbar')
+      .then(() => {
+        return element(by.css('#screenshot-list-toolbar .sky-filter-btn'))
+          .click() as any;
+      })
+      .then(() => {
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'list-toolbar-inline-filters-open',
+          selector: '#screenshot-list-toolbar'
+        });
+      });
+  });
+
   it('should display toolbar correctly when a small screen', () => {
     return SkyVisualTest
       .setupTest('list-toolbar', 400)

src/modules/list-filters/list-filter-inline.component.spec.ts

@@ -127,6 +127,7 @@ describe('List inline filters', () => {
       fixture.detectChanges();
 
       expect(filterButton.getAttribute('aria-expanded')).toBe('false');
+      expect(filterButton.getAttribute('aria-controls')).toBeFalsy();
     }));
 
     it('should filter appropriately when change function is called', fakeAsync(() => {

src/modules/list-toolbar/list-toolbar.component.html

@@ -80,7 +80,7 @@
     </sky-toolbar>
   </div>
   <div
-    *ngIf="!(isToolbarDisabled | async) && hasInlineFilters && inlineFilterBarExpanded"
+    *ngIf="isFilterBarDisplayed"
     [attr.aria-labelledby]="filterButtonId"
     [id]="listFilterInlineId"
   >
@@ -92,7 +92,7 @@
 <ng-template #search>
   <div *ngIf="isSearchEnabled | async">
     <sky-search
-      [disabled]="isToolbarDisabled | async"
+      [disabled]="isToolbarDisabled"
       [expandMode]="(type | async) === 'search' ? 'fit' : 'responsive'"
       [placeholderText]="placeholder"
       [searchText]="searchTextInput | async"
@@ -121,9 +121,9 @@
 <ng-template #inlineFilterButton>
   <sky-filter-button
     [active]="hasAppliedFilters | async"
-    [ariaControls]="listFilterInlineId"
+    [ariaControls]="filterButtonAriaControls"
     [ariaExpanded]="inlineFilterBarExpanded"
-    [disabled]="isToolbarDisabled | async"
+    [disabled]="isToolbarDisabled"
     [filterButtonId]="filterButtonId"
     [showButtonText]="true"
     (filterButtonClick)="inlineFilterButtonClick()"

src/modules/list-toolbar/list-toolbar.component.ts

@@ -94,6 +94,14 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit, OnDest
   @Input()
   public searchText: string | Observable<string>;
 
+  public get isFilterBarDisplayed(): boolean {
+    return !this.isToolbarDisabled && this.hasInlineFilters && this.inlineFilterBarExpanded;
+  }
+
+  public get filterButtonAriaControls(): string {
+    return this.isFilterBarDisplayed ? this.listFilterInlineId : undefined;
+  }
+
   public sortSelectors: Observable<Array<any>>;
   public searchTextInput: Observable<string>;
   public view: Observable<string>;
@@ -102,7 +110,7 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit, OnDest
   public rightTemplates: ListToolbarItemModel[];
   public type: Observable<string>;
   public isSearchEnabled: Observable<boolean>;
-  public isToolbarDisabled: Observable<boolean>;
+  public isToolbarDisabled: boolean = false;
   public isSortSelectorEnabled: Observable<boolean>;
   public appliedFilters: Observable<Array<ListFilterModel>>;
   public hasAppliedFilters: Observable<boolean>;
@@ -229,10 +237,9 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit, OnDest
     this.isSearchEnabled = this.toolbarState.map(s => s.config)
       .distinctUntilChanged().map(c => c.searchEnabled);
 
-    this.isToolbarDisabled = this.state.map(s => s.toolbar)
-      .distinctUntilChanged().map(c => {
-        return c.disabled;
-      });
+    this.state.map(s => s.toolbar)
+      .distinctUntilChanged().map(c => c.disabled)
+      .subscribe(isDisabled => this.isToolbarDisabled = isDisabled);
 
     this.isSortSelectorEnabled = this.toolbarState.map(s => s.config)
       .distinctUntilChanged().map(c => c.sortSelectorEnabled);