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

…ilters

Signed-off-by: Bozhidar Dryanovski <bozhidar.dryanovski@gmail.com>

projects/angular/clarity.api.md

@@ -1252,6 +1252,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)
@@ -1290,7 +1301,7 @@ export class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, ClrDa
     // (undocumented)
     get _view(): any;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClrDatagridColumn<any>, "clr-dg-column", never, { "colType": "clrDgColType"; "field": "clrDgField"; "sortBy": "clrDgSortBy"; "sorted": "clrDgSorted"; "sortOrder": "clrDgSortOrder"; "updateFilterValue": "clrFilterValue"; }, { "sortedChange": "clrDgSortedChange"; "sortOrderChange": "clrDgSortOrderChange"; "filterValueChange": "clrFilterValueChange"; }, ["projectedFilter"], ["clr-dg-filter, clr-dg-string-filter, clr-dg-numeric-filter", "*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrDatagridColumn<any>, "clr-dg-column", never, { "colType": "clrDgColType"; "field": "clrDgField"; "sortBy": "clrDgSortBy"; "sorted": "clrDgSorted"; "sortOrder": "clrDgSortOrder"; "filterStringPlaceholder": "clrFilterStringPlaceholder"; "filterNumberMaxPlaceholder": "clrFilterNumberMaxPlaceholder"; "filterNumberMinPlaceholder": "clrFilterNumberMinPlaceholder"; "updateFilterValue": "clrFilterValue"; }, { "sortedChange": "clrDgSortedChange"; "sortOrderChange": "clrDgSortOrderChange"; "filterValueChange": "clrFilterValueChange"; }, ["projectedFilter"], ["clr-dg-filter, clr-dg-string-filter, clr-dg-numeric-filter", "*"]>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrDatagridColumn<any>, never>;
 }
@@ -4945,6 +4956,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)
@@ -4953,7 +4971,7 @@ export class DatagridNumericFilter<T = any> extends DatagridFilterRegistrar<T, D
     get value(): [number, number];
     set value(values: [number, number]);
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatagridNumericFilter<any>, "clr-dg-numeric-filter", never, { "customNumericFilter": "clrDgNumericFilter"; "value": "clrFilterValue"; }, { "filterValueChange": "clrFilterValueChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatagridNumericFilter<any>, "clr-dg-numeric-filter", never, { "maxPlaceholder": "clrFilterMaxPlaceholder"; "minPlaceholder": "clrFilterMinPlaceholder"; "customNumericFilter": "clrDgNumericFilter"; "value": "clrFilterValue"; }, { "filterValueChange": "clrFilterValueChange"; }, never, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<DatagridNumericFilter<any>, never>;
 }
@@ -5006,10 +5024,13 @@ 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);
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatagridStringFilter<any>, "clr-dg-string-filter", never, { "customStringFilter": "clrDgStringFilter"; "value": "clrFilterValue"; }, { "filterValueChange": "clrFilterValueChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatagridStringFilter<any>, "clr-dg-string-filter", never, { "placeholder": "clrFilterPlaceholder"; "customStringFilter": "clrDgStringFilter"; "value": "clrFilterValue"; }, { "filterValueChange": "clrFilterValueChange"; }, never, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<DatagridStringFilter<any>, never>;
 }

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

@@ -41,6 +41,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>;
@@ -141,3 +182,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 { ClrPopoverToggleService } from '../../../../utils/popover/providers/pop
         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 { ClrPopoverToggleService } from '../../../../utils/popover/providers/pop
         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>
   `,
@@ -67,6 +67,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

@@ -42,6 +42,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;
@@ -151,3 +175,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

@@ -38,8 +38,8 @@ import { ClrPopoverToggleService } from '../../../../utils/popover/providers/pop
         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>
   `,
@@ -59,6 +59,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 { DetailService } from './providers/detail.service';
 
       <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>
@@ -382,6 +385,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) {