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
angular · Oct 3, 2024 · 8f0369a · 8f0369a
1 parent 5242169
commit 8f0369a
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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';
   }