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 value="" [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>

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'};
@@ -74,19 +76,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 = [

src/material/core/option/option.html

@@ -3,6 +3,10 @@
 
 <span class="mdc-list-item__primary-text"><ng-content></ng-content></span>
 
+<!-- Render checkmark at the end to avoid an awkward whitespace when noting is selected. -->
+<mat-pseudo-checkbox *ngIf="!multiple" appearance="minimal" class="mat-mdc-option-pseudo-checkbox"
+    [state]="selected ? 'checked' : 'unchecked'" [disabled]="disabled"></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

@@ -81,6 +81,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);
+    }
   }
 }
 

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

@@ -1,13 +1,33 @@
 @use 'sass:map';
 @use '../../theming/theming';
 
+@mixin _psuedo-checkbox-styles-with-color($text-color, $background) {
+  .mat-pseudo-checkbox-checked,
+  .mat-pseudo-checkbox-indeterminate {
+    &.mat-pseudo-checkbox-minimal::after {
+      color: $text-color;
+    }
+
+    // Full (checkbox) appearance inverts colors of text and background.
+    &.mat-pseudo-checkbox-full {
+      &::after {
+        color: $background;
+      }
+
+      background: $text-color;
+    }
+  }
+}
+
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   $is-dark-theme: map.get($config, is-dark);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-  $background: map.get($config, background);
+
+  $primary: theming.get-color-from-palette(map.get($config, primary));
+  $accent: theming.get-color-from-palette(map.get($config, accent));
+  $warn: theming.get-color-from-palette(map.get($config, warn));
+  $background: theming.get-color-from-palette(map.get($config, background), background);
+  $secondary-text: theming.get-color-from-palette(map.get($config, foreground), secondary-text);
 
   // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
   // this does not work well with elements layered on top of one another. To get around this we
@@ -17,43 +37,38 @@
   $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
   $colored-box-selector: '.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate';
 
-  .mat-pseudo-checkbox {
-    color: theming.get-color-from-palette(map.get($config, foreground), secondary-text);
-
-    &::after {
-      color: theming.get-color-from-palette($background, background);
+  .mat-pseudo-checkbox-full {
+    color: $secondary-text;
+    &.mat-pseudo-checkbox-disabled {
+      color: $disabled-color;
     }
   }
 
-  .mat-pseudo-checkbox-disabled {
-    color: $disabled-color;
-  }
-
-  .mat-primary .mat-pseudo-checkbox-checked,
-  .mat-primary .mat-pseudo-checkbox-indeterminate {
-    background: theming.get-color-from-palette(map.get($config, primary));
+  .mat-primary {
+    @include _psuedo-checkbox-styles-with-color($primary, $background);
   }
 
   // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
   // theme from their parent, rather than implementing their own theming, which is why we
   // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
   // in order to allow for the color to be overwritten if the checkbox is inside a parent that
   // has `mat-accent` and is placed inside another parent that has `mat-primary`.
-  .mat-pseudo-checkbox-checked,
-  .mat-pseudo-checkbox-indeterminate,
-  .mat-accent .mat-pseudo-checkbox-checked,
-  .mat-accent .mat-pseudo-checkbox-indeterminate {
-    background: theming.get-color-from-palette(map.get($config, accent));
+  @include _psuedo-checkbox-styles-with-color($accent, $background);
+  .mat-accent {
+    @include _psuedo-checkbox-styles-with-color($accent, $background);
   }
 
-  .mat-warn .mat-pseudo-checkbox-checked,
-  .mat-warn .mat-pseudo-checkbox-indeterminate {
-    background: theming.get-color-from-palette(map.get($config, warn));
+  .mat-warn {
+    @include _psuedo-checkbox-styles-with-color($warn, $background);
   }
 
-  .mat-pseudo-checkbox-checked,
-  .mat-pseudo-checkbox-indeterminate {
-    &.mat-pseudo-checkbox-disabled {
+  .mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-checked,
+  .mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-indeterminate {
+    &.mat-pseudo-checkbox-minimal::after {
+      color: $disabled-color;
+    }
+
+    &.mat-pseudo-checkbox-full {
       background: $disabled-color;
     }
   }

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

@@ -5,7 +5,6 @@
 @use './pseudo-checkbox-common';
 
 .mat-pseudo-checkbox {
-  border: checkbox-common.$border-width solid;
   border-radius: 2px;
   cursor: pointer;
   display: inline-block;
@@ -27,10 +26,6 @@
       variables.$linear-out-slow-in-timing-function;
   }
 
-  &.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
-    border-color: transparent;
-  }
-
   @include private.private-animation-noop {
     &::after {
       transition: none;
@@ -56,4 +51,12 @@
   box-sizing: content-box;
 }
 
+.mat-pseudo-checkbox-full {
+  border: checkbox-common.$border-width solid;
+  &.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
+    border-color: transparent;
+  }
+}
+
+
 @include pseudo-checkbox-common.size(checkbox-common.$size);

src/material/core/selection/pseudo-checkbox/pseudo-checkbox.ts

@@ -46,6 +46,8 @@ export type MatPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
     '[class.mat-pseudo-checkbox-indeterminate]': 'state === "indeterminate"',
     '[class.mat-pseudo-checkbox-checked]': 'state === "checked"',
     '[class.mat-pseudo-checkbox-disabled]': 'disabled',
+    '[class.mat-pseudo-checkbox-minimal]': 'appearance === "minimal"',
+    '[class.mat-pseudo-checkbox-full]': 'appearance === "full"',
     '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
   },
 })
@@ -56,5 +58,11 @@ export class MatPseudoCheckbox {
   /** Whether the checkbox is disabled. */
   @Input() disabled: boolean = false;
 
+  /**
+   * Appearance of the pseudo checkbox. Default appearance of 'full' renders a checkmark/mixedmark
+   * indicator inside a square box. 'minimal' appearance only renders the checkmark/mixedmark.
+   */
+  @Input() appearance: 'minimal' | 'full' = 'full';
+
   constructor(@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {}
 }