Keep non-table format.

Author: avinashbot

pages/code-view/with-line-numbers.page.tsx

@@ -21,7 +21,7 @@ export default function CodeViewPage() {
         <div style={{ wordBreak: "break-word" }}>
           <CodeView
             lineNumbers={true}
-            content={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i) => `This is line number #${i + 1}.`).join("\n")}
+            content={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i) => `This is line number #${i}.`).join("\n")}
           />
         </div>
       </SpaceBetween>

src/code-view/internal.tsx

@@ -66,7 +66,7 @@ export function InternalCodeView({
     >
       <div className={styles["scroll-container"]} ref={containerRef}>
         <table
-          role={lineNumbers ? "table" : "presentation"}
+          role="presentation"
           className={clsx(
             styles["code-table"],
             actions && styles["code-table-with-actions"],
@@ -77,26 +77,19 @@ 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)}>
+                    <td className={clsx(styles["line-number"], styles.unselectable)} aria-hidden={true}>
                       <Box variant="code" color="text-status-inactive" fontSize="body-m">
                         {index + 1}
                       </Box>
                     </td>
                   )}
                   <td className={styles["code-line"]}>
+                    <span className={styles["screenreader-only"]}>Line {index + 1} </span>
                     <Box variant="code" fontSize="body-m">
                       <span
                         className={clsx(

src/code-view/styles.scss

@@ -43,7 +43,7 @@ $color-background-code-view-dark: #282c34;
   padding-inline-end: cs.$space-static-xxl;
 }
 
-.table-header {
+.screenreader-only {
   position: absolute;
   inset-block-start: -9999px;
   inset-inline-start: -9999px;