fix(MatButtonToggle): use radio pattern for single select Mat toggle …

…button group
clamli · Jan 30, 2024 · aeb2144 · aeb2144
1 parent 2455a42
commit aeb2144
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 17 deletions.
diff --git a/src/dev-app/button-toggle/button-toggle-demo.html b/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>

diff --git a/src/material/button-toggle/button-toggle.html b/src/material/button-toggle/button-toggle.html
@@ -1,17 +1,16 @@
-<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 #button class="mat-button-toggle-button mat-focus-indicator"
+  [type]="type"
+  [id]="buttonId"
+  [attr.tabindex]="disabled ? -1 : tabIndex"
+  [attr.aria-pressed]="_getAriaPressed()"
+  [disabled]="disabled || null"
+  [attr.name]="_getButtonName()"
+  [attr.aria-label]="ariaLabel"
+  [attr.aria-labelledby]="ariaLabelledby"
+  (click)="_onButtonClick()">
+<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

diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss
@@ -272,4 +272,12 @@ $_standard-tokens: (
   &::-moz-focus-inner {
     border: 0;
   }
+
+  opacity: 0.01;
+  z-index: 100;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
diff --git a/src/material/button-toggle/button-toggle.ts b/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,6 +417,11 @@ 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>;
 
@@ -573,6 +578,15 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     return this.name || null;
   }
 
+  /** Get the aria-pressed attribute value. */
+  _getAriaPressed(): boolean | null {
+    // When the toggle stands alone, or in multiple selection mode, use aria-pressed attribute.
+    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;