Accessibility: Problem auto focusing on AG-Grid (inside Router-Outlet/Child Component) when navigating from App Component Menu Button

Viewed 16

I have used several methods.

OnCellClicked in Ag-Grid has the functions:

var firstCol = params.columnApi.getAllDisplayedColumns()[0];

params.api.ensureColumnVisible(firstCol);

Also tried referencing the AG-Grid with a ViewComponent Tag with its ID

<ag-grid-angular #agGrid 
        style="height: 740px; width: 100%;"
        class="ag-theme-balham"
        multiSortKey="ctrl"
        rowSelection="single"
        rowModelType="serverSide"
        [modules]="modules"
        [columnDefs]="columnDefs"
        [defaultColDef]="defaultColDef"
        [rowData]="rowDataServerSide"
        [animateRows]="true"
        [getRowHeight]="getRowHeight"
        [ensureDomOrder]="true"
        [suppressColumnVirtualisation]="true"
        [pagination]="true"
        (modelUpdated)="onModelUpdated($event)"
        [paginationPageSize]="paginationPageSize"
        (firstDataRendered)="onFirstDataRendered($event)"
        [enableCellChangeFlash]="true"
        (gridReady)="onGridReady($event)"
        (cellClicked)="onCellClicked($event)"
        (cellKeyPress)="onCellKeyPress($event)"
        [enableBrowserTooltips]="true"
        [statusBar]="statusBar"
        [frameworkComponents]="frameworkComponents"
        (cellFocused)="onCellFocused($event)"
        (cellKeyDown)="onCellKeyDown($event)"
        [tabToNextCell]="onTabToNextCell"
        [navigateToNextCell]="onNavigateToNextCell">
      </ag-grid-angular>

@ViewChildren('agGrid')

public agGrid: any;

this.agGrid.first._nativeElement.focus();

Have also tried disabling [autofocus] on the button via html properties.

This does not work either. I read in an article that when you navigate from a menu button, it auto focuses the menu option button. How do I get Angular to focus on the agGrid which is located inside the router-outlet after clicking a menu button and navigating to the ag-grid component?

<mat-sidenav-container *ngIf="!centurionPreview" class="sidenav-container">
<mat-sidenav #drawer class="sideNav" fixedInViewport *ngIf="(isHandset$ | async)"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="(isHandset$ | async) === false"
    (click)="toggleSidenav()">
    <mat-toolbar>Menu</mat-toolbar>
<mat-nav-list #sideMenu class="side_menu">
      <button 
        [disabled]="!navPerms.Library.functional"
        [hidden]="!navPerms.Library.enabled"
        [matMenuTriggerFor]="library"
        mat-button>Library</button>
      <mat-menu #library="matMenu">
        <button *ngFor="let item of navPerms.Library.children"
          [attr.aria-label]="getName(item.id) + 'Button'"
          [hidden]="!item.functional || !item.enabled"
          [disabled]="!item.functional || !item.enabled"
          (click)="goToEntityPage(item.id)"
          mat-menu-item>{{getName(item.id)}}
        </button>
      </mat-menu>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar>
      <button type="button" (click)="toggleSidenav()"
        *ngIf="currentUser && (isHandset$ | async)">
        <mat-icon aria-label="Side Navigation Toggle Icon">Menu</mat-icon>
      </button>
      <div *ngIf="currentUser && !(isHandset$ | async)">
        <button
          [disabled]="!navPerms.Library.functional"
          [hidden]="!navPerms.Library.enabled"
          [matMenuTriggerFor]="libraryMenu"
          mat-button>Library</button>
        <mat-menu #libraryMenu="matMenu">
          <button *ngFor="let item of navPerms.Library.children"
            [attr.aria-label]="getName(item.id) + 'Button'"
            [hidden]="!item.functional || !item.enabled"
            [disabled]="!item.functional || !item.enabled"
            (click)="goToEntityPage(item.id)"
            mat-menu-item>{{getName(item.id)}}
          </button>
        </mat-menu>
 </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>
<!-- Add Content Here -->
<div #mainContent style="height:88%;width:100%;">
  <router-outlet></router-outlet>
</div>
0 Answers
Related