src/material/checkbox/checkbox.html - main - githubmirror/components

src/material/checkbox/checkbox.html

54 строки2 KB

Kristiyan Kostadinov

fix(material/checkbox): avoid making the touch target a focus stop (#33584)

30 июл 2026, 18:49

30 июл 2026, 18:493fb737c

<label
  mat-internal-form-field
  [labelPosition]="labelPosition"
  [for]="inputId"
  (click)="_preventBubblingFromLabel($event)">
  <span #checkbox class="mdc-checkbox">
    <!-- Render this element first so the input is on top. -->
    <span class="mat-mdc-checkbox-touch-target" aria-hidden="true"></span>
    <input #input
           type="checkbox"
           class="mdc-checkbox__native-control"
           [class.mdc-checkbox--selected]="checked"
           [attr.aria-label]="ariaLabel || null"
           [attr.aria-labelledby]="ariaLabelledby"
           [attr.aria-describedby]="ariaDescribedby"
           [attr.aria-checked]="indeterminate ? 'mixed' : null"
           [attr.aria-controls]="ariaControls"
           [attr.aria-disabled]="disabled && disabledInteractive ? true : null"
           [attr.aria-expanded]="ariaExpanded"
           [attr.aria-owns]="ariaOwns"
           [attr.name]="name"
           [attr.value]="value"
           [checked]="checked"
           [indeterminate]="indeterminate"
           [disabled]="disabled && !disabledInteractive"
           [id]="inputId"
           [required]="required"
           [tabIndex]="disabled && !disabledInteractive ? -1 : tabIndex"
           (blur)="_onBlur()"
           (click)="_onInputClick()"
           (change)="_onInteractionEvent($event)"/>
    <span class="mdc-checkbox__ripple" aria-hidden="true"></span>
    <span class="mdc-checkbox__background" aria-hidden="true">
      <svg class="mdc-checkbox__checkmark"
           focusable="false"
           viewBox="0 0 24 24">
        <path class="mdc-checkbox__checkmark-path"
              fill="none"
              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
      <span class="mdc-checkbox__mixedmark"></span>
    </span>
    <span class="mat-mdc-checkbox-ripple mat-focus-indicator"
      mat-ripple
      aria-hidden="true"
      [matRippleTrigger]="checkbox"
      [matRippleDisabled]="disableRipple || disabled"
      [matRippleCentered]="true"></span>
  </span>

  <span #label class="mat-internal-form-field-label mdc-label">
    <ng-content></ng-content>
  </span>
</label>