fix: provide a way to change placeholder and aria-label for builtin f…

…ilters

This is a backport of 56e9196.

Committed-by: Kevin Buhmann <kbuhmann@vmware.com>
(I think this is technically a feature, but the original commit was a fix.)

projects/angular/clarity.api.md

@@ -1001,6 +1001,17 @@ export class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, ClrDa
     get field(): string;
     set field(field: string);
     // (undocumented)
+    filterNumberMaxPlaceholder: string;
+    // (undocumented)
+    get filterNumberMaxPlaceholderValue(): string;
+    // (undocumented)
+    filterNumberMinPlaceholder: string;
+    // (undocumented)
+    get filterNumberMinPlaceholderValue(): string;
+    filterStringPlaceholder: string;
+    // (undocumented)
+    get filterStringPlaceholderValue(): string;
+    // (undocumented)
     get filterValue(): any;
     set filterValue(newValue: any);
     // (undocumented)
@@ -3635,6 +3646,13 @@ export class DatagridNumericFilter<T = any> extends DatagridFilterRegistrar<T, D
     // (undocumented)
     get low(): number | string;
     set low(low: number | string);
+    maxPlaceholder: string;
+    // (undocumented)
+    get maxPlaceholderValue(): string;
+    // (undocumented)
+    minPlaceholder: string;
+    // (undocumented)
+    get minPlaceholderValue(): string;
     // (undocumented)
     ngAfterViewInit(): void;
     // (undocumented)
@@ -3692,6 +3710,9 @@ export class DatagridStringFilter<T = any> extends DatagridFilterRegistrar<T, Da
     // (undocumented)
     ngOnDestroy(): void;
     open: boolean;
+    placeholder: string;
+    // (undocumented)
+    get placeholderValue(): string;
     get value(): string;
     set value(value: string);
 }

projects/angular/src/data/datagrid/built-in/filters/datagrid-numeric-filter.spec.ts

@@ -40,6 +40,47 @@ const PROVIDERS = [
   },
 ];
 export default function (): void {
+  describe('DatagridNumericFilter accessibility', function () {
+    let context: TestContext<DatagridNumericFilter<string>, AccessibilityTest>;
+
+    function openFilter() {
+      context.clarityElement.querySelector('.datagrid-filter-toggle').click();
+      context.detectChanges();
+    }
+
+    beforeEach(function () {
+      context = this.create(DatagridNumericFilter, AccessibilityTest, PROVIDERS);
+    });
+
+    afterEach(function () {
+      const popoverContent = document.querySelectorAll('.clr-popover-content');
+      popoverContent.forEach(content => document.body.removeChild(content));
+      context.fixture.destroy();
+    });
+
+    it('should be able to change the min placeholder text', fakeAsync(function () {
+      context.testComponent.filterValue = [null, 10];
+      context.testComponent.clrFilterMinPlaceholder = 'min demo placeholder';
+
+      openFilter();
+      const inputMin: HTMLInputElement = document.querySelector('input[name=low]');
+      expect(inputMin.getAttribute('placeholder')).toBe('min demo placeholder');
+      expect(inputMin.getAttribute('aria-label')).toBe('min demo placeholder');
+      tick();
+    }));
+
+    it('should be able to change the max placeholder text', fakeAsync(function () {
+      context.testComponent.filterValue = [null, 10];
+      context.testComponent.clrFilterMaxPlaceholder = 'max demo placeholder';
+
+      openFilter();
+      const inputMax: HTMLInputElement = document.querySelector('input[name=high]');
+      expect(inputMax.getAttribute('placeholder')).toBe('max demo placeholder');
+      expect(inputMax.getAttribute('aria-label')).toBe('max demo placeholder');
+      tick();
+    }));
+  });
+
   describe('DatagridNumericFilter component', function () {
     // Until we can properly type "this"
     let context: TestContext<DatagridNumericFilter<number>, FullTest>;
@@ -139,3 +180,20 @@ class FullTest {
   filter: ClrDatagridNumericFilterInterface<number>;
   filterValue: [number, number];
 }
+
+@Component({
+  template: `<clr-dg-numeric-filter
+    [clrDgNumericFilter]="filter"
+    [(clrFilterValue)]="filterValue"
+    [clrFilterMaxPlaceholder]="clrFilterMaxPlaceholder"
+    [clrFilterMinPlaceholder]="clrFilterMinPlaceholder"
+  ></clr-dg-numeric-filter>`,
+})
+class AccessibilityTest {
+  @ViewChild(CustomFilter) customFilter: CustomFilter;
+
+  filter: ClrDatagridNumericFilterInterface<string>;
+  filterValue: [number, number];
+  clrFilterMaxPlaceholder: string;
+  clrFilterMinPlaceholder: string;
+}

projects/angular/src/data/datagrid/built-in/filters/datagrid-numeric-filter.ts

@@ -28,8 +28,8 @@ import { DatagridNumericFilterImpl } from './datagrid-numeric-filter-impl';
         type="number"
         name="low"
         [(ngModel)]="low"
-        [placeholder]="commonStrings.keys.minValue"
-        [attr.aria-label]="commonStrings.keys.minValue"
+        [placeholder]="minPlaceholderValue"
+        [attr.aria-label]="minPlaceholderValue"
       />
       <span class="datagrid-filter-input-spacer"></span>
       <input
@@ -38,8 +38,8 @@ import { DatagridNumericFilterImpl } from './datagrid-numeric-filter-impl';
         type="number"
         name="high"
         [(ngModel)]="high"
-        [placeholder]="commonStrings.keys.maxValue"
-        [attr.aria-label]="commonStrings.keys.maxValue"
+        [placeholder]="maxPlaceholderValue"
+        [attr.aria-label]="maxPlaceholderValue"
       />
     </clr-dg-filter>
   `,
@@ -65,6 +65,21 @@ export class DatagridNumericFilter<T = any>
     });
   }
 
+  /**
+   * Provide a way to pass external placeholder and aria-label to the filter input
+   */
+  @Input('clrFilterMaxPlaceholder') maxPlaceholder: string;
+
+  get maxPlaceholderValue() {
+    return this.maxPlaceholder || this.commonStrings.keys.maxValue;
+  }
+
+  @Input('clrFilterMinPlaceholder') minPlaceholder: string;
+
+  get minPlaceholderValue() {
+    return this.minPlaceholder || this.commonStrings.keys.minValue;
+  }
+
   /**
    * Customizable filter logic based on high and low values
    */

projects/angular/src/data/datagrid/built-in/filters/datagrid-string-filter.spec.ts

@@ -41,6 +41,30 @@ const PROVIDERS = [
 ];
 
 export default function (): void {
+  describe('DatagridStringFilter accessibility', function () {
+    let context: TestContext<DatagridStringFilter<string>, AccessibilityTest>;
+
+    function openFilter() {
+      context.clarityElement.querySelector('.datagrid-filter-toggle').click();
+      context.detectChanges();
+    }
+
+    beforeEach(function () {
+      context = this.create(DatagridStringFilter, AccessibilityTest, PROVIDERS);
+    });
+
+    it('should be able to change the placeholder text', fakeAsync(function () {
+      context.testComponent.filterValue = 'M';
+      context.testComponent.clrFilterPlaceholder = 'demo placeholder';
+
+      openFilter();
+      const input: HTMLInputElement = document.querySelector("input[type='text']");
+      expect(input.getAttribute('placeholder')).toBe('demo placeholder');
+      expect(input.getAttribute('aria-label')).toBe('demo placeholder');
+      tick();
+    }));
+  });
+
   describe('DatagridStringFilter component', function () {
     let context: TestContext<DatagridStringFilter<string>, FullTest>;
     let filter: TestFilter;
@@ -150,3 +174,18 @@ class FullTest {
   filter: ClrDatagridStringFilterInterface<string>;
   filterValue: string;
 }
+
+@Component({
+  template: `<clr-dg-string-filter
+    [clrDgStringFilter]="filter"
+    [(clrFilterValue)]="filterValue"
+    [clrFilterPlaceholder]="clrFilterPlaceholder"
+  ></clr-dg-string-filter>`,
+})
+class AccessibilityTest {
+  @ViewChild(CustomFilter) customFilter: CustomFilter;
+
+  filter: ClrDatagridStringFilterInterface<string>;
+  filterValue: string;
+  clrFilterPlaceholder: string;
+}

projects/angular/src/data/datagrid/built-in/filters/datagrid-string-filter.ts

@@ -28,8 +28,8 @@ import { DatagridStringFilterImpl } from './datagrid-string-filter-impl';
         name="search"
         [(ngModel)]="value"
         class="clr-input"
-        [attr.aria-label]="commonStrings.keys.filterItems"
-        [placeholder]="commonStrings.keys.filterItems"
+        [attr.aria-label]="placeholderValue"
+        [placeholder]="placeholderValue"
       />
     </clr-dg-filter>
   `,
@@ -48,6 +48,15 @@ export class DatagridStringFilter<T = any>
     super(filters);
   }
 
+  /**
+   * Provide a way to pass external placeholder and aria-label to the filter input
+   */
+  @Input('clrFilterPlaceholder') placeholder: string;
+
+  get placeholderValue() {
+    return this.placeholder || this.commonStrings.keys.filterItems;
+  }
+
   /**
    * Customizable filter logic based on a search text
    */

projects/angular/src/data/datagrid/datagrid-column.ts

@@ -60,12 +60,15 @@ import { WrappedColumn } from './wrapped-column';
 
       <clr-dg-string-filter
         *ngIf="field && !customFilter && colType == 'string'"
+        [clrFilterPlaceholder]="filterStringPlaceholderValue"
         [clrDgStringFilter]="registered"
         [(clrFilterValue)]="filterValue"
       ></clr-dg-string-filter>
 
       <clr-dg-numeric-filter
         *ngIf="field && !customFilter && colType == 'number'"
+        [clrFilterMaxPlaceholder]="filterMaxPlaceholderValue"
+        [clrFilterMinPlaceholder]="filterMinPlaceholderValue"
         [clrDgNumericFilter]="registered"
         [(clrFilterValue)]="filterValue"
       ></clr-dg-numeric-filter>
@@ -381,6 +384,24 @@ export class ClrDatagridColumn<T = any>
     }
   }
 
+  /**
+   * Help with accessibility for screen readers by providing custom placeholder text inside internal filters
+   */
+  @Input('clrFilterStringPlaceholder') public filterStringPlaceholder: string;
+  get filterStringPlaceholderValue() {
+    return this.filterStringPlaceholder || this.commonStrings.keys.filterItems;
+  }
+
+  @Input('clrFilterNumberMaxPlaceholder') public filterNumberMaxPlaceholder: string;
+  get filterNumberMaxPlaceholderValue() {
+    return this.filterNumberMaxPlaceholder || this.commonStrings.keys.maxValue;
+  }
+
+  @Input('clrFilterNumberMinPlaceholder') public filterNumberMinPlaceholder: string;
+  get filterNumberMinPlaceholderValue() {
+    return this.filterNumberMinPlaceholder || this.commonStrings.keys.minValue;
+  }
+
   @Input('clrFilterValue')
   public set updateFilterValue(newValue: string | [number, number]) {
     if (this.filter) {