feat(datagrid): include column title in filter toggle button aria-label

If your application localizes the `datagridFilterAriaLabel` string,
you will need to add the `{COLUMN}` placeholder to take advantage
of this feature. It will work without the placeholder, so this change
is backwards compatible.

VPAT-615

projects/angular/clarity.api.md

@@ -1468,8 +1468,8 @@ export class ClrDatagridDetailHeader {
 // Warning: (ae-forgotten-export) The symbol "CustomFilter" needs to be exported by the entry point index.d.ts
 //
 // @public
-export class ClrDatagridFilter<T = any> extends DatagridFilterRegistrar<T, ClrDatagridFilterInterface<T>> implements CustomFilter, OnDestroy {
-    constructor(_filters: FiltersProvider<T>, commonStrings: ClrCommonStringsService, smartToggleService: ClrPopoverToggleService, platformId: any);
+export class ClrDatagridFilter<T = any> extends DatagridFilterRegistrar<T, ClrDatagridFilterInterface<T>> implements CustomFilter, OnChanges, OnDestroy {
+    constructor(_filters: FiltersProvider<T>, commonStrings: ClrCommonStringsService, smartToggleService: ClrPopoverToggleService, platformId: any, elementRef: ElementRef<HTMLElement>);
     get active(): boolean;
     // (undocumented)
     anchor: ElementRef;
@@ -1482,6 +1482,8 @@ export class ClrDatagridFilter<T = any> extends DatagridFilterRegistrar<T, ClrDa
     // (undocumented)
     set customFilter(filter: ClrDatagridFilterInterface<T> | RegisteredFilter<T, ClrDatagridFilterInterface<T>>);
     // (undocumented)
+    ngOnChanges(): void;
+    // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
     get open(): boolean;
@@ -1493,6 +1495,8 @@ export class ClrDatagridFilter<T = any> extends DatagridFilterRegistrar<T, ClrDa
     // (undocumented)
     smartPosition: ClrPopoverPosition;
     // (undocumented)
+    toggleButtonAriaLabel: string;
+    // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrDatagridFilter<any>, "clr-dg-filter", never, { "open": "clrDgFilterOpen"; "customFilter": "clrDgFilter"; }, { "openChange": "clrDgFilterOpenChange"; }, never, ["*"]>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrDatagridFilter<any>, never>;

projects/angular/src/data/datagrid/datagrid-filter.spec.ts

@@ -42,7 +42,8 @@ export default function (): void {
           filterService,
           new ClrCommonStringsService(),
           toggleService,
-          'browser' as any
+          'browser' as any,
+          undefined
         );
       });
 
@@ -136,11 +137,9 @@ export default function (): void {
         expect(toggle.getAttribute('aria-expanded')).toBe('true');
       });
 
-      it('has a button with the correct common string for datagridFilterAriaLabel', function () {
+      it('has a button with the correct aria-label', function () {
         const toggle: HTMLButtonElement = context.clarityElement.querySelector('.datagrid-filter-toggle');
-        const commonStrings: ClrCommonStringsService =
-          context.fixture.debugElement.injector.get(ClrCommonStringsService);
-        expect(toggle.getAttribute('aria-label')).toBe(commonStrings.keys.datagridFilterAriaLabel);
+        expect(toggle.getAttribute('aria-label')).toBe('Toggle user filter');
       });
 
       it('has role and label on the filter dialog', function () {

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

@@ -11,6 +11,7 @@ import {
   EventEmitter,
   Inject,
   Input,
+  OnChanges,
   OnDestroy,
   Output,
   PLATFORM_ID,
@@ -44,7 +45,7 @@ import { DatagridFilterRegistrar } from './utils/datagrid-filter-registrar';
       class="datagrid-filter-toggle"
       type="button"
       #anchor
-      [attr.aria-label]="commonStrings.keys.datagridFilterAriaLabel"
+      [attr.aria-label]="toggleButtonAriaLabel"
       [attr.aria-expanded]="ariaExpanded"
       [attr.aria-controls]="popoverId"
       clrPopoverAnchor
@@ -79,7 +80,7 @@ import { DatagridFilterRegistrar } from './utils/datagrid-filter-registrar';
 })
 export class ClrDatagridFilter<T = any>
   extends DatagridFilterRegistrar<T, ClrDatagridFilterInterface<T>>
-  implements CustomFilter, OnDestroy
+  implements CustomFilter, OnChanges, OnDestroy
 {
   private subs: Subscription[] = [];
   ariaExpanded = false;
@@ -90,7 +91,8 @@ export class ClrDatagridFilter<T = any>
     _filters: FiltersProvider<T>,
     public commonStrings: ClrCommonStringsService,
     private smartToggleService: ClrPopoverToggleService,
-    @Inject(PLATFORM_ID) private platformId: any
+    @Inject(PLATFORM_ID) private platformId: any,
+    private elementRef: ElementRef<HTMLElement>
   ) {
     super(_filters);
     this.subs.push(
@@ -145,8 +147,29 @@ export class ClrDatagridFilter<T = any>
     return !!this.filter && this.filter.isActive();
   }
 
+  toggleButtonAriaLabel: string;
+
+  ngOnChanges() {
+    this.setToggleButtonAriaLabel();
+  }
+
   override ngOnDestroy(): void {
     super.ngOnDestroy();
     this.subs.forEach(sub => sub.unsubscribe());
   }
+
+  /**
+   * This is not in a getter to prevent "expression has changed after it was checked" errors.
+   * And it's more performant this way since it only runs on change.
+   */
+  private setToggleButtonAriaLabel() {
+    const columnElement = this.elementRef.nativeElement?.closest('clr-dg-column');
+    const columnTitleElement = columnElement?.querySelector('.datagrid-column-title');
+
+    const columnTitle = columnTitleElement?.textContent.trim().toLocaleLowerCase();
+
+    this.toggleButtonAriaLabel = this.commonStrings.parse(this.commonStrings.keys.datagridFilterAriaLabel, {
+      COLUMN: columnTitle || '',
+    });
+  }
 }

projects/angular/src/utils/i18n/common-strings.default.ts

@@ -49,7 +49,7 @@ export const commonStringsDefault: ClrCommonStrings = {
   singleSelectionAriaLabel: 'Single selection header',
   singleActionableAriaLabel: 'Single actionable header',
   detailExpandableAriaLabel: 'Toggle more row content',
-  datagridFilterAriaLabel: 'Toggle column filter',
+  datagridFilterAriaLabel: 'Toggle {COLUMN} filter',
   datagridFilterDialogAriaLabel: 'Filter dialog',
   columnSeparatorAriaLabel: 'Column resize handle',
   columnSeparatorDescription: 'Use left or right key to resize the column',