fix(material/paginator): prevent keyboard nav to disabled buttons (#30627)

Author: andrewseguin

src/material/button/button-base.ts

@@ -129,7 +129,9 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
   /**
    * Natively disabled buttons prevent focus and any pointer events from reaching the button.
    * In some scenarios this might not be desirable, because it can prevent users from finding out
-   * why the button is disabled (e.g. via tooltip).
+   * why the button is disabled (e.g. via tooltip). This is also useful for buttons that may
+   * become disabled when activated, which would cause focus to be transferred to the document
+   * body instead of remaining on the button.
    *
    * Enabling this input will change the button so that it is styled to be disabled and will be
    * marked as `aria-disabled`, but it will allow the button to receive events and focus.

src/material/paginator/paginator.html

@@ -41,6 +41,12 @@
         {{_intl.getRangeLabel(pageIndex, pageSize, length)}}
       </div>
 
+      <!--
+      The buttons use `disabledInteractive` so that they can retain focus if they become disabled,
+      otherwise focus is moved to the document body. However, users should not be able to navigate
+      into these buttons, so `tabindex` is set to -1 when disabled.
+      -->
+
       @if (showFirstLastButtons) {
         <button matIconButton type="button"
                 class="mat-mdc-paginator-navigation-first"
@@ -50,6 +56,7 @@
                 [matTooltipDisabled]="_previousButtonsDisabled()"
                 matTooltipPosition="above"
                 [disabled]="_previousButtonsDisabled()"
+                [tabindex]="_previousButtonsDisabled() ? -1 : null"
                 disabledInteractive>
           <svg class="mat-mdc-paginator-icon"
               viewBox="0 0 24 24"
@@ -67,6 +74,7 @@
               [matTooltipDisabled]="_previousButtonsDisabled()"
               matTooltipPosition="above"
               [disabled]="_previousButtonsDisabled()"
+              [tabindex]="_previousButtonsDisabled() ? -1 : null"
               disabledInteractive>
         <svg class="mat-mdc-paginator-icon"
              viewBox="0 0 24 24"
@@ -83,6 +91,7 @@
               [matTooltipDisabled]="_nextButtonsDisabled()"
               matTooltipPosition="above"
               [disabled]="_nextButtonsDisabled()"
+              [tabindex]="_nextButtonsDisabled() ? -1 : null"
               disabledInteractive>
         <svg class="mat-mdc-paginator-icon"
              viewBox="0 0 24 24"
@@ -100,6 +109,7 @@
                 [matTooltipDisabled]="_nextButtonsDisabled()"
                 matTooltipPosition="above"
                 [disabled]="_nextButtonsDisabled()"
+                [tabindex]="_nextButtonsDisabled() ? -1 : null"
                 disabledInteractive>
           <svg class="mat-mdc-paginator-icon"
               viewBox="0 0 24 24"

src/material/paginator/paginator.spec.ts

@@ -568,19 +568,27 @@ describe('MatPaginator', () => {
 
     expect(select.disabled).toBe(false);
     expect(getPreviousButton(fixture).hasAttribute('disabled')).toBe(false);
+    expect(getPreviousButton(fixture).hasAttribute('tabindex')).toBe(false);
     expect(getNextButton(fixture).hasAttribute('disabled')).toBe(false);
+    expect(getNextButton(fixture).hasAttribute('tabindex')).toBe(false);
     expect(getFirstButton(fixture).hasAttribute('disabled')).toBe(false);
+    expect(getFirstButton(fixture).hasAttribute('tabindex')).toBe(false);
     expect(getLastButton(fixture).hasAttribute('disabled')).toBe(false);
+    expect(getLastButton(fixture).hasAttribute('tabindex')).toBe(false);
 
     fixture.componentInstance.disabled = true;
     fixture.changeDetectorRef.markForCheck();
     fixture.detectChanges();
 
     expect(select.disabled).toBe(true);
     expect(getPreviousButton(fixture).hasAttribute('aria-disabled')).toBe(true);
+    expect(getPreviousButton(fixture).getAttribute('tabindex')).toBe('-1');
     expect(getNextButton(fixture).hasAttribute('aria-disabled')).toBe(true);
+    expect(getNextButton(fixture).getAttribute('tabindex')).toBe('-1');
     expect(getFirstButton(fixture).hasAttribute('aria-disabled')).toBe(true);
+    expect(getFirstButton(fixture).getAttribute('tabindex')).toBe('-1');
     expect(getLastButton(fixture).hasAttribute('aria-disabled')).toBe(true);
+    expect(getLastButton(fixture).getAttribute('tabindex')).toBe('-1');
   });
 
   it('should be able to configure the default options via a provider', () => {