Add errorAriaLabel to all fields (#168)

Author: PatoBeltran

lib/components/DateTime/DateField.tsx

@@ -64,6 +64,8 @@ export interface DateFieldProps extends React.Props<DateFieldType> {
 
     /** React node to render at the far side of the label. */
     labelFarSide?: React.ReactNode;
+    /** Label to be announced before the error message to announce to the user that there's an error */
+    errorAriaLabel?: string;
 
     attr?: DatePickerAttributes & FormFieldAttributes;
 }
@@ -107,6 +109,7 @@ export const DateField: React.StatelessComponent<DateFieldProps> = (props: DateF
             attr={fieldAttr}
             tooltip={props.tooltip}
             labelFarSide={props.labelFarSide}
+            errorAriaLabel={props.errorAriaLabel}
             disabled={props.disabled}
         >
             <DatePicker

lib/components/Field/CheckboxField.tsx

@@ -41,6 +41,8 @@ export interface CheckboxFieldProps extends React.Props<CheckboxFieldType> {
     inputClassName?: string;
     /** React node to render at the far side of the label. */
     labelFarSide?: React.ReactNode;
+    /** Label to be announced before the error message to announce to the user that there's an error */
+    errorAriaLabel?: string;
 
     attr?: FormFieldAttributes & CheckboxInputAttributes;
 }
@@ -87,6 +89,7 @@ export const CheckboxField: React.StatelessComponent<CheckboxFieldProps> = (prop
             className={props.className}
             attr={fieldAttr}
             labelFarSide={props.labelFarSide}
+            errorAriaLabel={props.errorAriaLabel}
             disabled={props.disabled}
         >
             <div>

lib/components/Field/ComboField.tsx

@@ -110,6 +110,8 @@ export interface ComboFieldProps extends React.Props<ComboFieldType> {
     inputClassName?: string;
     /** React node to render at the far side of the label. */
     labelFarSide?: React.ReactNode;
+    /** Label to be announced before the error message to announce to the user that there's an error */
+    errorAriaLabel?: string;
 
     attr?: ComboInputAttributes & FormFieldAttributes;
 }
@@ -174,6 +176,7 @@ export const ComboField: React.StatelessComponent<ComboFieldProps> = (props: Com
             className={props.className}
             attr={fieldAttr}
             labelFarSide={props.labelFarSide}
+            errorAriaLabel={props.errorAriaLabel}
             disabled={props.disabled}
         >
             <div>

lib/components/Field/RadioField.tsx

@@ -52,6 +52,8 @@ export interface RadioFieldProps extends React.Props<RadioFieldType> {
     inputClassName?: string;
     /** React node to render at the far side of the label. */
     labelFarSide?: React.ReactNode;
+    /** Label to be announced before the error message to announce to the user that there's an error */
+    errorAriaLabel?: string;
 
     attr?: RadioInputAttributes & FormFieldAttributes;
 }
@@ -131,6 +133,7 @@ export const RadioField: React.StatelessComponent<RadioFieldProps> = (props: Rad
             className={props.className}
             attr={fieldAttr}
             labelFarSide={props.labelFarSide}
+            errorAriaLabel={props.errorAriaLabel}
             disabled={props.disabled}
         >
             <div>

lib/components/Field/SelectField.tsx

@@ -51,7 +51,9 @@ export interface SelectFieldProps extends React.Props<SelectFieldType> {
     inputClassName?: string;
     /** React node to render at the far side of the label. */
     labelFarSide?: React.ReactNode;
-
+    /** Label to be announced before the error message to announce to the user that there's an error */
+    errorAriaLabel?: string;
+    
     attr?: SelectInputAttributes & FormFieldAttributes;
 }
 
@@ -94,6 +96,7 @@ export const SelectField: React.StatelessComponent<SelectFieldProps> = (props: S
             className={props.className}
             attr={fieldAttr}
             labelFarSide={props.labelFarSide}
+            errorAriaLabel={props.errorAriaLabel}
             disabled={props.disabled}
         >
             <SelectInput

lib/components/Field/TextAreaField.tsx

@@ -46,6 +46,8 @@ export interface TextAreaFieldProps extends React.Props<TextAreaFieldType> {
     inputClassName?: string;
     /** React node to render at the far side of the label. */
     labelFarSide?: React.ReactNode;
+    /** Label to be announced before the error message to announce to the user that there's an error */
+    errorAriaLabel?: string;
 
     attr?: TextAreaAttributes & FormFieldAttributes;
 }
@@ -81,6 +83,7 @@ export const TextAreaField: React.StatelessComponent<TextAreaFieldProps> = (prop
             className={props.className}
             attr={fieldAttr}
             labelFarSide={props.labelFarSide}
+            errorAriaLabel={props.errorAriaLabel}
             disabled={props.disabled}
         >
             <TextArea

lib/components/Field/TextField.tsx

@@ -59,6 +59,8 @@ export interface TextFieldProps extends React.Props<TextFieldType> {
     inputClassName?: string;
     /** Extra action to render at the far side of the label */
     labelFarSide?: React.ReactNode;
+    /** Label to be announced before the error message to announce to the user that there's an error */
+    errorAriaLabel?: string;
 
     attr?: TextInputAttributes & FormFieldAttributes;
 }
@@ -104,6 +106,7 @@ export const TextField: React.StatelessComponent<TextFieldProps> = (props: TextF
             className={props.className}
             attr={fieldAttr}
             labelFarSide={props.labelFarSide}
+            errorAriaLabel={props.errorAriaLabel}
             disabled={props.disabled}
         >
             <TextInput

lib/components/Field/ToggleField.tsx

@@ -44,6 +44,8 @@ export interface ToggleFieldProps extends React.Props<ToggleFieldType> {
     inputClassName?: string;
     /** React node to render at the far side of the label. */
     labelFarSide?: React.ReactNode;
+    /** Label to be announced before the error message to announce to the user that there's an error */
+    errorAriaLabel?: string;
 
     attr?: FormFieldAttributes & ToggleAttributes;
 }
@@ -82,6 +84,7 @@ export const ToggleField = React.memo((props: ToggleFieldProps) => {
             className={props.className}
             attr={fieldAttr}
             labelFarSide={props.labelFarSide}
+            errorAriaLabel={props.errorAriaLabel}
             disabled={props.disabled}
         >
             <Toggle