fix(mat/paginator): fix focus issues with paginator buttons (angular#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

Author: DBowen33

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"

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';
   }