fix(a11y): datagrid aria-label in table header is not announced by sc…

…reen reader

projects/angular/src/data/datagrid/datagrid-row.html

@@ -118,7 +118,11 @@
  <clr-spinner *ngIf="expand.loading" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>
  </ng-container>
  </div>
- <div *ngIf="detailService.enabled" class="datagrid-detail-caret datagrid-fixed-column datagrid-cell">
+ <div
+ *ngIf="detailService.enabled"
+ class="datagrid-detail-caret datagrid-fixed-column datagrid-cell"
+ role="gridcell"
+ >
  <button
  (click)="detailService.toggle(item, detailButton)"
  type="button"

projects/angular/src/data/datagrid/datagrid.html

@@ -45,26 +45,26 @@
  role="columnheader"
  class="datagrid-column datagrid-select datagrid-fixed-column"
  *ngIf="selection.selectionType === SELECTION_TYPE.Single"
- [attr.aria-label]="clrDgSingleSelectionAriaLabel"
  >
+ <div class="clr-sr-only">{{clrDgSingleSelectionAriaLabel}}</div>
  <div class="datagrid-column-separator"></div>
  </div>
  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->
  <div
  role="columnheader"
  class="datagrid-column datagrid-row-actions datagrid-fixed-column"
  *ngIf="rowActionService.hasActionableRow"
- [attr.aria-label]="clrDgSingleActionableAriaLabel"
  >
+ <div class="clr-sr-only">{{clrDgSingleActionableAriaLabel}}</div>
  <div class="datagrid-column-separator"></div>
  </div>
  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->
  <div
  role="columnheader"
  class="datagrid-column datagrid-expandable-caret datagrid-fixed-column"
  *ngIf="expandableRows.hasExpandableRow || detailService.enabled"
- [attr.aria-label]="clrDetailExpandableAriaLabel"
  >
+ <div class="clr-sr-only">{{clrDetailExpandableAriaLabel}}</div>
  <div class="datagrid-column-separator"></div>
  </div>
  </div>