experiment: Use semantic table to show line numbers to assistive technology

Author: avinashbot

src/code-view/internal.tsx

@@ -66,7 +66,7 @@ export function InternalCodeView({
     >
       <div className={styles["scroll-container"]} ref={containerRef}>
         <table
-          role="presentation"
+          role={lineNumbers ? "table" : "presentation"}
           className={clsx(
             styles["code-table"],
             actions && styles["code-table-with-actions"],
@@ -77,12 +77,20 @@ export function InternalCodeView({
             <col style={{ width: 1 } /* shrink to fit content */} />
             <col style={{ width: "auto" }} />
           </colgroup>
+          {lineNumbers && (
+            <thead className={styles["table-header"]}>
+              <tr>
+                <th>Row number</th>
+                <th>Content</th>
+              </tr>
+            </thead>
+          )}
           <tbody>
             {Children.map(codeElement.props.children, (child, index) => {
               return (
                 <tr key={index}>
                   {lineNumbers && (
-                    <td className={clsx(styles["line-number"], styles.unselectable)} aria-hidden={true}>
+                    <td className={clsx(styles["line-number"], styles.unselectable)}>
                       <Box variant="code" color="text-status-inactive" fontSize="body-m">
                         {index + 1}
                       </Box>

src/code-view/styles.scss

@@ -14,7 +14,7 @@ $color-background-code-view-dark: #282c34;
   border-start-end-radius: cs.$border-radius-tiles;
   border-end-start-radius: cs.$border-radius-tiles;
   border-end-end-radius: cs.$border-radius-tiles;
-  
+
   background-color: $color-background-code-view-light;
   :global(.awsui-dark-mode) &,
   :global(.awsui-polaris-dark-mode) & {
@@ -43,6 +43,12 @@ $color-background-code-view-dark: #282c34;
   padding-inline-end: cs.$space-static-xxl;
 }
 
+.table-header {
+  position: absolute;
+  inset-block-start: -9999px;
+  inset-inline-start: -9999px;
+}
+
 .line-number {
   vertical-align: text-top;
   white-space: nowrap;