feat: replace Comment div with DrawerDescription component and add aria-describedby for accessibility

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Comment/Comment.tsx

@@ -1,3 +1,4 @@
+import { DrawerDescription } from '@liam-hq/ui'
 import type { FC } from 'react'
 import styles from './Comment.module.css'
 
@@ -7,8 +8,8 @@ type Props = {
 
 export const Comment: FC<Props> = ({ comment }) => {
   return (
-    <div className={styles.wrapper}>
+    <DrawerDescription className={styles.wrapper}>
       <p className={styles.text}>{comment}</p>
-    </div>
+    </DrawerDescription>
   )
 }

frontend/packages/erd-core/src/components/ERDRenderer/TableDetailDrawer/TableDetailDrawer.tsx

@@ -54,12 +54,19 @@ export const TableDetailDrawer: FC = () => {
     active: { tableName },
   } = useUserEditingStore()
   const table = tables[tableName ?? '']
+  const ariaDescribedBy =
+    table?.comment == null
+      ? {
+          'aria-describedby': undefined,
+        }
+      : {}
 
   return (
     <DrawerPortal>
       <DrawerContent
         style={{ '--drawer-animation-duration': `${ANIMATION_DURATION}ms` }}
         className={styles.content}
+        {...ariaDescribedBy}
       >
         {table !== undefined && <TableDetail table={table} />}
       </DrawerContent>

frontend/packages/ui/src/components/Drawer/Drawer.tsx

@@ -29,4 +29,6 @@ DrawerContent.displayName = Drawer.Content.displayName
 
 export const DrawerTitle = Drawer.Title
 
+export const DrawerDescription = Drawer.Description
+
 export const DrawerClose = Drawer.Close