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

…eader (#1386)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [x] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: [CDE-252](https://jira.eng.vmware.com/browse/CDE-252)

## What is the new behavior?
Removed the aria-label and added clr-sr-only text, which is now
announced by the screenreader in NVDA browse mode.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information
Also fixed issue related to
[CDE-1411](https://jira.eng.vmware.com/browse/CDE-1411), for v17. It was
fixed only for v15 & v16 previously.

---------

Co-authored-by: Andrea Fernandes <andreaf1@vmware.com>

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>

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

@@ -753,13 +753,12 @@ export default function (): void {
  expect(actionOverflowCell.length).toEqual(0);
  });
 
- it('should have aria-label with value `Select one of actionable rows`', function () {
+ it('should have screen reader only text with value `Select one of actionable rows`', function () {
  context = this.create(ClrDatagrid, ActionableRowTest);
  context.getClarityProvider(RowActionService);
  expect(
- context.clarityElement
- .querySelector('.datagrid-header .datagrid-column.datagrid-row-actions')
- .getAttribute('aria-label')
+ context.clarityElement.querySelector('.datagrid-header .datagrid-column.datagrid-row-actions .clr-sr-only')
+ .textContent
  ).toBe('Select one of actionable rows');
  });
  });
@@ -805,9 +804,9 @@ export default function (): void {
  const context = this.create(ClrDatagrid, ExpandableRowTest);
  context.getClarityProvider(RowActionService);
  expect(
- context.clarityElement
- .querySelector('.datagrid-header .datagrid-column.datagrid-expandable-caret')
-  .getAttribute('aria-label')
+ context.clarityElement.querySelector(
+ '.datagrid-header .datagrid-column.datagrid-expandable-caret .clr-sr-only'
+ ).textContent
  ).toBe('Expand one of the rows');
  });
  });