fix(material/button-toggle): use radio pattern for single select Mat toggle button group

src/dev-app/button-toggle/button-toggle-demo.html

@@ -9,7 +9,7 @@
 <h1>Exclusive Selection</h1>
 
 <section>
-  <mat-button-toggle-group name="alignment" [vertical]="isVertical">
+  <mat-button-toggle-group name="standard alignment" [vertical]="isVertical">
     <mat-button-toggle value="left" [disabled]="isDisabled">
       <mat-icon>format_align_left</mat-icon>
     </mat-button-toggle>
@@ -26,7 +26,7 @@ <h1>Exclusive Selection</h1>
 </section>
 
 <section>
-  <mat-button-toggle-group appearance="legacy" name="alignment" [vertical]="isVertical">
+  <mat-button-toggle-group appearance="legacy" name="legacy alignment" [vertical]="isVertical">
     <mat-button-toggle value="left" [disabled]="isDisabled">
       <mat-icon>format_align_left</mat-icon>
     </mat-button-toggle>

src/material/button-toggle/button-toggle.html

@@ -1,20 +1,21 @@
-<button #button class="mat-button-toggle-button mat-focus-indicator"
-        type="button"
-        [id]="buttonId"
-        [attr.tabindex]="disabled ? -1 : tabIndex"
-        [attr.aria-pressed]="checked"
-        [disabled]="disabled || null"
-        [attr.name]="_getButtonName()"
-        [attr.aria-label]="ariaLabel"
-        [attr.aria-labelledby]="ariaLabelledby"
-        (click)="_onButtonClick()">
-  <span class="mat-button-toggle-label-content">
-    <ng-content></ng-content>
-  </span>
-</button>
+<input #input class="mat-button-toggle-button mat-focus-indicator cdk-visually-hidden"
+  [type]="type"
+  [id]="buttonId"
+  [attr.tabindex]="disabled ? -1 : tabIndex"
+  [attr.aria-pressed]="_getAriaPressed()"
+  [checked]="_getChecked()"
+  [disabled]="disabled || null"
+  [attr.name]="_getButtonName()"
+  [attr.aria-label]="ariaLabel"
+  [attr.aria-labelledby]="ariaLabelledby"
+  (click)="_onButtonClick()"
+  (change)="_onInteractionEvent($event)">
+<label class="mat-button-toggle-label-content" [for]="buttonId">
+  <ng-content></ng-content>
+</label>
 
 <span class="mat-button-toggle-focus-overlay"></span>
 <span class="mat-button-toggle-ripple" matRipple
-     [matRippleTrigger]="button"
+     [matRippleTrigger]="input"
      [matRippleDisabled]="this.disableRipple || this.disabled">
 </span>

src/material/button-toggle/button-toggle.scss

@@ -182,6 +182,10 @@ $_standard-tokens: (
   @include vendor-prefixes.user-select(none);
   display: inline-block;
   padding: $legacy-padding;
+  // Add the cursor effect on the label.
+  cursor: pointer;
+  // Center the content when needed.
+  margin: auto;
 
   @include token-utils.use-tokens($_legacy-tokens...) {
     @include token-utils.create-token-slot(line-height, height);
@@ -264,6 +268,9 @@ $_standard-tokens: (
   width: 100%; // Stretch the button in case the consumer set a custom width.
   cursor: pointer;
 
+  // Creates a new bounding box for the button and fill all available space.
+  position: absolute;
+
   .mat-button-toggle-disabled & {
     cursor: default;
   }

src/material/button-toggle/button-toggle.spec.ts

@@ -97,7 +97,7 @@ describe('MatButtonToggle with forms', () => {
       buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MatButtonToggle));
       buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
       innerButtons = buttonToggleDebugElements.map(
-        debugEl => debugEl.query(By.css('button'))!.nativeElement,
+        debugEl => debugEl.query(By.css('input'))!.nativeElement,
       );
 
       fixture.detectChanges();
@@ -256,7 +256,7 @@ describe('MatButtonToggle with forms', () => {
     const fixture = TestBed.createComponent(ButtonToggleGroupWithIndirectDescendantToggles);
     fixture.detectChanges();
 
-    const button = fixture.nativeElement.querySelector('.mat-button-toggle button');
+    const button = fixture.nativeElement.querySelector('.mat-button-toggle input');
     const groupDebugElement = fixture.debugElement.query(By.directive(MatButtonToggleGroup))!;
     const groupInstance =
       groupDebugElement.injector.get<MatButtonToggleGroup>(MatButtonToggleGroup);
@@ -359,7 +359,7 @@ describe('MatButtonToggle without forms', () => {
       buttonToggleNativeElements = buttonToggleDebugElements.map(debugEl => debugEl.nativeElement);
 
       buttonToggleLabelElements = fixture.debugElement
-        .queryAll(By.css('button'))
+        .queryAll(By.css('input'))
         .map(debugEl => debugEl.nativeElement);
 
       buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
@@ -401,7 +401,7 @@ describe('MatButtonToggle without forms', () => {
     });
 
     it('should disable the underlying button when the group is disabled', () => {
-      const buttons = buttonToggleNativeElements.map(toggle => toggle.querySelector('button')!);
+      const buttons = buttonToggleNativeElements.map(toggle => toggle.querySelector('input')!);
 
       expect(buttons.every(input => input.disabled)).toBe(false);
 
@@ -595,7 +595,7 @@ describe('MatButtonToggle without forms', () => {
       buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MatButtonToggle));
       buttonToggleNativeElements = buttonToggleDebugElements.map(debugEl => debugEl.nativeElement);
       buttonToggleLabelElements = fixture.debugElement
-        .queryAll(By.css('button'))
+        .queryAll(By.css('input'))
         .map(debugEl => debugEl.nativeElement);
       buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
     }));
@@ -612,7 +612,7 @@ describe('MatButtonToggle without forms', () => {
       expect(buttonToggleInstances.every(buttonToggle => !buttonToggle.checked)).toBe(true);
 
       const nativeCheckboxLabel = buttonToggleDebugElements[0].query(
-        By.css('button'),
+        By.css('input'),
       )!.nativeElement;
 
       nativeCheckboxLabel.click();
@@ -638,7 +638,7 @@ describe('MatButtonToggle without forms', () => {
 
     it('should check a button toggle upon interaction with underlying native checkbox', () => {
       const nativeCheckboxButton = buttonToggleDebugElements[0].query(
-        By.css('button'),
+        By.css('input'),
       )!.nativeElement;
 
       nativeCheckboxButton.click();
@@ -722,7 +722,7 @@ describe('MatButtonToggle without forms', () => {
       )!.nativeElement;
       buttonToggleInstance = buttonToggleDebugElement.componentInstance;
       buttonToggleButtonElement = buttonToggleNativeElement.querySelector(
-        'button',
+        'input',
       )! as HTMLButtonElement;
     }));
 
@@ -761,7 +761,7 @@ describe('MatButtonToggle without forms', () => {
     }));
 
     it('should focus on underlying input element when focus() is called', () => {
-      const nativeButton = buttonToggleDebugElement.query(By.css('button'))!.nativeElement;
+      const nativeButton = buttonToggleDebugElement.query(By.css('input'))!.nativeElement;
       expect(document.activeElement).not.toBe(nativeButton);
 
       buttonToggleInstance.focus();
@@ -790,7 +790,7 @@ describe('MatButtonToggle without forms', () => {
       const fixture = TestBed.createComponent(StandaloneButtonToggle);
       const checkboxDebugElement = fixture.debugElement.query(By.directive(MatButtonToggle))!;
       const checkboxNativeElement = checkboxDebugElement.nativeElement;
-      const buttonElement = checkboxNativeElement.querySelector('button') as HTMLButtonElement;
+      const buttonElement = checkboxNativeElement.querySelector('input') as HTMLButtonElement;
 
       fixture.detectChanges();
       expect(buttonElement.hasAttribute('aria-label')).toBe(false);
@@ -800,7 +800,7 @@ describe('MatButtonToggle without forms', () => {
       const fixture = TestBed.createComponent(ButtonToggleWithAriaLabel);
       const checkboxDebugElement = fixture.debugElement.query(By.directive(MatButtonToggle))!;
       const checkboxNativeElement = checkboxDebugElement.nativeElement;
-      const buttonElement = checkboxNativeElement.querySelector('button') as HTMLButtonElement;
+      const buttonElement = checkboxNativeElement.querySelector('input') as HTMLButtonElement;
 
       fixture.detectChanges();
       expect(buttonElement.getAttribute('aria-label')).toBe('Super effective');
@@ -825,7 +825,7 @@ describe('MatButtonToggle without forms', () => {
       const fixture = TestBed.createComponent(ButtonToggleWithAriaLabelledby);
       checkboxDebugElement = fixture.debugElement.query(By.directive(MatButtonToggle))!;
       checkboxNativeElement = checkboxDebugElement.nativeElement;
-      buttonElement = checkboxNativeElement.querySelector('button') as HTMLButtonElement;
+      buttonElement = checkboxNativeElement.querySelector('input') as HTMLButtonElement;
 
       fixture.detectChanges();
       expect(buttonElement.getAttribute('aria-labelledby')).toBe('some-id');
@@ -835,7 +835,7 @@ describe('MatButtonToggle without forms', () => {
       const fixture = TestBed.createComponent(StandaloneButtonToggle);
       checkboxDebugElement = fixture.debugElement.query(By.directive(MatButtonToggle))!;
       checkboxNativeElement = checkboxDebugElement.nativeElement;
-      buttonElement = checkboxNativeElement.querySelector('button') as HTMLButtonElement;
+      buttonElement = checkboxNativeElement.querySelector('input') as HTMLButtonElement;
 
       fixture.detectChanges();
       expect(buttonElement.getAttribute('aria-labelledby')).toBe(null);
@@ -847,7 +847,7 @@ describe('MatButtonToggle without forms', () => {
       const fixture = TestBed.createComponent(ButtonToggleWithTabindex);
       fixture.detectChanges();
 
-      const button = fixture.nativeElement.querySelector('.mat-button-toggle button');
+      const button = fixture.nativeElement.querySelector('.mat-button-toggle input');
 
       expect(button.getAttribute('tabindex')).toBe('3');
     });
@@ -866,7 +866,7 @@ describe('MatButtonToggle without forms', () => {
       fixture.detectChanges();
 
       const host = fixture.nativeElement.querySelector('.mat-button-toggle');
-      const button = host.querySelector('button');
+      const button = host.querySelector('input');
 
       expect(document.activeElement).not.toBe(button);
 
@@ -891,7 +891,7 @@ describe('MatButtonToggle without forms', () => {
     const hostNode: HTMLElement = fixture.nativeElement.querySelector('.mat-button-toggle');
 
     expect(hostNode.hasAttribute('name')).toBe(false);
-    expect(hostNode.querySelector('button')!.getAttribute('name')).toBe('custom-name');
+    expect(hostNode.querySelector('input')!.getAttribute('name')).toBe('custom-name');
   });
 
   it(

src/material/button-toggle/button-toggle.ts

@@ -106,8 +106,8 @@ export class MatButtonToggleChange {
     {provide: MAT_BUTTON_TOGGLE_GROUP, useExisting: MatButtonToggleGroup},
   ],
   host: {
-    'role': 'group',
     'class': 'mat-button-toggle-group',
+    '[role]': "multiple ? 'group' : 'radiogroup'",
     '[attr.aria-disabled]': 'disabled',
     '[class.mat-button-toggle-vertical]': 'vertical',
     '[class.mat-button-toggle-group-appearance-standard]': 'appearance === "standard"',
@@ -417,8 +417,13 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
    */
   @Input('aria-labelledby') ariaLabelledby: string | null = null;
 
+  /** Type of the button toggle. Either 'radio' or 'button'. */
+  get type(): string {
+    return this._isSingleSelector() ? 'radio' : 'button';
+  }
+
   /** Underlying native `button` element. */
-  @ViewChild('button') _buttonElement: ElementRef<HTMLButtonElement>;
+  @ViewChild('input') _inputElement: ElementRef<HTMLInputElement>;
 
   /** The parent button toggle group (exclusive selection). Optional. */
   buttonToggleGroup: MatButtonToggleGroup;
@@ -536,7 +541,7 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
 
   /** Focuses the button. */
   focus(options?: FocusOptions): void {
-    this._buttonElement.nativeElement.focus(options);
+    this._inputElement.nativeElement.focus(options);
   }
 
   /** Checks the button toggle due to an interaction with the underlying native button. */
@@ -554,6 +559,15 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     this.change.emit(new MatButtonToggleChange(this, this.value));
   }
 
+  /**
+   * Stop propagation on the change event.
+   * Otherwise the change event, from the input element, will bubble up and
+   * emit its event object to the `change` output.
+   */
+  _onInteractionEvent(event: Event) {
+    event.stopPropagation();
+  }
+
   /**
    * Marks the button toggle as needing checking for change detection.
    * This method is exposed because the parent button toggle group will directly
@@ -573,6 +587,24 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     return this.name || null;
   }
 
+  /** Get the aria-pressed attribute value. */
+  _getAriaPressed(): boolean | null {
+    // When the toggle button stands alone, or in multiple selection mode, use aria-pressed attribute.
+    if (!this._isSingleSelector()) {
+      return this.checked;
+    }
+    return null;
+  }
+
+  /** Get the check property value. */
+  _getChecked(): boolean | null {
+    // When the toggle button is in single selection mode, use checked property.
+    if (this._isSingleSelector()) {
+      return this.checked;
+    }
+    return null;
+  }
+
   /** Whether the toggle is in single selection mode. */
   private _isSingleSelector(): boolean {
     return this.buttonToggleGroup && !this.buttonToggleGroup.multiple;

src/material/button-toggle/testing/button-toggle-harness.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {ComponentHarness, HarnessPredicate, parallel} from '@angular/cdk/testing';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {MatButtonToggleAppearance} from '@angular/material/button-toggle';
 import {ButtonToggleHarnessFilters} from './button-toggle-harness-filters';
@@ -43,10 +43,14 @@ export class MatButtonToggleHarness extends ComponentHarness {
       });
   }
 
-  /** Gets a boolean promise indicating if the button toggle is checked. */
+  /** Gets a boolean promise indicating if the button toggle is checked or pressed. */
   async isChecked(): Promise<boolean> {
-    const checked = (await this._button()).getAttribute('aria-pressed');
-    return coerceBooleanProperty(await checked);
+    const button = await this._button();
+    const [checked, pressed] = await parallel(() => [
+      button.getProperty<boolean>('checked'),
+      button.getAttribute('aria-pressed'),
+    ]);
+    return coerceBooleanProperty(pressed) || coerceBooleanProperty(checked);
   }
 
   /** Gets a boolean promise indicating if the button toggle is disabled. */

tools/public_api_guard/material/button-toggle.md

@@ -34,7 +34,6 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     set appearance(value: MatButtonToggleAppearance);
     ariaLabel: string;
     ariaLabelledby: string | null;
-    _buttonElement: ElementRef<HTMLButtonElement>;
     get buttonId(): string;
     buttonToggleGroup: MatButtonToggleGroup;
     readonly change: EventEmitter<MatButtonToggleChange>;
@@ -44,8 +43,10 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     set disabled(value: boolean);
     disableRipple: boolean;
     focus(options?: FocusOptions): void;
+    _getAriaPressed(): boolean | null;
     _getButtonName(): string | null;
     id: string;
+    _inputElement: ElementRef<HTMLInputElement>;
     _markForCheck(): void;
     name: string;
     // (undocumented)
@@ -61,7 +62,9 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     // (undocumented)
     ngOnInit(): void;
     _onButtonClick(): void;
+    _onInteractionEvent(event: Event): void;
     tabIndex: number | null;
+    get type(): string;
     value: any;
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<MatButtonToggle, "mat-button-toggle", ["matButtonToggle"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;