fix(material/button): combine MatButton and MatAnchor (#30492)

Currently we have two directives for each button variant: `MatButton` which applies to `button` elements and `MatButtonAnchor` which applies to anchors.

This is problematic in a couple of ways:
1. The styles, which can be non-trivial, are duplicated if both classes are used.
2. Users have to think about which class they're importing.

These changes combine the two classes to resolve the issues and simplify our setup.

BREAKING CHANGE:
`tabindex` values set as `[attr.tabindex]` set on a Material button might not work as expected. Use `tabindex` for static values, or `[tabindex]`/`[tabIndex]` for dynamic ones.

Author: crisbeto

src/material/button/button-base.ts

@@ -19,7 +19,6 @@ import {
   NgZone,
   numberAttribute,
   OnDestroy,
-  OnInit,
   Renderer2,
 } from '@angular/core';
 import {_StructuralStylesLoader, MatRippleLoader, ThemePalette} from '@angular/material/core';
@@ -52,8 +51,13 @@ export const MAT_BUTTON_HOST = {
   // wants to target all Material buttons.
   '[class.mat-mdc-button-base]': 'true',
   '[class]': 'color ? "mat-" + color : ""',
+  '[attr.tabindex]': '_getTabIndex()',
 };
 
+function transformTabIndex(value: unknown): number | undefined {
+  return value == null ? undefined : numberAttribute(value);
+}
+
 /** List of classes to add to buttons instances based on host attribute selector. */
 const HOST_SELECTOR_MDC_CLASS_PAIR: {attribute: string; mdcClasses: string[]}[] = [
   {
@@ -94,13 +98,18 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
   _animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
 
   private readonly _focusMonitor = inject(FocusMonitor);
+  private _cleanupClick: (() => void) | undefined;
+  private _renderer = inject(Renderer2);
 
   /**
    * Handles the lazy creation of the MatButton ripple.
    * Used to improve initial load time of large applications.
    */
   protected _rippleLoader: MatRippleLoader = inject(MatRippleLoader);
 
+  /** Whether the button is set on an anchor node. */
+  protected _isAnchor: boolean;
+
   /** Whether this button is a FAB. Used to apply the correct class on the ripple. */
   protected _isFab = false;
 
@@ -153,14 +162,28 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
   @Input({transform: booleanAttribute})
   disabledInteractive: boolean;
 
+  /** Tab index for the button. */
+  @Input({transform: transformTabIndex})
+  tabIndex: number;
+
+  /**
+   * Backwards-compatibility input that handles pre-existing `[tabindex]` bindings.
+   * @docs-private
+   */
+  @Input({alias: 'tabindex', transform: transformTabIndex})
+  set _tabindex(value: number) {
+    this.tabIndex = value;
+  }
+
   constructor(...args: unknown[]);
 
   constructor() {
     inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     const config = inject(MAT_BUTTON_CONFIG, {optional: true});
-    const element = this._elementRef.nativeElement;
+    const element: HTMLElement = this._elementRef.nativeElement;
     const classList = (element as HTMLElement).classList;
 
+    this._isAnchor = element.tagName === 'A';
     this.disabledInteractive = config?.disabledInteractive ?? false;
     this.color = config?.color ?? null;
     this._rippleLoader?.configureRipple(element, {className: 'mat-mdc-button-ripple'});
@@ -176,9 +199,16 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
 
   ngAfterViewInit() {
     this._focusMonitor.monitor(this._elementRef, true);
+
+    // Some internal tests depend on the timing of this,
+    // otherwise we could bind it in the constructor.
+    if (this._isAnchor) {
+      this._setupAsAnchor();
+    }
   }
 
   ngOnDestroy() {
+    this._cleanupClick?.();
     this._focusMonitor.stopMonitoring(this._elementRef);
     this._rippleLoader?.destroyRipple(this._elementRef.nativeElement);
   }
@@ -197,6 +227,10 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
       return this.ariaDisabled;
     }
 
+    if (this._isAnchor) {
+      return this.disabled || null;
+    }
+
     return this.disabled && this.disabledInteractive ? true : null;
   }
 
@@ -210,74 +244,30 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
       this.disableRipple || this.disabled,
     );
   }
-}
 
-/** Shared host configuration for buttons using the `<a>` tag. */
-export const MAT_ANCHOR_HOST = {
-  // Note that this is basically a noop on anchors,
-  // but it appears that some internal apps depend on it.
-  '[attr.disabled]': '_getDisabledAttribute()',
-  '[class.mat-mdc-button-disabled]': 'disabled',
-  '[class.mat-mdc-button-disabled-interactive]': 'disabledInteractive',
-  '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
+  protected _getTabIndex() {
+    if (this._isAnchor) {
+      return this.disabled && !this.disabledInteractive ? -1 : this.tabIndex;
+    }
+    return this.tabIndex;
+  }
 
-  // Note that we ignore the user-specified tabindex when it's disabled for
-  // consistency with the `mat-button` applied on native buttons where even
-  // though they have an index, they're not tabbable.
-  '[attr.tabindex]': 'disabled && !disabledInteractive ? -1 : tabIndex',
-  '[attr.aria-disabled]': '_getAriaDisabled()',
-  // MDC automatically applies the primary theme color to the button, but we want to support
-  // an unthemed version. If color is undefined, apply a CSS class that makes it easy to
-  // select and style this "theme".
-  '[class.mat-unthemed]': '!color',
-  // Add a class that applies to all buttons. This makes it easier to target if somebody
-  // wants to target all Material buttons.
-  '[class.mat-mdc-button-base]': 'true',
-  '[class]': 'color ? "mat-" + color : ""',
-};
+  private _setupAsAnchor() {
+    this._cleanupClick = this._ngZone.runOutsideAngular(() =>
+      this._renderer.listen(this._elementRef.nativeElement, 'click', (event: Event) => {
+        if (this.disabled) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+        }
+      }),
+    );
+  }
+}
 
+// tslint:disable:variable-name
 /**
  * Anchor button base.
  */
-@Directive()
-export class MatAnchorBase extends MatButtonBase implements OnInit, OnDestroy {
-  private _renderer = inject(Renderer2);
-  private _cleanupClick: () => void;
-
-  @Input({
-    transform: (value: unknown) => {
-      return value == null ? undefined : numberAttribute(value);
-    },
-  })
-  tabIndex: number;
-
-  ngOnInit(): void {
-    this._ngZone.runOutsideAngular(() => {
-      this._cleanupClick = this._renderer.listen(
-        this._elementRef.nativeElement,
-        'click',
-        this._haltDisabledEvents,
-      );
-    });
-  }
-
-  override ngOnDestroy(): void {
-    super.ngOnDestroy();
-    this._cleanupClick?.();
-  }
-
-  _haltDisabledEvents = (event: Event): void => {
-    // A disabled button shouldn't apply any actions
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  };
-
-  protected override _getAriaDisabled() {
-    if (this.ariaDisabled != null) {
-      return this.ariaDisabled;
-    }
-    return this.disabled || null;
-  }
-}
+export const MatAnchorBase = MatButtonBase;
+export type MatAnchorBase = MatButtonBase;
+// tslint:enable:variable-name

src/material/button/button.ts

@@ -7,7 +7,7 @@
  */
 
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
-import {MAT_ANCHOR_HOST, MAT_BUTTON_HOST, MatAnchorBase, MatButtonBase} from './button-base';
+import {MAT_BUTTON_HOST, MatButtonBase} from './button-base';
 
 /**
  * Material Design button component. Users interact with a button to perform an action.
@@ -21,17 +21,19 @@ import {MAT_ANCHOR_HOST, MAT_BUTTON_HOST, MatAnchorBase, MatButtonBase} from './
 @Component({
   selector: `
     button[mat-button], button[mat-raised-button], button[mat-flat-button],
-    button[mat-stroked-button]
+    button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button],
+    a[mat-stroked-button]
   `,
   templateUrl: 'button.html',
   styleUrls: ['button.css', 'button-high-contrast.css'],
   host: MAT_BUTTON_HOST,
-  exportAs: 'matButton',
+  exportAs: 'matButton, matAnchor',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatButton extends MatButtonBase {}
 
+// tslint:disable:variable-name
 /**
  * Material Design button component for anchor elements. Anchor elements are used to provide
  * links for the user to navigate across different routes or pages.
@@ -42,13 +44,6 @@ export class MatButton extends MatButtonBase {}
  * specification. `MatAnchor` additionally captures an additional "flat" appearance, which matches
  * "contained" but without elevation.
  */
-@Component({
-  selector: `a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]`,
-  exportAs: 'matButton, matAnchor',
-  host: MAT_ANCHOR_HOST,
-  templateUrl: 'button.html',
-  styleUrls: ['button.css', 'button-high-contrast.css'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MatAnchor extends MatAnchorBase {}
+export const MatAnchor = MatButton;
+export type MatAnchor = MatButton;
+// tslint:enable:variable-name

src/material/button/fab.ts

@@ -16,8 +16,7 @@ import {
   inject,
 } from '@angular/core';
 
-import {MatAnchor} from './button';
-import {MAT_ANCHOR_HOST, MAT_BUTTON_HOST, MatButtonBase} from './button-base';
+import {MAT_BUTTON_HOST, MatButtonBase} from './button-base';
 import {ThemePalette} from '@angular/material/core';
 
 /** Default FAB options that can be overridden. */
@@ -60,15 +59,15 @@ const defaults = MAT_FAB_DEFAULT_OPTIONS_FACTORY();
  * The `MatFabButton` class has two appearances: normal and extended.
  */
 @Component({
-  selector: `button[mat-fab]`,
+  selector: `button[mat-fab], a[mat-fab]`,
   templateUrl: 'button.html',
   styleUrl: 'fab.css',
   host: {
     ...MAT_BUTTON_HOST,
     '[class.mdc-fab--extended]': 'extended',
     '[class.mat-mdc-extended-fab]': 'extended',
   },
-  exportAs: 'matButton',
+  exportAs: 'matButton, matAnchor',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -94,11 +93,11 @@ export class MatFabButton extends MatButtonBase {
  * See https://material.io/components/buttons-floating-action-button/
  */
 @Component({
-  selector: `button[mat-mini-fab]`,
+  selector: `button[mat-mini-fab], a[mat-mini-fab]`,
   templateUrl: 'button.html',
   styleUrl: 'fab.css',
   host: MAT_BUTTON_HOST,
-  exportAs: 'matButton',
+  exportAs: 'matButton, matAnchor',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -116,66 +115,22 @@ export class MatMiniFabButton extends MatButtonBase {
   }
 }
 
+// tslint:disable:variable-name
 /**
  * Material Design floating action button (FAB) component for anchor elements. Anchor elements
  * are used to provide links for the user to navigate across different routes or pages.
  * See https://material.io/components/buttons-floating-action-button/
  *
  * The `MatFabAnchor` class has two appearances: normal and extended.
  */
-@Component({
-  selector: `a[mat-fab]`,
-  templateUrl: 'button.html',
-  styleUrl: 'fab.css',
-  host: {
-    ...MAT_ANCHOR_HOST,
-    '[class.mdc-fab--extended]': 'extended',
-    '[class.mat-mdc-extended-fab]': 'extended',
-  },
-  exportAs: 'matButton, matAnchor',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MatFabAnchor extends MatAnchor {
-  private _options = inject<MatFabDefaultOptions>(MAT_FAB_DEFAULT_OPTIONS, {optional: true});
-
-  override _isFab = true;
-
-  @Input({transform: booleanAttribute}) extended: boolean;
-
-  constructor(...args: unknown[]);
-
-  constructor() {
-    super();
-    this._options = this._options || defaults;
-    this.color = this._options!.color || defaults.color;
-  }
-}
+export const MatFabAnchor = MatFabButton;
+export type MatFabAnchor = MatFabButton;
 
 /**
  * Material Design mini floating action button (FAB) component for anchor elements. Anchor elements
  * are used to provide links for the user to navigate across different routes or pages.
  * See https://material.io/components/buttons-floating-action-button/
  */
-@Component({
-  selector: `a[mat-mini-fab]`,
-  templateUrl: 'button.html',
-  styleUrl: 'fab.css',
-  host: MAT_ANCHOR_HOST,
-  exportAs: 'matButton, matAnchor',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MatMiniFabAnchor extends MatAnchor {
-  private _options = inject<MatFabDefaultOptions>(MAT_FAB_DEFAULT_OPTIONS, {optional: true});
-
-  override _isFab = true;
-
-  constructor(...args: unknown[]);
-
-  constructor() {
-    super();
-    this._options = this._options || defaults;
-    this.color = this._options!.color || defaults.color;
-  }
-}
+export const MatMiniFabAnchor = MatMiniFabButton;
+export type MatMiniFabAnchor = MatMiniFabButton;
+// tslint:enable:variable-name