Ionic 如何在我的IonCheckbox上包含一个aria-label，并且仍然有可见的label渲染？

bqujaahr 于 12个月前发布在 Ionic

关注(0)|答案(1)|浏览(134)

我正在使用Ionic 7和React 18。我有一个IonCheckbox，我这样构建

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

字符串
这将生成可访问性警告

[Ionic Warning]: ion-checkbox now requires providing a label with 
either the default slot or the "aria-label" attribute. To migrate, 
remove any usage of "ion-label" and pass the label text to either 
the component or the "aria-label" attribute.

型
范例：

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

型
使用aria-label的示例：

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

型
然而，如果我加上咏叹调的标签，

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

型
我再也看不到复选框旁边的文本。

ionic-framework

来源：https://stackoverflow.com/questions/77643001/how-do-i-include-an-aria-label-on-my-ioncheckbox-and-still-have-the-visible-labe

1条答案

按热度按时间

x0fgdtte1#

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

字符串
似乎产生the desired outcome。
更详细地说，提供aria-label与提供label是不同的。aria-label不呈现，它被屏幕阅读器用来宣布复选框。而插槽内容（<ion-checkbox />的children）显示为标签。
ion-label已经被上面两个取代了，但是它们都有自己的用途。
注意：如果出于任何原因，您想使用旧语法，您可以将legacy={true}添加到<ion-checkbox />，沿着ion-label属性。

赞(0）回复(0）举报 12个月前

我来回答

Ionic 如何在我的IonCheckbox上包含一个aria-label，并且仍然有可见的label渲染？

1条答案

相关问题

热门标签

最新问答