From 4d45b2a4e6805319aaba38a6bfeee751238078ef Mon Sep 17 00:00:00 2001
From: adrians5j <adrian@webiny.com>
Date: Mon, 20 Jan 2025 16:42:14 +0100
Subject: [PATCH] fix: do not use VisuallyHidden component

---
 .../src/Drawer/components/DrawerHeader.tsx    | 30 ++++---------------
 1 file changed, 6 insertions(+), 24 deletions(-)

diff --git a/packages/admin-ui/src/Drawer/components/DrawerHeader.tsx b/packages/admin-ui/src/Drawer/components/DrawerHeader.tsx
index 0617ef1451..4d555ee316 100644
--- a/packages/admin-ui/src/Drawer/components/DrawerHeader.tsx
+++ b/packages/admin-ui/src/Drawer/components/DrawerHeader.tsx
@@ -3,7 +3,6 @@ import { cn } from "~/utils";
 import { type DrawerProps } from "../Drawer";
 import { DrawerTitle } from "./DrawerTitle";
 import { DrawerDescription } from "./DrawerDescription";
-import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { ReactComponent as XIcon } from "@material-design-icons/svg/filled/close.svg";
 import { IconButton } from "~/Button";
 import * as DrawerPrimitive from "@radix-ui/react-dialog";
@@ -19,28 +18,8 @@ export const DrawerHeader = ({
     className,
     ...props
 }: DrawerHeaderProps) => {
-    let renderedTitle = (
-        <DrawerTitle>
-            {titleIcon}
-            {title}
-        </DrawerTitle>
-    );
-    if (!title) {
-        renderedTitle = <VisuallyHidden.Root>{renderedTitle}</VisuallyHidden.Root>;
-    }
-
-    let renderedDescription = <DrawerDescription>{description}</DrawerDescription>;
-    if (!description) {
-        renderedDescription = <VisuallyHidden.Root>{renderedDescription}</VisuallyHidden.Root>;
-    }
-
     if (!title && !description) {
-        return (
-            <>
-                {renderedTitle}
-                {renderedDescription}
-            </>
-        );
+        return null;
     }
 
     return (
@@ -57,9 +36,12 @@ export const DrawerHeader = ({
                         <IconButton size="md" iconSize="lg" variant={"ghost"} icon={<XIcon />} />
                     </DrawerPrimitive.Close>
                 )}
-                {renderedTitle}
+                <DrawerTitle>
+                    {titleIcon}
+                    {title}
+                </DrawerTitle>
             </div>
-            {renderedDescription}
+            <DrawerDescription>{description}</DrawerDescription>
         </div>
     );
 };