fix(material/core): add checkmark for single-select

Add checkmark to mat-option for single-select. Fix a11y issues where
selected state is visually communicated with color alone. Communicate
selection with both color and a checkmark indicator. Affect components
that use mat-option for single-selection, which include select and
autocomplete.

Add an `appearance` Input to mat-pseudo-checkbox. "full" appearance
renders a checkbox, which is the current behavior. Render "full"
appearance by default. "minimal" apperance renders only a checkmark.

Summary of API and behavior changes:
 - Add an `@Input appearance` to pseudo-checkbox with options for "full"
   and "minimal".
 - mat-option renders "minimal" appearance for single-select, which
   looks like a checkmark.
 - Select and autocomplete components display checkmark on selected
   option.

What's not changing:
 - does not affect multiple selection
 - mat-option renders "full" apperance by default, which is same as
   existing behavior

Fixes: #25961

Author: zarend

src/dev-app/checkbox/checkbox-demo.html

@@ -64,14 +64,29 @@ <h1>mat-checkbox: Basic Example</h1>
 </div>
 
 <h1>Pseudo checkboxes</h1>
-<mat-pseudo-checkbox></mat-pseudo-checkbox>
-<mat-pseudo-checkbox [disabled]="true"></mat-pseudo-checkbox>
+<div>
+  <h2>Full appearance</h2>
+  <mat-pseudo-checkbox></mat-pseudo-checkbox>
+  <mat-pseudo-checkbox [disabled]="true"></mat-pseudo-checkbox>
+
+  <mat-pseudo-checkbox state="checked"></mat-pseudo-checkbox>
+  <mat-pseudo-checkbox state="checked" [disabled]="true"></mat-pseudo-checkbox>
+
+  <mat-pseudo-checkbox state="indeterminate"></mat-pseudo-checkbox>
+  <mat-pseudo-checkbox state="indeterminate" [disabled]="true"></mat-pseudo-checkbox>
+<div>
+<div>
+  <h2>Minimal appearance</h2>
+  <mat-pseudo-checkbox appearance="minimal"></mat-pseudo-checkbox>
+  <mat-pseudo-checkbox appearance="minimal" [disabled]="true"></mat-pseudo-checkbox>
 
-<mat-pseudo-checkbox state="checked"></mat-pseudo-checkbox>
-<mat-pseudo-checkbox state="checked" [disabled]="true"></mat-pseudo-checkbox>
+  <mat-pseudo-checkbox appearance="minimal" state="checked"></mat-pseudo-checkbox>
+  <mat-pseudo-checkbox appearance="minimal" state="checked" [disabled]="true"></mat-pseudo-checkbox>
 
-<mat-pseudo-checkbox state="indeterminate"></mat-pseudo-checkbox>
-<mat-pseudo-checkbox state="indeterminate" [disabled]="true"></mat-pseudo-checkbox>
+  <mat-pseudo-checkbox appearance="minimal" state="indeterminate"></mat-pseudo-checkbox>
+  <mat-pseudo-checkbox appearance="minimal" state="indeterminate" [disabled]="true">
+  </mat-pseudo-checkbox>
+<div>
 
 <h1>Nested Checklist</h1>
 <mat-checkbox-demo-nested-checklist></mat-checkbox-demo-nested-checklist>

src/dev-app/select/select-demo.html

@@ -12,8 +12,8 @@
         <mat-label>Drink</mat-label>
         <mat-select [(ngModel)]="currentDrink" [required]="drinksRequired"
           [disabled]="drinksDisabled" #drinkControl="ngModel">
-          <mat-option>None</mat-option>
-          <mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
+          <mat-option [disabled]="drinksOptionsDisabled">None</mat-option>
+          <mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drinksOptionsDisabled">
             {{ drink.viewValue }}
           </mat-option>
         </mat-select>
@@ -52,6 +52,7 @@
       <button mat-button (click)="currentDrink='water-2'">SET VALUE</button>
       <button mat-button (click)="drinksRequired=!drinksRequired">TOGGLE REQUIRED</button>
       <button mat-button (click)="drinksDisabled=!drinksDisabled">TOGGLE DISABLED</button>
+      <button mat-button (click)="drinksOptionsDisabled=!drinksOptionsDisabled">TOGGLE DISABLED OPTIONS</button>
       <button mat-button (click)="drinkControl.reset()">RESET</button>
     </mat-card-content>
   </mat-card>
@@ -64,7 +65,7 @@
         <mat-label>Pokemon</mat-label>
         <mat-select multiple [(ngModel)]="currentPokemon"
           [required]="pokemonRequired" [disabled]="pokemonDisabled" #pokemonControl="ngModel">
-          <mat-option *ngFor="let creature of pokemon" [value]="creature.value">
+          <mat-option *ngFor="let creature of pokemon" [value]="creature.value" [disabled]="pokemonOptionsDisabled">
             {{ creature.viewValue }}
           </mat-option>
         </mat-select>
@@ -82,6 +83,7 @@
       <button mat-button (click)="setPokemonValue()">SET VALUE</button>
       <button mat-button (click)="pokemonRequired=!pokemonRequired">TOGGLE REQUIRED</button>
       <button mat-button (click)="pokemonDisabled=!pokemonDisabled">TOGGLE DISABLED</button>
+      <button mat-button (click)="pokemonOptionsDisabled=!pokemonOptionsDisabled">TOGGLE DISABLED OPTIONS</button>
       <button mat-button (click)="pokemonControl.reset()">RESET</button>
     </mat-card-content>
   </mat-card>
@@ -356,3 +358,35 @@ <h4>Error message with errorStateMatcher</h4>
     </form>
   </mat-card-content>
 </mat-card>
+
+<mat-card class="demo-card demo-narrow">
+  <mat-card-subtitle>Narrow</mat-card-subtitle>
+  <mat-card-content class="demo-narrow-sandwich">
+    <mat-form-field>
+      <mat-label>Bread</mat-label>
+      <mat-select [(ngModel)]="sandwichBread">
+        <mat-option *ngFor="let bread of breads" [value]="bread.value">
+          {{ bread.viewValue }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>Meat</mat-label>
+      <mat-select [(ngModel)]="sandwichMeat">
+        <mat-option *ngFor="let meat of meats" [value]="meat.value">
+          {{ meat.viewValue }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>Cheese</mat-label>
+      <mat-select [(ngModel)]="sandwichCheese">
+        <mat-option *ngFor="let cheese of cheeses" [value]="cheese.value">
+          {{ cheese.viewValue }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+  </mat-card-content>
+
+</mat-card>

src/dev-app/select/select-demo.scss

@@ -25,3 +25,12 @@
 .demo-card {
   margin: 30px 0;
 }
+
+.demo-narrow {
+  max-width: 450px;
+
+  .demo-narrow-sandwich {
+    display: flex;
+    gap: 16px;
+  }
+}

src/dev-app/select/select-demo.ts

@@ -48,7 +48,9 @@ export class SelectDemo {
   drinkObjectRequired = false;
   pokemonRequired = false;
   drinksDisabled = false;
+  drinksOptionsDisabled = false;
   pokemonDisabled = false;
+  pokemonOptionsDisabled = false;
   showSelect = false;
   currentDrink: string;
   currentDrinkObject: {} | undefined = {value: 'tea-5', viewValue: 'Tea'};
@@ -66,6 +68,10 @@ export class SelectDemo {
   compareByValue = true;
   selectFormControl = new FormControl('', Validators.required);
 
+  sandwichBread = '';
+  sandwichMeat = '';
+  sandwichCheese = '';
+
   foods = [
     {value: null, viewValue: 'None'},
     {value: 'steak-0', viewValue: 'Steak'},
@@ -74,19 +80,19 @@ export class SelectDemo {
   ];
 
   drinks = [
-    {value: 'coke-0', viewValue: 'Coke', disabled: false},
+    {value: 'coke-0', viewValue: 'Coke'},
     {
       value: 'long-name-1',
       viewValue: 'Decaf Chocolate Brownie Vanilla Gingerbread Frappuccino',
       disabled: false,
     },
-    {value: 'water-2', viewValue: 'Water', disabled: false},
-    {value: 'pepper-3', viewValue: 'Dr. Pepper', disabled: false},
-    {value: 'coffee-4', viewValue: 'Coffee', disabled: false},
-    {value: 'tea-5', viewValue: 'Tea', disabled: false},
-    {value: 'juice-6', viewValue: 'Orange juice', disabled: false},
-    {value: 'wine-7', viewValue: 'Wine', disabled: false},
-    {value: 'milk-8', viewValue: 'Milk', disabled: true},
+    {value: 'water-2', viewValue: 'Water'},
+    {value: 'pepper-3', viewValue: 'Dr. Pepper'},
+    {value: 'coffee-4', viewValue: 'Coffee'},
+    {value: 'tea-5', viewValue: 'Tea'},
+    {value: 'juice-6', viewValue: 'Orange juice'},
+    {value: 'wine-7', viewValue: 'Wine'},
+    {value: 'milk-8', viewValue: 'Milk'},
   ];
 
   pokemon = [
@@ -149,6 +155,26 @@ export class SelectDemo {
     {value: 'indramon-5', viewValue: 'Indramon'},
   ];
 
+  breads = [
+    {value: 'white', viewValue: 'White'},
+    {value: 'white', viewValue: 'Wheat'},
+    {value: 'white', viewValue: 'Sourdough'},
+  ];
+
+  meats = [
+    {value: 'turkey', viewValue: 'Turkey'},
+    {value: 'bacon', viewValue: 'Bacon'},
+    {value: 'veggiePatty', viewValue: 'Veggie Patty'},
+    {value: 'tuna', viewValue: 'Tuna'},
+  ];
+
+  cheeses = [
+    {value: 'none', viewValue: 'None'},
+    {value: 'swiss', viewValue: 'Swiss'},
+    {value: 'american', viewValue: 'American'},
+    {value: 'cheddar', viewValue: 'Cheddar'},
+  ];
+
   toggleDisabled() {
     this.foodControl.enabled ? this.foodControl.disable() : this.foodControl.enable();
   }

src/material/core/option/option.html

@@ -5,6 +5,10 @@
 
 <span class="mdc-list-item__primary-text" #text><ng-content></ng-content></span>
 
+<!-- Render checkmark at the end for single-selection. -->
+<mat-pseudo-checkbox *ngIf="!multiple && selected" class="mat-mdc-option-pseudo-checkbox"
+    state="checked" [disabled]="disabled" appearance="minimal"></mat-pseudo-checkbox>
+
 <!-- See a11y notes inside optgroup.ts for context behind this element. -->
 <span class="cdk-visually-hidden" *ngIf="group && group._inert">({{ group.label }})</span>
 

src/material/core/option/option.scss

@@ -48,7 +48,7 @@
   }
 
   .mat-icon,
-  .mat-pseudo-checkbox {
+  .mat-pseudo-checkbox-full {
     margin-right: mdc-list-variables.$side-padding;
     flex-shrink: 0;
 
@@ -58,6 +58,16 @@
     }
   }
 
+  .mat-pseudo-checkbox-minimal {
+    margin-left: mdc-list-variables.$side-padding;
+    flex-shrink: 0;
+
+    [dir='rtl'] & {
+      margin-right: mdc-list-variables.$side-padding;
+      margin-left: 0;
+    }
+  }
+
   // Increase specificity because ripple styles are part of the `mat-core` mixin and can
   // potentially overwrite the absolute position of the container.
   .mat-mdc-option-ripple {
@@ -84,6 +94,8 @@
     font-family: inherit;
     text-decoration: inherit;
     text-transform: inherit;
+
+    flex-grow: 1;
   }
 
   @include cdk.high-contrast(active, off) {

src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-common.scss

@@ -4,26 +4,79 @@
 // Padding inside of a pseudo checkbox.
 $padding: checkbox-common.$border-width * 2;
 
+// Center a checkmark indicator inside the checkbox.
+//
+// `$box-size`: size of the checkbox
+// `$mark-size`: size of the checkmark indicator
+@mixin _checkbox-checked-styles-with-size($box-size, $mark-size) {
+  // Center a checkmark. `$checkbox-cmmon.$border-width` is the width of the line of the checkmark.
+  $width: $mark-size;
+  $height: math.div($mark-size - checkbox-common.$border-width, 2);
+
+  // The rendered length of the short-side of the checkmark graphic when rendered. Add length of
+  // the border-width since this element is content-box.
+  $short-side: $height + checkbox-common.$border-width;
+
+  width: $width;
+  height: $height;
+
+  // Rotate on the center of the element. This makes it easier to center the checkmark graphic.
+  transform-origin: center;
+
+  // Take negative one times the distance from the top corner of the checkmark graphic to the top
+  // of the element in its rotated position. This accounts for the top corner of the elemant being
+  // blank since we only use the left and bottom borders to draw the checkmark graphic.
+  top: -1 * math.div($short-side - checkbox-common.$border-width, math.sqrt(2));
+
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  // center the checkmark graphic with margin auto
+  margin: auto;
+}
+
+// Center a horizontal line placed in the vertical and horizontal center of the checkbox. It does
+// not touch the border of the checkbox.
+//
+// `$box-size`: size of the checkbox.
+// `$border-size`: size of the checkbox's border.
+@mixin _checkbox-indeterminate-styles-with-size($box-size, $border-size) {
+  // Center the line in the the checkbox. `$checkbox-common.$border-width` is the width of the line.
+  top: math.div($box-size - checkbox-common.$border-width, 2) - $border-size;
+  width: $box-size - checkbox-common.$border-width - (2 * $border-size);
+}
+
 /// Applies the styles that set the size of the pseudo checkbox
 @mixin size($box-size) {
-  $mark-size: $box-size - (2 * $padding);
 
   .mat-pseudo-checkbox {
     width: $box-size;
     height: $box-size;
   }
 
-  .mat-pseudo-checkbox-indeterminate::after {
-    top: math.div($box-size - checkbox-common.$border-width, 2) -
-      checkbox-common.$border-width;
-    width: $box-size - 6px;
+  .mat-pseudo-checkbox-minimal {
+    $mark-size: $box-size - $padding;
+    $border-size: 0; // Minimal appearance does not have a border.
+
+    &.mat-pseudo-checkbox-checked::after {
+      @include _checkbox-checked-styles-with-size($box-size, $mark-size);
+    }
+    &.mat-pseudo-checkbox-indeterminate::after {
+      @include _checkbox-indeterminate-styles-with-size($box-size, $border-size);
+    }
   }
 
-  .mat-pseudo-checkbox-checked::after {
-    top: math.div($box-size, 2) - math.div($mark-size, 4) -
-       math.div($box-size, 10) - checkbox-common.$border-width;
-    width: $mark-size;
-    height: math.div($mark-size - checkbox-common.$border-width, 2);
+  .mat-pseudo-checkbox-full {
+    $mark-size: $box-size - (2 * $padding); // Apply a smaller mark to account for the border.
+    $border-size: checkbox-common.$border-width;
+
+    &.mat-pseudo-checkbox-checked::after {
+      @include _checkbox-checked-styles-with-size($box-size, $mark-size);
+    }
+    &.mat-pseudo-checkbox-indeterminate::after {
+      @include _checkbox-indeterminate-styles-with-size($box-size, $border-size);
+    }
   }
 }