fix(modals): prevent useText evaluation until fully mounted (#2038)

Author: jzempel

packages/modals/src/elements/Drawer/Drawer.tsx

@@ -144,7 +144,13 @@ const DrawerComponent = forwardRef<HTMLDivElement, IDrawerProps>(
     const labelValue = hasHeader ? modalProps['aria-labelledby'] : props['aria-label'];
 
     const ariaProps = {
-      [attribute]: useText(DrawerComponent, { [attribute]: labelValue }, attribute, defaultValue!)
+      [attribute]: useText(
+        DrawerComponent,
+        { [attribute]: labelValue },
+        attribute,
+        defaultValue!,
+        modalRef.current !== null /* prevents `useText` evaluation until fully mounted */
+      )
     };
 
     if (!rootNode) {

packages/modals/src/elements/Modal.tsx

@@ -160,7 +160,13 @@ export const ModalComponent = forwardRef<HTMLDivElement, IModalProps>(
       : modalProps['aria-label'];
 
     const ariaProps = {
-      [attribute]: useText(ModalComponent, { [attribute]: labelValue }, attribute, defaultValue!)
+      [attribute]: useText(
+        ModalComponent,
+        { [attribute]: labelValue },
+        attribute,
+        defaultValue!,
+        modalRef.current !== null /* prevents `useText` evaluation until fully mounted */
+      )
     };
 
     if (!rootNode) {

packages/modals/src/elements/TooltipDialog/TooltipDialog.tsx

@@ -133,7 +133,8 @@ const TooltipDialogComponent = React.forwardRef<HTMLDivElement, ITooltipDialogPr
         TooltipDialogComponent,
         { [attribute]: labelValue },
         attribute,
-        defaultValue!
+        defaultValue!,
+        modalRef.current !== null /* prevents `useText` evaluation until fully mounted */
       )
     };