From 8f0369a27faa7cd6758d78a0a4e1c40811747e49 Mon Sep 17 00:00:00 2001
From: Denis Bowen <42016383+DBowen33@users.noreply.github.com>
Date: Thu, 3 Oct 2024 16:27:29 +0000
Subject: [PATCH] fix(mat/paginator): fix focus issues with paginator buttons
 (#29379)

* fix(material/paginator): fix focus issues with paginator buttons

fixed to where if paginator button gets disabled while focused, focus
will go to next appropriat button

fixes b/286098030

* fix(material/paginator): remove console logs

removed console logs

fixes b/286098030

* fix(material/paginator): update api

update api

fixes b/286098030

* fix(material/paginator): fix comment

fix comment

fixes #286098030

* fix(material/paginator): add disabled interactive attribute to paginator buttons

added disabledInteractive to prevent focus from going to body whenever button becomes disabled

fixes b/286098030

* fix(material/paginator): fix tests

fix broken tests

fixes b/286098030

* fix(material/paginator): fix more broken tests

fixed more broken tests

fixes b/286098030

* fix(material/paginator): fix spec test

changed paginator harness test to look for aria-disabled instead of disabled

fixes b/286098030

* fix(material/paginator): fix unit tests

fix unit tests

fixes b/286098030

* fix(material/paginator): fix style issue

fix style issue

fixes b/286098030

* fix(material/datepicker): remove disabled class

remove class

fixes b/286098030
---
 src/material/paginator/paginator.html               | 12 ++++++++----
 src/material/paginator/paginator.scss               |  2 +-
 src/material/paginator/paginator.spec.ts            |  8 ++++----
 src/material/paginator/testing/paginator-harness.ts |  4 ++--
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/material/paginator/paginator.html b/src/material/paginator/paginator.html
index 2e3e31147518..208966624e56 100644
--- a/src/material/paginator/paginator.html
+++ b/src/material/paginator/paginator.html
@@ -49,7 +49,8 @@
                 [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"
@@ -65,7 +66,8 @@
               [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"
@@ -80,7 +82,8 @@
               [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"
@@ -96,7 +99,8 @@
                 [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"
diff --git a/src/material/paginator/paginator.scss b/src/material/paginator/paginator.scss
index f9c6ec8bedfa..39d8d9a801e6 100644
--- a/src/material/paginator/paginator.scss
+++ b/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);
     }
   }
diff --git a/src/material/paginator/paginator.spec.ts b/src/material/paginator/paginator.spec.ts
index 16ebd216db6a..2f35fd1e7742 100644
--- a/src/material/paginator/paginator.spec.ts
+++ b/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', () => {
diff --git a/src/material/paginator/testing/paginator-harness.ts b/src/material/paginator/testing/paginator-harness.ts
index a31c7284ad31..448a8a5fda07 100644
--- a/src/material/paginator/testing/paginator-harness.ts
+++ b/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';
   }