Never mind, change API a little bit more.

Author: avinashbot

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

@@ -7,8 +7,8 @@ import { CodeView, CodeViewProps } from "../../lib/components";
 import { ScreenshotArea } from "../screenshot-area";
 
 const i18nStrings: CodeViewProps.I18nStrings = {
-  lineLabel: `Line number`,
-  contentLabel: `Content`,
+  lineNumberLabel: `Line number`,
+  codeLabel: `Code`,
 };
 
 export default function CodeViewPage() {

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -48,12 +48,12 @@ exports[`definition for 'code-view' matches the snapshot 1`] = `
         "name": "CodeViewProps.I18nStrings",
         "properties": [
           {
-            "name": "contentLabel",
+            "name": "codeLabel",
             "optional": true,
             "type": "string",
           },
           {
-            "name": "lineLabel",
+            "name": "lineNumberLabel",
             "optional": true,
             "type": "string",
           },

src/code-view/__tests__/code-view.test.tsx

@@ -30,7 +30,7 @@ describe("CodeView", () => {
     render(
       <CodeView
         lineNumbers={true}
-        i18nStrings={{ lineLabel: "Line number", contentLabel: "Content" }}
+        i18nStrings={{ lineNumberLabel: "Line number", codeLabel: "Code" }}
         content={`# Hello World\n\nThis is a markdown example.`}
       />,
     );

src/code-view/interfaces.ts

@@ -50,7 +50,7 @@ export interface CodeViewProps {
 
 export namespace CodeViewProps {
   export interface I18nStrings {
-    lineLabel?: string;
-    contentLabel?: string;
+    lineNumberLabel?: string;
+    codeLabel?: string;
   }
 }

src/code-view/internal.tsx

@@ -48,7 +48,7 @@ export function InternalCodeView({
   const darkMode = useCurrentMode(containerRef) === "dark";
 
   const regionProps = ariaLabel || ariaLabelledby ? { role: "region" } : {};
-  const accessibleLineNumbers = lineNumbers && i18nStrings?.lineLabel && i18nStrings?.contentLabel;
+  const accessibleLineNumbers = lineNumbers && i18nStrings?.lineNumberLabel && i18nStrings?.codeLabel;
 
   // Create tokenized React nodes of the content.
   const code = highlight ? highlight(content) : textHighlight(content);
@@ -82,8 +82,8 @@ export function InternalCodeView({
           {accessibleLineNumbers && (
             <thead className={styles["screenreader-only"]}>
               <tr>
-                {lineNumbers && <th>{i18nStrings.lineLabel}</th>}
-                <th>{i18nStrings.contentLabel}</th>
+                {lineNumbers && <th>{i18nStrings.lineNumberLabel}</th>}
+                <th>{i18nStrings.codeLabel}</th>
               </tr>
             </thead>
           )}