Fix handling of pointer events for calling toasts

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;
 }
 

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) {