Grafana-UI: FieldValidationMessage tweaks (#27246)

* Grafana-UI: Export FieldValidationMessage

* Grafana-UI: Add alert role to FieldValidationMessage

packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx

@@ -45,7 +45,7 @@ export const FieldValidationMessage: React.FC<FieldValidationMessageProps> = ({
   const styles = getFieldValidationMessageStyles(theme);
   const styles = getFieldValidationMessageStyles(theme);
 
 
   return (
   return (
-    <div className={cx(styles.fieldValidationMessage, className)}>
+    <div role="alert" className={cx(styles.fieldValidationMessage, className)}>
       <Icon className={styles.fieldValidationMessageIcon} name="exclamation-triangle" />
       <Icon className={styles.fieldValidationMessageIcon} name="exclamation-triangle" />
       {children}
       {children}
     </div>
     </div>

packages/grafana-ui/src/components/index.ts

@@ -143,6 +143,7 @@ export { Label } from './Forms/Label';
 export { Field } from './Forms/Field';
 export { Field } from './Forms/Field';
 export { Legend } from './Forms/Legend';
 export { Legend } from './Forms/Legend';
 export { FieldSet } from './Forms/FieldSet';
 export { FieldSet } from './Forms/FieldSet';
+export { FieldValidationMessage } from './Forms/FieldValidationMessage';
 
 
 export { default as resetSelectStyles } from './Select/resetSelectStyles';
 export { default as resetSelectStyles } from './Select/resetSelectStyles';
 export * from './Select/Select';
 export * from './Select/Select';