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

src/material/radio/radio.html

40 строк2 KB

Kristiyan Kostadinov

fix(material/radio): avoid making the touch target a focus stop (#33558)

20 июл 2026, 20:35

20 июл 2026, 20:35a62e659

<label mat-internal-form-field [labelPosition]="labelPosition" [for]="inputId" #formField>
  <span class="mdc-radio" [class.mdc-radio--disabled]="disabled">
    <!-- Render this element first so the input is on top. -->
    <span class="mat-mdc-radio-touch-target"></span>
    <!--
      Note that we set `aria-invalid="false"` on the input, because otherwise some screen readers
      will read out "required, invalid data" for each radio button that hasn't been checked.
      An alternate approach is to use `aria-required` instead of `required`, however we have an
      internal check which enforces that elements marked as `aria-required` also have the `required`
      attribute which ends up re-introducing the issue for us.
    -->
    <input #input class="mdc-radio__native-control" type="radio"
           [id]="inputId"
           [checked]="checked"
           [disabled]="disabled && !disabledInteractive"
           [attr.name]="name"
           [attr.value]="value"
           [required]="required"
           aria-invalid="false"
           [attr.aria-label]="ariaLabel"
           [attr.aria-labelledby]="ariaLabelledby"
           [attr.aria-describedby]="ariaDescribedby"
           [attr.aria-disabled]="disabled && disabledInteractive ? 'true' : null"
           (change)="_onInputInteraction($event)">
    <span class="mdc-radio__background" aria-hidden="true">
      <span class="mdc-radio__outer-circle"></span>
      <span class="mdc-radio__inner-circle"></span>
    </span>
    <span mat-ripple class="mat-radio-ripple mat-focus-indicator"
         [matRippleTrigger]="_rippleTrigger.nativeElement"
         [matRippleDisabled]="_isRippleDisabled()"
         [matRippleCentered]="true"
         aria-hidden="true">
      <span class="mat-ripple-element mat-radio-persistent-ripple"></span>
    </span>
  </span>
  <span class="mat-internal-form-field-label mdc-label">
    <ng-content></ng-content>
  </span>
</label>