diff --git a/stylesheets/components/CallingToast.scss b/stylesheets/components/CallingToast.scss
index af8988238..06374567e 100644
--- a/stylesheets/components/CallingToast.scss
+++ b/stylesheets/components/CallingToast.scss
@@ -8,6 +8,7 @@
   width: 100%;
   display: flex;
   justify-content: center;
+  pointer-events: none;
 }
 
 .CallingToasts__inner {
@@ -15,6 +16,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  pointer-events: auto;
   gap: 8px;
 }
 
diff --git a/ts/components/CallingToast.tsx b/ts/components/CallingToast.tsx
index 334438e12..0f0fe97cc 100644
--- a/ts/components/CallingToast.tsx
+++ b/ts/components/CallingToast.tsx
@@ -204,7 +204,7 @@ export function CallingToastProvider({
         // index is toasts.length instead of toasts.length - 1 since it has already been
         // removed from state
         index === toasts.length
-          ? 0
+          ? '0px'
           : `${-1 * (TOAST_HEIGHT_PX + TOAST_GAP_PX)}px`,
       config: (key: string) => {
         if (key === 'zIndex') {
@@ -266,9 +266,9 @@ function CallingToast(
     props.dismissable && 'CallingToast--dismissable'
   );
 
-  const elementHtmlProps = {
+  const elementHtmlProps: React.HTMLAttributes<HTMLDivElement> = {
     role: 'alert',
-    ariaLive: props.autoClose ? 'assertive' : 'polite',
+    'aria-live': props.autoClose ? 'assertive' : 'polite',
   };
 
   if (props.dismissable) {