a11y- Scrollable table is missing role="region"

src/components/MDXComponents/MDXTable.tsx

@@ -1,18 +1,40 @@
 import { ScrollView } from '@aws-amplify/ui-react';
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react';
 
 interface MDXTableProps extends HTMLAttributes<HTMLTableElement> {
   children: ReactNode;
 }
 
 export const MDXTable: React.FC<MDXTableProps> = ({ children, ...props }) => {
+  const ref = useRef<HTMLTableElement>(null);
+  const [caption, setCaption] = useState('');
+
+  useEffect(() => {
+    const getHeading = (el) => {
+      if (el?.previousElementSibling?.tagName.startsWith('H')) {
+        setCaption(el.previousElementSibling.textContent);
+      } else {
+        getHeading(el?.previousElementSibling);
+      }
+    };
+    getHeading(ref.current);
+  }, []);
+
+  const tableId = caption.includes(' ') ? caption.split(' ').join('') : caption;
+
   return (
     <ScrollView
       tabIndex={0}
       aria-label="Scrollable table"
+      aria-labelledby={'table:' + tableId}
       className="scrollview"
+      role="region"
+      ref={ref}
     >
-      <table {...props}>{children}</table>
+      <table {...props}>
+        <caption id={'table:' + tableId}>Table: {caption}</caption>
+        {children}
+      </table>
     </ScrollView>
   );
 };

src/components/MDXComponents/__tests__/MDXTable.test.tsx

@@ -4,54 +4,57 @@ import { MDXTable } from '../MDXTable';
 describe('MDXTable', () => {
   it('should render table', () => {
     render(
-      <MDXTable>
-        <thead>
-          <tr>
-            <th align="left"></th>
-            <th align="left">Amplify Authenticator</th>
-            <th align="left">Amplify Libraries</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td align="left">
-              <strong>Description</strong>
-            </td>
-            <td align="left">
-              Open source drop-in UI component for authentication
-            </td>
-            <td align="left">
-              Low-level building blocks for implementing authentication
-            </td>
-          </tr>
-          <tr>
-            <td align="left">
-              <strong>Benefits</strong>
-            </td>
-            <td align="left">
-              Automatically integrates with your existing Amplify configuration
-              and allows you to easily add the entire authentication flow to
-              your application. You can then customize themes to adjust colors
-              and styling as needed.
-            </td>
-            <td align="left">
-              Gives you full control over the UI and logic implementation.
-            </td>
-          </tr>
-          <tr>
-            <td align="left">
-              <strong>Constraints</strong>
-            </td>
-            <td align="left">
-              Dependent on Amplify CLI for provisioning resources.
-            </td>
-            <td align="left">
-              Requires the building of screens and frontend logic to enable the
-              sign-in and registration experiences.
-            </td>
-          </tr>
-        </tbody>
-      </MDXTable>
+      <div>
+        <h3>Heading</h3>
+        <MDXTable>
+          <thead>
+            <tr>
+              <th align="left"></th>
+              <th align="left">Amplify Authenticator</th>
+              <th align="left">Amplify Libraries</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td align="left">
+                <strong>Description</strong>
+              </td>
+              <td align="left">
+                Open source drop-in UI component for authentication
+              </td>
+              <td align="left">
+                Low-level building blocks for implementing authentication
+              </td>
+            </tr>
+            <tr>
+              <td align="left">
+                <strong>Benefits</strong>
+              </td>
+              <td align="left">
+                Automatically integrates with your existing Amplify
+                configuration and allows you to easily add the entire
+                authentication flow to your application. You can then customize
+                themes to adjust colors and styling as needed.
+              </td>
+              <td align="left">
+                Gives you full control over the UI and logic implementation.
+              </td>
+            </tr>
+            <tr>
+              <td align="left">
+                <strong>Constraints</strong>
+              </td>
+              <td align="left">
+                Dependent on Amplify CLI for provisioning resources.
+              </td>
+              <td align="left">
+                Requires the building of screens and frontend logic to enable
+                the sign-in and registration experiences.
+              </td>
+            </tr>
+          </tbody>
+        </MDXTable>
+      </div>
     );
 
     const tableHeading = screen.getByText('Amplify Authenticator');

src/styles/table.scss

@@ -19,6 +19,10 @@ table:not([class]) {
       background-color: var(--amplify-colors-neutral-10);
     }
   }
+  caption {
+    visibility: hidden;
+    line-height: 0;
+  }
 }
 
 .scrollview {