fix(mat/paginator): fix focus issues with paginator buttons

src/material/paginator/paginator.html

@@ -43,13 +43,14 @@
 
       @if (showFirstLastButtons) {
         <button mat-icon-button type="button"
-                class="mat-mdc-paginator-navigation-first"
+                class="mat-mdc-paginator-navigation-first mat-mdc-button-disabled-interactive"
                 (click)="firstPage()"
                 [attr.aria-label]="_intl.firstPageLabel"
                 [matTooltip]="_intl.firstPageLabel"
                 [matTooltipDisabled]="_previousButtonsDisabled()"
                 [matTooltipPosition]="'above'"
-                [disabled]="_previousButtonsDisabled()">
+                [disabled]="_previousButtonsDisabled()"
+                disabledInteractive>
           <svg class="mat-mdc-paginator-icon"
               viewBox="0 0 24 24"
               focusable="false"
@@ -59,13 +60,14 @@
         </button>
       }
       <button mat-icon-button type="button"
-              class="mat-mdc-paginator-navigation-previous"
+              class="mat-mdc-paginator-navigation-previous mat-mdc-button-disabled-interactive"
               (click)="previousPage()"
               [attr.aria-label]="_intl.previousPageLabel"
               [matTooltip]="_intl.previousPageLabel"
               [matTooltipDisabled]="_previousButtonsDisabled()"
               [matTooltipPosition]="'above'"
-              [disabled]="_previousButtonsDisabled()">
+              [disabled]="_previousButtonsDisabled()"
+              disabledInteractive>
         <svg class="mat-mdc-paginator-icon"
              viewBox="0 0 24 24"
              focusable="false"
@@ -74,13 +76,14 @@
         </svg>
       </button>
       <button mat-icon-button type="button"
-              class="mat-mdc-paginator-navigation-next"
+              class="mat-mdc-paginator-navigation-next mat-mdc-button-disabled-interactive"
               (click)="nextPage()"
               [attr.aria-label]="_intl.nextPageLabel"
               [matTooltip]="_intl.nextPageLabel"
               [matTooltipDisabled]="_nextButtonsDisabled()"
               [matTooltipPosition]="'above'"
-              [disabled]="_nextButtonsDisabled()">
+              [disabled]="_nextButtonsDisabled()"
+              disabledInteractive>
         <svg class="mat-mdc-paginator-icon"
              viewBox="0 0 24 24"
              focusable="false"
@@ -90,13 +93,14 @@
       </button>
       @if (showFirstLastButtons) {
         <button mat-icon-button type="button"
-                class="mat-mdc-paginator-navigation-last"
+                class="mat-mdc-paginator-navigation-last mat-mdc-button-disabled-interactive"
                 (click)="lastPage()"
                 [attr.aria-label]="_intl.lastPageLabel"
                 [matTooltip]="_intl.lastPageLabel"
                 [matTooltipDisabled]="_nextButtonsDisabled()"
                 [matTooltipPosition]="'above'"
-                [disabled]="_nextButtonsDisabled()">
+                [disabled]="_nextButtonsDisabled()"
+                disabledInteractive>
           <svg class="mat-mdc-paginator-icon"
               viewBox="0 0 24 24"
               focusable="false"

src/material/paginator/paginator.scss

@@ -119,7 +119,7 @@ $button-icon-size: 28px;
   ) {
     @include token-utils.create-token-slot(fill, enabled-icon-color);
 
-    .mat-mdc-icon-button[disabled] & {
+    .mat-mdc-icon-button[aria-disabled] & {
       @include token-utils.create-token-slot(fill, disabled-icon-color);
     }
   }

src/material/paginator/paginator.spec.ts

@@ -529,10 +529,10 @@ describe('MatPaginator', () => {
     fixture.detectChanges();
 
     expect(select.disabled).toBe(true);
-    expect(getPreviousButton(fixture).hasAttribute('disabled')).toBe(true);
-    expect(getNextButton(fixture).hasAttribute('disabled')).toBe(true);
-    expect(getFirstButton(fixture).hasAttribute('disabled')).toBe(true);
-    expect(getLastButton(fixture).hasAttribute('disabled')).toBe(true);
+    expect(getPreviousButton(fixture).hasAttribute('aria-disabled')).toBe(true);
+    expect(getNextButton(fixture).hasAttribute('aria-disabled')).toBe(true);
+    expect(getFirstButton(fixture).hasAttribute('aria-disabled')).toBe(true);
+    expect(getLastButton(fixture).hasAttribute('aria-disabled')).toBe(true);
   });
 
   it('should be able to configure the default options via a provider', () => {

src/material/paginator/testing/paginator-harness.ts

@@ -50,13 +50,13 @@ export class MatPaginatorHarness extends ComponentHarness {
 
   /** Returns whether or not the next page button is disabled. */
   async isNextPageDisabled(): Promise<boolean> {
-    const disabledValue = await (await this._nextButton()).getAttribute('disabled');
+    const disabledValue = await (await this._nextButton()).getAttribute('aria-disabled');
     return disabledValue == 'true';
   }
 
   /* Returns whether or not the previous page button is disabled. */
   async isPreviousPageDisabled(): Promise<boolean> {
-    const disabledValue = await (await this._previousButton()).getAttribute('disabled');
+    const disabledValue = await (await this._previousButton()).getAttribute('aria-disabled');
     return disabledValue == 'true';
   }