Add input to toast to fix AT issues

frontend/app/modules/toast/ToastInner.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { styled } from 'styled-components'
+
+const Div = styled.div`
+  border: 0px;
+  max-height: 1px;
+  height: 1px;
+  width: 100%;
+  position: relative;
+
+  input {
+    border: 0px;
+    max-height: 1px;
+    height: 1px;
+    background: transparent;
+    color: transparent;
+  }
+`
+
+const ToastInner = ({ text }: { text: string }) => (
+  <>
+    {text}
+    <Div>
+      <input type="text" value={text} />
+    </Div>
+  </>
+)
+
+export default ToastInner

frontend/app/modules/toast/toast.store.ts

@@ -1,5 +1,6 @@
-import { toast, ToastPosition } from 'react-toastify'
+import { toast, ToastPosition, TypeOptions } from 'react-toastify'
 import { RootStore } from '../../store/rootStore'
+import ToastInner from './ToastInner'
 
 export class ToastStore {
   rootStore: RootStore
@@ -19,8 +20,9 @@ export class ToastStore {
       theme: this.isDarkTheme ? 'dark' : 'light',
       position: 'bottom-left' as ToastPosition,
       autoClose: timeout,
+      type: 'info' as TypeOptions,
     }
 
-    toast.info(text, toastOptions)
+    toast(ToastInner({ text }), toastOptions)
   }
 }

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-feature-smartapp",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "SmartApp with all features",
   "main": "index.js",
   "scripts": {