fix(material/paginator): fix issue with paginator focus

src/material/paginator/paginator.ts

@@ -105,6 +105,7 @@ let nextUniqueId = 0;
   host: {
     'class': 'mat-mdc-paginator',
     'role': 'group',
+    '(keydown)': '_focusPreviousOrNextIfDisabled($event)',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -118,6 +119,12 @@ export class MatPaginator implements OnInit, OnDestroy {
   /** ID for the DOM node containing the paginator's items per page label. */
   readonly _pageSizeLabelId = `mat-paginator-page-size-label-${nextUniqueId++}`;
 
+  /** MDC class names of paginator buttons. */
+  readonly _pageNext = 'mat-mdc-paginator-navigation-next';
+  readonly _pagePrevious = 'mat-mdc-paginator-navigation-previous';
+  readonly _pageFirst = 'mat-mdc-paginator-navigation-first';
+  readonly _pageLast = 'mat-mdc-paginator-navigation-last';
+
   private _intlChanges: Subscription;
   private _isInitialized = false;
   private _initializedStream = new ReplaySubject<void>(1);
@@ -300,6 +307,43 @@ export class MatPaginator implements OnInit, OnDestroy {
     return Math.ceil(this.length / this.pageSize);
   }
 
+  /**
+   * Handle keyboard Enter event for the Paginator. Keeps focus on appropriate paginator button
+   * whenever next, previous, first, or last button becomes disabled.
+   * @param event The keyboard event to be handled.
+   */
+  _focusPreviousOrNextIfDisabled(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      const currentElement = event.target as HTMLButtonElement;
+
+      /**
+       * setTimeout is used to give DOM time to update currentElement (paginator buttons)
+       * to see if it's disabled or not.
+       */
+      setTimeout(() => {
+        event.preventDefault();
+        if (currentElement.disabled && currentElement.classList.contains(this._pageNext)) {
+          const previousElement = currentElement.previousElementSibling as HTMLButtonElement;
+          previousElement?.focus();
+        } else if (
+          currentElement.disabled &&
+          currentElement.classList.contains(this._pagePrevious)
+        ) {
+          const nextElement = currentElement.nextElementSibling as HTMLButtonElement;
+          nextElement?.focus();
+        } else if (currentElement.disabled && currentElement.classList.contains(this._pageFirst)) {
+          const nextElement = currentElement.nextElementSibling
+            ?.nextElementSibling as HTMLButtonElement;
+          nextElement?.focus();
+        } else if (currentElement.disabled && currentElement.classList.contains(this._pageLast)) {
+          const previousElement = currentElement.previousElementSibling
+            ?.previousElementSibling as HTMLButtonElement;
+          previousElement?.focus();
+        }
+      }, 100);
+    }
+  }
+
   /**
    * Changes the page size so that the first item displayed on the page will still be
    * displayed using the new page size.

tools/public_api_guard/material/paginator.md

@@ -40,6 +40,7 @@ export class MatPaginator implements OnInit, OnDestroy {
     disabled: boolean;
     _displayedPageSizeOptions: number[];
     firstPage(): void;
+    _focusPreviousOrNextIfDisabled(event: KeyboardEvent): void;
     _formFieldAppearance?: MatFormFieldAppearance;
     getNumberOfPages(): number;
     hasNextPage(): boolean;
@@ -70,8 +71,15 @@ export class MatPaginator implements OnInit, OnDestroy {
     // (undocumented)
     ngOnInit(): void;
     readonly page: EventEmitter<PageEvent>;
+    // (undocumented)
+    readonly _pageFirst = "mat-mdc-paginator-navigation-first";
     get pageIndex(): number;
     set pageIndex(value: number);
+    // (undocumented)
+    readonly _pageLast = "mat-mdc-paginator-navigation-last";
+    readonly _pageNext = "mat-mdc-paginator-navigation-next";
+    // (undocumented)
+    readonly _pagePrevious = "mat-mdc-paginator-navigation-previous";
     get pageSize(): number;
     set pageSize(value: number);
     readonly _pageSizeLabelId: string;