必填字段指示符不显示在Vaadin Flow中标签文本是否为空

Question

下面是一段Vaadin Flow代码:

ComboBox<String> shipmentStatus = new ComboBox<>();
shipmentStatus.setPlaceholder("Shipment  Status");
shipmentStatus.setId("shipmentStatus");
shipmentStatus.setRequired(true);
shipmentStatus.setRequiredIndicatorVisible(true);

由于标签文本为空，因此不显示所需的指示符。我们怎样才能让它显示在左边呢?提前谢谢你。

Answer 1

如果您需要认真对待可访问性，您需要为字段提供一个可访问的标签。

占位符不能替代正确的标签。最好是完全不使用占位符(一些用户可能会将其与填充值混淆)，或者使用它来显示期望输入的示例(例如，日期模式)。

如果你不能在字段的上方或旁边显示一个可视标签，你可以在组件上设置aria-label属性:

shipmentStatus.getElement().setAttribute("aria-label", "Shipment status");

在您的情况下，我认为设置与占位符相同的字符串是可以接受的，以表明该字段对视力正常的用户的目的。

对于必需的字段指示符，我相信您将不得不手动重新创建它，因为您没有使用内置标签。我会在水平布局中包装字段，并在其后面添加适当样式的符号/字符。如果你想让它看起来像默认的Lumo主题指示器，这里有这些样式:https://github.com/vaadin/web-components/blob/master/packages/vaadin-lumo-styles/mixins/required-field.js#L43-L55