角度材质单选按钮标签和VoiceOver / ScreenReader

Question

我有一个Angular Material mat-radio-group。当我用Apple的VoiceOver测试它时，它会将每个单选标签读取为“ [[label]和另外一个项目”]

例如

<mat-radio-button value="envelope">Envelope</mat-radio-button>

聚焦时大声读出为“信封和另外一个项目”。为什么？

这里是全套：

<mat-radio-group aria-label="My Package Type" [(ngModel)]="myPackageType" class="radio-package-type mat-radio-small">
   <mat-radio-button value="box">Box</mat-radio-button>
   <mat-radio-button value="envelope">Envelope</mat-radio-button>
   <mat-radio-button value="irregular">Irregular</mat-radio-button>
</mat-radio-group>

这是从开发人员工具复制的呈现HTML：

<mat-radio-group
  _ngcontent-gkg-c241=""
  role="radiogroup"
  aria-label="My Package Type"
  class="mat-radio-group radio-package-type mat-radio-small ng-pristine ng-valid is-value ng-touched"
  ng-reflect-model="box"
  ><mat-radio-button
    _ngcontent-gkg-c241=""
    value="box"
    class="mat-radio-button mat-accent mat-radio-checked"
    ng-reflect-value="box"
    tabindex="-1"
    id="mat-radio-2"
    ><label class="mat-radio-label" for="mat-radio-2-input"
      ><div class="mat-radio-container">
        <div class="mat-radio-outer-circle"></div>
        <div class="mat-radio-inner-circle"></div>
        <input
          type="radio"
          class="mat-radio-input cdk-visually-hidden"
          id="mat-radio-2-input"
          tabindex="0"
          name="mat-radio-group-0"
          value="box"
        />
        <div
          mat-ripple=""
          class="mat-ripple mat-radio-ripple mat-focus-indicator"
          ng-reflect-trigger="[object HTMLLabelElement]"
          ng-reflect-disabled="false"
          ng-reflect-centered="true"
          ng-reflect-radius="20"
          ng-reflect-animation="[object Object]"
        >
          <div class="mat-ripple-element mat-radio-persistent-ripple"></div>
        </div>
      </div>
      <div class="mat-radio-label-content">
        <span style="display: none;">&nbsp;</span>Box
      </div></label
    ></mat-radio-button
  ><mat-radio-button
    _ngcontent-gkg-c241=""
    value="envelope"
    class="mat-radio-button mat-accent"
    ng-reflect-value="envelope"
    tabindex="-1"
    id="mat-radio-3"
    ><label class="mat-radio-label" for="mat-radio-3-input"
      ><div class="mat-radio-container">
        <div class="mat-radio-outer-circle"></div>
        <div class="mat-radio-inner-circle"></div>
        <input
          type="radio"
          class="mat-radio-input cdk-visually-hidden"
          id="mat-radio-3-input"
          tabindex="0"
          name="mat-radio-group-0"
          value="envelope"
        />
        <div
          mat-ripple=""
          class="mat-ripple mat-radio-ripple mat-focus-indicator"
          ng-reflect-trigger="[object HTMLLabelElement]"
          ng-reflect-disabled="false"
          ng-reflect-centered="true"
          ng-reflect-radius="20"
          ng-reflect-animation="[object Object]"
        >
          <div class="mat-ripple-element mat-radio-persistent-ripple"></div>
        </div>
      </div>
      <div class="mat-radio-label-content">
        <span style="display: none;">&nbsp;</span>Envelope
      </div></label
    ></mat-radio-button
  ><mat-radio-button
    _ngcontent-gkg-c241=""
    value="irregular"
    class="mat-radio-button mat-accent"
    ng-reflect-value="irregular"
    tabindex="-1"
    id="mat-radio-4"
    ><label class="mat-radio-label" for="mat-radio-4-input"
      ><div class="mat-radio-container">
        <div class="mat-radio-outer-circle"></div>
        <div class="mat-radio-inner-circle"></div>
        <input
          type="radio"
          class="mat-radio-input cdk-visually-hidden"
          id="mat-radio-4-input"
          tabindex="0"
          name="mat-radio-group-0"
          value="irregular"
        />
        <div
          mat-ripple=""
          class="mat-ripple mat-radio-ripple mat-focus-indicator"
          ng-reflect-trigger="[object HTMLLabelElement]"
          ng-reflect-disabled="false"
          ng-reflect-centered="true"
          ng-reflect-radius="20"
          ng-reflect-animation="[object Object]"
        >
          <div class="mat-ripple-element mat-radio-persistent-ripple"></div>
        </div>
      </div>
      <div class="mat-radio-label-content">
        <span style="display: none;">&nbsp;</span>Irregular
      </div></label
    ></mat-radio-button
  ></mat-radio-group
>

Answer 1

我遇到了类似的问题（macOS 10.15.3，Safari 13.0.5和10.15.4、13.1，我无法在Mac Chrome 80或iOS 13.3.1 Safari中复制）。当<label>的子元素带有display：block时，似乎会发生这种情况，特别是如果存在带有和不具有display：block的子元素的混合或TextNodes和带有display:block的元素的混合。

在您的情况下，标签既是隐式的（输入是标签的子级）又是显式的（标签具有用于引用输入ID的属性）。尽管这是不必要的重复（就像在tagindex="0"元素上添加<input>一样），但这与问题无关。我已经用仅隐式和仅显式的标签和输入重现了该问题。重现此问题似乎需要两件事：

1. [<label>更改为display:block] >>
2. [<label>具有至少一个display:block子元素，但不是所有具有display:block的子元素

更改标签元素，以便不满足这两个要求之一似乎可以解决此问题。

<!-- VoiceOver is saying "First Nameandone more item, edit text" -->
<!-- implicit -->
<label style="display:block"> 
    <span style="display:block">First Name</span>
    <input type="text"> 
</label>

<!-- explicit -->
<div>
    <label for="firstname3" class="block"> 
        First Name
        <span style="display:block">Test</span>
    </label>
    <input id="firstname3" type="text">
</div>