fix(a11y): return focus to datagrid detail pane toggle button after e…

…sc with zoom 250% (#1408)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] 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-2051](https://jira.eng.vmware.com/browse/CDE-2051)

## What is the new behavior?
Focus is returned to the button that opened the pane on ESC key in zoom
more than 250%.

## 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

---------

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

projects/angular/clarity.api.md

@@ -1471,8 +1471,6 @@ export class ClrDatagridDetailBody {
 export class ClrDatagridDetailHeader {
  constructor(detailService: DetailService, commonStrings: ClrCommonStringsService);
  // (undocumented)
- close(): void;
- // (undocumented)
  commonStrings: ClrCommonStringsService;
  // (undocumented)
  detailService: DetailService;

projects/angular/src/data/datagrid/datagrid-detail-header.ts

@@ -20,7 +20,12 @@ import { DetailService } from './providers/detail.service';
  <ng-content></ng-content>
  </div>
  <div class="datagrid-detail-pane-close">
- <button type="button" class="btn btn-link" (click)="close()" [attr.aria-label]="commonStrings.keys.close">
+ <button
+ type="button"
+ class="btn btn-link"
+ (click)="detailService.close()"
+ [attr.aria-label]="commonStrings.keys.close"
+ >
  <cds-icon shape="times"></cds-icon>
  </button>
  </div>
@@ -32,11 +37,4 @@ export class ClrDatagridDetailHeader {
  get titleId() {
  return `${this.detailService.id}-title`;
  }
-
- close(): void {
- this.detailService.close();
- // In the case of browser zoom greater than 250%, the detail pane toggle button is not visible on the page.
- // Wait for the detail pane to close, and return focus to the detail toggle button.
- setTimeout(() => this.detailService.returnFocus(), 0);
- }
 }

projects/angular/src/data/datagrid/providers/detail.service.ts

@@ -53,6 +53,9 @@ export class DetailService {
  this.toggleState = false;
  this._state.next(this.toggleState);
  this.modalStackService.trackModalClose(this);
+ // In the case of browser zoom greater than 250%, the detail pane toggle button is not visible on the page.
+ // Wait for the detail pane to close, and return focus to the detail toggle button.
+ setTimeout(() => this.returnFocus(), 0);
  }
 
  returnFocus() {