[EuiForm, EuiCallout] Added focus state to error callout

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Added `EuiComboBoxOptionOption` prop to `EuiComboBox` props table ([#4563](https://github.com/elastic/eui/pull/4563))
 - Allowed dynamically changing the `direction` prop on `EuiResizableContainer` ([#4557](https://github.com/elastic/eui/pull/4557))
 - Exported `useIsWithinBreakpoints` hook ([#4557](https://github.com/elastic/eui/pull/4557))
+- Added focus to `EuiForm` error `EuiCallout` ([#4497](https://github.com/elastic/eui/pull/4497))
 
 **Bug fixes**
 

src/components/call_out/call_out.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
+import React, { forwardRef, Ref, HTMLAttributes, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
@@ -54,59 +54,65 @@ const sizeToClassNameMap: { [size in Size]: string } = {
   m: '',
 };
 
-export const EuiCallOut: FunctionComponent<EuiCallOutProps> = ({
-  title,
-  color = 'primary',
-  size = 'm',
-  iconType,
-  children,
-  className,
-  heading,
-  ...rest
-}) => {
-  const classes = classNames(
-    'euiCallOut',
-    colorToClassNameMap[color],
-    sizeToClassNameMap[size],
-    className
-  );
-
-  let headerIcon;
-
-  if (iconType) {
-    headerIcon = (
-      <EuiIcon
-        className="euiCallOutHeader__icon"
-        type={iconType}
-        size="m"
-        aria-hidden="true"
-      />
+export const EuiCallOut = forwardRef<HTMLDivElement, EuiCallOutProps>(
+  (
+    {
+      title,
+      color = 'primary',
+      size = 'm',
+      iconType,
+      children,
+      className,
+      heading,
+      ...rest
+    },
+    ref: Ref<HTMLDivElement>
+  ) => {
+    const classes = classNames(
+      'euiCallOut',
+      colorToClassNameMap[color],
+      sizeToClassNameMap[size],
+      className
     );
-  }
-
-  let optionalChildren;
-  if (children && size === 's') {
-    optionalChildren = <EuiText size="xs">{children}</EuiText>;
-  } else if (children) {
-    optionalChildren = <EuiText size="s">{children}</EuiText>;
-  }
 
-  const H: any = heading ? `${heading}` : 'span';
-  let header;
-
-  if (title) {
-    header = (
-      <div className="euiCallOutHeader">
-        {headerIcon}
-        <H className="euiCallOutHeader__title">{title}</H>
+    let headerIcon;
+
+    if (iconType) {
+      headerIcon = (
+        <EuiIcon
+          className="euiCallOutHeader__icon"
+          type={iconType}
+          size="m"
+          aria-hidden="true"
+        />
+      );
+    }
+
+    let optionalChildren;
+    if (children && size === 's') {
+      optionalChildren = <EuiText size="xs">{children}</EuiText>;
+    } else if (children) {
+      optionalChildren = <EuiText size="s">{children}</EuiText>;
+    }
+
+    const H: any = heading ? `${heading}` : 'span';
+    let header;
+
+    if (title) {
+      header = (
+        <div className="euiCallOutHeader">
+          {headerIcon}
+          <H className="euiCallOutHeader__title">{title}</H>
+        </div>
+      );
+    }
+    return (
+      <div className={classes} ref={ref} {...rest}>
+        {header}
+
+        {optionalChildren}
       </div>
     );
   }
-  return (
-    <div className={classes} {...rest}>
-      {header}
-
-      {optionalChildren}
-    </div>
-  );
-};
+);
+EuiCallOut.displayName = 'EuiCallOut';

src/components/form/__snapshots__/form.test.tsx.snap

@@ -26,6 +26,7 @@ exports[`EuiForm renders with error callout when isInvalid is "true" 1`] = `
     aria-live="assertive"
     class="euiCallOut euiCallOut--danger euiForm__errors"
     role="alert"
+    tabindex="-1"
   >
     <div
       class="euiCallOutHeader"
@@ -50,6 +51,7 @@ exports[`EuiForm renders with error callout when isInvalid is "true" and has mul
     aria-live="assertive"
     class="euiCallOut euiCallOut--danger euiForm__errors"
     role="alert"
+    tabindex="-1"
   >
     <div
       class="euiCallOutHeader"
@@ -94,6 +96,7 @@ exports[`EuiForm renders with error callout when isInvalid is "true" and has one
     aria-live="assertive"
     class="euiCallOut euiCallOut--danger euiForm__errors"
     role="alert"
+    tabindex="-1"
   >
     <div
       class="euiCallOutHeader"

src/components/form/form.tsx

@@ -22,6 +22,7 @@ import React, {
   ReactNode,
   HTMLAttributes,
   FormHTMLAttributes,
+  useCallback,
 } from 'react';
 import classNames from 'classnames';
 import { EuiCallOut } from '../call_out';
@@ -54,6 +55,10 @@ export const EuiForm: FunctionComponent<EuiFormProps> = ({
   invalidCallout = 'above',
   ...rest
 }) => {
+  const handleFocus = useCallback((node) => {
+    node?.focus();
+  }, []);
+
   const classes = classNames('euiForm', className);
 
   let optionalErrors: JSX.Element | null = null;
@@ -80,6 +85,8 @@ export const EuiForm: FunctionComponent<EuiFormProps> = ({
         default="Please address the highlighted errors.">
         {(addressFormErrors: string) => (
           <EuiCallOut
+            tabIndex={-1}
+            ref={handleFocus}
             className="euiForm__errors"
             title={addressFormErrors}
             color="danger"