如果用戶嘗試提交無效信息，如何讓屏幕閱讀器讀出出現的驗證錯誤文本？

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 ，它們真的很強大！

這非常適合小表格或長表格。

希望這可以幫到你！