如果用户尝试提交无效信息，如何让屏幕阅读器读出出现的验证错误文本？

Question

我有一个包含输入的 TextInput 组件和一个仅在出现错误时出现的 HelperText。 我想知道如何才能使屏幕阅读器在元素出现错误文本后读取错误？

        <TextInputBase
            onFocus={(e) => {
                setIsFocused(true);
                onFocus?.(e);
            }}
            onBlur={(e) => {
                setIsFocused(false);
                onBlur?.(e);
            }}
            outlineColor={colors.gray200}
            activeOutlineColor={colors.primary600}
            accessibilityLabel={label}
            label={label}
            error={!!error}
            // Hide the placeholder when the input is focused
            placeholder={isFocused ? undefined : label}
            theme={{ colors: { text: colors.black, placeholder: colors.gray800 } }}
            style={[style, styles.input]}
            {...rest}
        />

        <HelperText
            type="error"
            visible={!!error}
        >
            {error}
        </HelperText>

Answer 1

你可以看看formik和yup ，它们真的很强大！

这非常适合小表格或长表格。

希望这可以帮到你！