Fix tab focus for AI Optimize toast element

#4372
Wrap close button with ForwardRef to be able to use with useRef.

packages/ui-library/src/elements/toast/index.js

@@ -4,7 +4,7 @@ import { XIcon } from "@heroicons/react/outline";
 import classNames from "classnames";
 import { isArray, noop } from "lodash";
 import PropTypes from "prop-types";
-import React, { createContext, useCallback, useContext, useEffect } from "react";
+import React, { createContext, useCallback, useContext, useEffect, forwardRef } from "react";
 
 const ToastContext = createContext( { handleDismiss: noop } );
 
@@ -21,13 +21,14 @@ export const toastClassNameMap = {
  * @param {string} [className] The additional class name.
  * @returns {JSX.Element} The close button.
  */
-const Close = ( {
+const Close =forwardRef(( {
 	dismissScreenReaderLabel,
-} ) => {
+}, ref ) => {
 	const { handleDismiss } = useContext( ToastContext );
 	return (
 		<div className="yst-flex-shrink-0 yst-flex yst-self-start">
 			<button
+				ref={ref}
 				type="button"
 				onClick={ handleDismiss }
 				className="yst-bg-transparent yst-rounded-md yst-inline-flex yst-text-slate-400 hover:yst-text-slate-500 focus:yst-outline-none focus:yst-ring-2 focus:yst-ring-offset-2 focus:yst-ring-primary-500"
@@ -37,7 +38,7 @@ const Close = ( {
 			</button>
 		</div>
 	);
-};
+});
 
 Close.propTypes = {
 	dismissScreenReaderLabel: PropTypes.string.isRequired,