From f3408ed4950319cd6ca63ba3e57fd22e918fcce8 Mon Sep 17 00:00:00 2001
From: Brett Jephson <brett@gitbook.io>
Date: Mon, 6 Jul 2026 16:58:23 +0100
Subject: [PATCH] A11y fix: table structure (#4368)

---
 .changeset/wacky-eyes-post.md                               | 5 +++++
 .../src/components/DocumentView/Table/StickyViewGrid.tsx    | 6 +++++-
 .../gitbook/src/components/DocumentView/Table/Table.tsx     | 5 ++++-
 .../gitbook/src/components/DocumentView/Table/ViewGrid.tsx  | 6 +-----
 4 files changed, 15 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/wacky-eyes-post.md

diff --git a/.changeset/wacky-eyes-post.md b/.changeset/wacky-eyes-post.md
new file mode 100644
index 000000000..0ef6f6347
--- /dev/null
+++ b/.changeset/wacky-eyes-post.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+a11y screen reader fixes
diff --git a/packages/gitbook/src/components/DocumentView/Table/StickyViewGrid.tsx b/packages/gitbook/src/components/DocumentView/Table/StickyViewGrid.tsx
index 791902054..7268d3dbb 100644
--- a/packages/gitbook/src/components/DocumentView/Table/StickyViewGrid.tsx
+++ b/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
diff --git a/packages/gitbook/src/components/DocumentView/Table/Table.tsx b/packages/gitbook/src/components/DocumentView/Table/Table.tsx
index 3e0c1ffd7..8166ebeea 100644
--- a/packages/gitbook/src/components/DocumentView/Table/Table.tsx
+++ b/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}
diff --git a/packages/gitbook/src/components/DocumentView/Table/ViewGrid.tsx b/packages/gitbook/src/components/DocumentView/Table/ViewGrid.tsx
index 53a6b23a1..7249647f4 100644
--- a/packages/gitbook/src/components/DocumentView/Table/ViewGrid.tsx
+++ b/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>;
 }