fix(general): enhancements and bug fixes (#4018)

platform/ui/src/components/Notification/Notification.tsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import Button, { ButtonEnums } from '../Button';
 import Icon from '../Icon';
 
-const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick }) => {
+const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick, onKeyPress }) => {
   const notificationRef = useRef(null);
 
   useEffect(() => {
@@ -29,6 +29,10 @@ const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick })
     };
   }, [onOutsideClick]);
 
+  useEffect(() => {
+    notificationRef.current.focus();
+  }, []);
+
   const iconsByType = {
     error: {
       icon: 'info',
@@ -64,6 +68,8 @@ const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick })
       ref={notificationRef}
       className="border-customblue-10 bg-customblue-400 mx-2 mt-2 flex flex-col rounded-md border-2 p-2"
       data-cy={id}
+      onKeyDown={onKeyPress}
+      tabIndex={0}
     >
       <div className="flex grow items-center">
         <Icon
@@ -112,6 +118,7 @@ Notification.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   /** Can be used as a callback to dismiss the notification for clicks that occur outside of it */
   onOutsideClick: PropTypes.func,
+  onKeyPress: PropTypes.func,
 };
 
 export default Notification;