A11y fix: table structure (#4368)

.changeset/wacky-eyes-post.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+a11y screen reader fixes

packages/gitbook/src/components/DocumentView/Table/StickyViewGrid.tsx

@@ -28,7 +28,10 @@ function DefaultHeaderScrollGrid({
 
     return (
         <div className={className}>
-            <div className="group/table relative flex w-full min-w-0 max-w-full flex-col rounded-lg border-tint-subtle">
+            <div
+                role="table"
+                className="group/table relative flex w-full min-w-0 max-w-full flex-col rounded-lg border-tint-subtle"
+            >
                 <div className="w-full min-w-0 overflow-x-auto overflow-y-hidden overscroll-x-none border-tint-subtle">
                     <div className={tcls('flex', 'flex-col', resolvedTableClassName)}>
                         {header}
@@ -137,6 +140,7 @@ function StickyHeaderOverlayScrollGrid({
                 ref={rootRef}
                 className="group/table relative flex w-full min-w-0 max-w-full flex-col rounded-lg border-tint-subtle data-[scrollable=true]:border"
                 data-scrollable="false"
+                role="table"
             >
                 {header ? (
                     <div

packages/gitbook/src/components/DocumentView/Table/Table.tsx

@@ -140,7 +140,10 @@ function TableView({
                             'w-full min-w-0 overflow-x-auto overflow-y-hidden overscroll-x-none border-tint-subtle '
                         )}
                     >
-                        <div className={tcls('flex', 'flex-col', tableContainerClassName)}>
+                        <div
+                            className={tcls('flex', 'flex-col', tableContainerClassName)}
+                            role="table"
+                        >
                             {withHeader ? (
                                 <ViewGridHeader
                                     {...gridProps}

packages/gitbook/src/components/DocumentView/Table/ViewGrid.tsx

@@ -108,9 +108,5 @@ export function ViewGrid(props: ViewGridProps) {
         </div>
     );
 
-    return (
-        <div role="table" className={tcls('flex', 'flex-col', tableClassName ?? tableWidth)}>
-            {body}
-        </div>
-    );
+    return <div className={tcls('flex', 'flex-col', tableClassName ?? tableWidth)}>{body}</div>;
 }