Ionic7+React18中如何为IonCheckbox加aria-label并保留可见标签

原代码与无障碍警告 #

原本使用的代码：

<IonItem>
  <IonLabel id="label1">Jeff Lebowski</IonLabel>
  <IonCheckbox value="123" checked={true} />
</IonItem>

触发以下无障碍警告：

[Ionic 警告]: ion-checkbox 现在需要通过默认插槽或 aria-label 属性提供标签。迁移时，请移除所有 ion-label 的使用，将标签文本传递给组件本身或 aria-label 属性。

官方提供的解决方案示例 #

• 直接将标签文本作为组件子元素（默认插槽）：

<ion-checkbox>Label</ion-checkbox>

• 使用 aria-label 属性（标签仅对无障碍工具可见，无视觉显示）：

<ion-checkbox aria-label="Label"></ion-checkbox>

问题重现：添加 aria-label 后可见文本消失 #

当按照警告提示添加 aria-label 后，代码变为：

<IonItem>
  <IonLabel id="label1">Jeff Lebowski</IonLabel>
  <IonCheckbox value="123" checked={true} aria-label="Jeff Lebowski" />
</IonItem>

此时复选框旁的可见文本消失了。

正确解决方法 #

要同时满足无障碍要求和保留可见文本，需移除单独的 IonLabel 组件，将标签文本直接作为 IonCheckbox 的子元素（使用默认插槽）：

<IonItem>
  <IonCheckbox value="123" checked={true}>Jeff Lebowski</IonCheckbox>
</IonItem>

这种写法既符合Ionic 7的无障碍规范，又能在复选框旁显示可见标签文本。

内容的提问来源于stack exchange，提问作者Dave