langflow-ai
diff --git a/‎src/frontend/src/components/core/codeTabsComponent/index.tsx‎
Lines changed: 11 additions & 5 deletions b/‎src/frontend/src/components/core/codeTabsComponent/index.tsx‎
Lines changed: 11 additions & 5 deletions
diff --git a/‎src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/__tests__/tableComponent.a11y.test.tsx‎
Lines changed: 67 additions & 0 deletions b/‎src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/__tests__/tableComponent.a11y.test.tsx‎
Lines changed: 67 additions & 0 deletions
diff --git a/‎src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/index.tsx‎
Lines changed: 24 additions & 1 deletion b/‎src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/index.tsx‎
Lines changed: 24 additions & 1 deletion
diff --git a/‎src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/utils/applyRowTabIndices.ts‎
Lines changed: 8 additions & 0 deletions b/‎src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/utils/applyRowTabIndices.ts‎
Lines changed: 8 additions & 0 deletions
diff --git a/‎src/frontend/src/components/ui/alert.tsx‎
Lines changed: 4 additions & 4 deletions b/‎src/frontend/src/components/ui/alert.tsx‎
Lines changed: 4 additions & 4 deletions
diff --git a/‎src/frontend/src/components/ui/dialog.tsx‎
Lines changed: 1 addition & 1 deletion b/‎src/frontend/src/components/ui/dialog.tsx‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/frontend/src/locales/de.json‎
Lines changed: 6 additions & 0 deletions b/‎src/frontend/src/locales/de.json‎
Lines changed: 6 additions & 0 deletions
diff --git a/‎src/frontend/src/locales/en.json‎
Lines changed: 6 additions & 0 deletions b/‎src/frontend/src/locales/en.json‎
Lines changed: 6 additions & 0 deletions
diff --git a/‎src/frontend/src/locales/es.json‎
Lines changed: 6 additions & 0 deletions b/‎src/frontend/src/locales/es.json‎
Lines changed: 6 additions & 0 deletions
diff --git a/‎src/frontend/src/locales/fr.json‎
Lines changed: 6 additions & 0 deletions b/‎src/frontend/src/locales/fr.json‎
Lines changed: 6 additions & 0 deletions
@@ -1,9 +1,8 @@
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import {
-  oneDark,
-  oneLight,
-} from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import a11yLight from "react-syntax-highlighter/dist/cjs/styles/prism/a11y-one-light";
 import { useDarkStore } from "@/stores/darkStore";
 import IconComponent from "../../common/genericIconComponent";
 import { Button } from "../../ui/button";
@@ -12,13 +11,19 @@ type SimplifiedCodeTabProps = {
   code: string;
   language: string;
   maxHeight?: string;
+  // Override the light-mode syntax theme. Defaults to a11yLight (WCAG-compliant
+  // contrast on bg-canvas). Pass a different prism style object if your call
+  // site uses a background where a11yLight's palette causes contrast issues.
+  lightStyle?: { [key: string]: React.CSSProperties };
 };
 
 export default function SimplifiedCodeTabComponent({
   code,
   language,
   maxHeight,
+  lightStyle = a11yLight,
 }: SimplifiedCodeTabProps) {
+  const { t } = useTranslation();
   const [isCopied, setIsCopied] = useState<boolean>(false);
   const dark = useDarkStore((state) => state.dark);
 
@@ -51,6 +56,7 @@ export default function SimplifiedCodeTabComponent({
           className="text-muted-foreground hover:bg-card"
           data-testid="copy-code-button"
           onClick={copyToClipboard}
+          aria-label={isCopied ? t("chat.copiedCode") : t("chat.copyCode")}
         >
           {isCopied ? (
             <IconComponent name="Check" className="h-4 w-4" />
@@ -61,7 +67,7 @@ export default function SimplifiedCodeTabComponent({
       </div>
       <SyntaxHighlighter
         language={language.toLowerCase()}
-        style={dark ? oneDark : oneLight}
+        style={dark ? oneDark : lightStyle}
         className="!mt-0 h-full w-full overflow-auto !bg-canvas [&_code]:!bg-canvas !rounded-b-md !rounded-t-none border border-border text-left custom-scroll"
         customStyle={maxHeight ? { maxHeight } : undefined}
       >
 
@@ -0,0 +1,67 @@
+import { render, waitFor } from "@testing-library/react";
+import type { ForwardedRef } from "react";
+import TableComponent from "../index";
+
+const mockSetGridAriaProperty = jest.fn();
+const mockApi = {
+  applyColumnState: jest.fn(),
+  getColumnDefs: jest.fn(() => []),
+  getColumnState: jest.fn(() => []),
+  getColumns: jest.fn(() => []),
+  getSelectedRows: jest.fn(() => []),
+  hideOverlay: jest.fn(),
+  isDestroyed: jest.fn(() => false),
+  setGridAriaProperty: mockSetGridAriaProperty,
+  setGridOption: jest.fn(),
+  sizeColumnsToFit: jest.fn(),
+};
+
+jest.mock("ag-grid-react", () => {
+  const React = require("react");
+  type MockGridReadyParams = {
+    api: typeof mockApi;
+    columnApi: { getAllGridColumns: jest.Mock };
+  };
+  type MockAgGridProps = {
+    onGridReady?: (params: MockGridReadyParams) => void;
+  };
+
+  return {
+    AgGridReact: React.forwardRef(
+      (props: MockAgGridProps, ref: ForwardedRef<{ api: typeof mockApi }>) => {
+        React.useImperativeHandle(ref, () => ({ api: mockApi }));
+        React.useEffect(() => {
+          props.onGridReady?.({
+            api: mockApi,
+            columnApi: { getAllGridColumns: jest.fn(() => []) },
+          });
+        }, [props.onGridReady]);
+
+        return <div role="treegrid" />;
+      },
+    ),
+  };
+});
+
+describe("TableComponent accessibility", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("applies aria-label to the ag-grid panel", async () => {
+    render(
+      <TableComponent
+        aria-label="Trace runs table"
+        columnDefs={[{ field: "name" }]}
+        rowData={[{ name: "Run 1" }]}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(mockSetGridAriaProperty).toHaveBeenCalledWith(
+        "label",
+        "Trace runs table",
+      );
+    });
+  });
+});
@@ -11,8 +11,15 @@ import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the
 import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
 import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
 import cloneDeep from "lodash";
-import { type ElementRef, forwardRef, useRef, useState } from "react";
+import {
+  type ElementRef,
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import TableOptions from "./components/TableOptions";
+import { applyRowTabIndices } from "./utils/applyRowTabIndices";
 import resetGrid from "./utils/reset-grid-columns";
 
 export interface TableComponentProps extends AgGridReactProps {
@@ -264,9 +271,11 @@ const TableComponent = forwardRef<
     // @ts-ignore
     const realRef: React.MutableRefObject<AgGridReact> =
       useRef<AgGridReact | null>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
     const dark = useDarkStore((state) => state.dark);
     const initialColumnDefs = useRef(colDef);
     const [columnStateChange, setColumnStateChange] = useState(false);
+    const ariaLabel = props["aria-label"] as string | undefined;
     // Only use visible columns for the store reference
     const storeReference = props.columnDefs
       .filter((col) => !col.hide)
@@ -276,6 +285,7 @@ const TableComponent = forwardRef<
     const onGridReady = (params) => {
       // @ts-ignore
       realRef.current = params;
+      params.api.setGridAriaProperty("label", ariaLabel ?? null);
       const updatedColumnDefs = [...colDef];
       params.api.setGridOption("columnDefs", updatedColumnDefs);
       const customInit = localStorage.getItem(storeReference);
@@ -302,6 +312,10 @@ const TableComponent = forwardRef<
       }, 1000);
       if (props.onGridReady) props.onGridReady(params);
     };
+
+    useEffect(() => {
+      realRef.current?.api?.setGridAriaProperty("label", ariaLabel ?? null);
+    }, [ariaLabel]);
     const onColumnMoved = (params) => {
       const updatedColumnDefs = cloneDeep(
         params.columnApi.getAllGridColumns().map((col) => col.getColDef()),
@@ -382,6 +396,7 @@ const TableComponent = forwardRef<
 
     return (
       <div
+        ref={containerRef}
         className={cn(
           dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
           "ag-theme-shadcn flex h-full flex-col",
@@ -494,6 +509,14 @@ const TableComponent = forwardRef<
               setColumnStateChange(true);
             }
           }}
+          onFirstDataRendered={(e) => {
+            applyRowTabIndices(containerRef.current);
+            props.onFirstDataRendered?.(e);
+          }}
+          onRowDataUpdated={(e) => {
+            applyRowTabIndices(containerRef.current);
+            props.onRowDataUpdated?.(e);
+          }}
         />
         {!props.tableOptions?.hide_options && props.pagination && (
           <TableOptions
 
@@ -0,0 +1,8 @@
+export function applyRowTabIndices(containerEl: HTMLElement | null): void {
+  if (!containerEl) return;
+  containerEl
+    .querySelectorAll<HTMLElement>(".ag-center-cols-container [role='row']")
+    .forEach((row, idx) => {
+      row.setAttribute("tabindex", idx === 0 ? "0" : "-1");
+    });
+}
@@ -32,10 +32,10 @@ const Alert = React.forwardRef<
 Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement> & { as?: React.ElementType }
+>(({ className, as: Comp = "div", ...props }, ref) => (
+  <Comp
     ref={ref}
     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
     {...props}
 
@@ -142,7 +142,7 @@ const DialogContent = React.forwardRef<
                   closeButtonClassName,
                 )}
               >
-                <Cross2Icon className="h-[18px] w-[18px]" />
+                <Cross2Icon className="h-[18px] w-[18px]" aria-hidden={true} />
                 <span className="sr-only">Close</span>
               </DialogPrimitive.Close>
             </ShadTooltip>
 
@@ -218,6 +218,8 @@
   "chat.cannotOpenDescription": "Dies ist kein Chat-Ablauf.",
   "chat.cannotOpenTitle": "Der Chat lässt sich nicht öffnen",
   "chat.copied": "Kopiert!",
+  "chat.copyCode": "Copy code",
+  "chat.copiedCode": "Code copied",
   "chat.copyMessage": "Nachricht kopieren",
   "chat.defaultSession": "Standardsitzung",
   "chat.deleteSessionsCount_one": "{{count}} -Sitzung löschen",
@@ -1957,6 +1959,10 @@
   "trace.clearAll": "Alles löschen",
   "trace.clearAllConfirm": "Möchten Sie wirklich alle Datensätze löschen? Dadurch werden alle zugehörigen Flow-Aktivitätsverläufe endgültig gelöscht; dieser Vorgang kann nicht rückgängig gemacht werden.",
   "trace.clearAllRecords": "Alle Datensätze löschen",
+  "trace.tableAriaLabel": "Trace runs table",
+  "trace.statusFilterLabel": "Filter by status",
+  "trace.expandSpan": "Expand span",
+  "trace.collapseSpan": "Collapse span",
   "trace.clearDates": "Termine löschen",
   "trace.clearError": "Fehler beim Löschen von Datensätzen",
   "trace.clearedSuccess": "Datensätze wurden erfolgreich gelöscht",
 
@@ -1346,6 +1346,10 @@
   "trace.dateRangeLabel": "{{start}} - {{end}}",
   "trace.invalidDateRangeMessage": "End date cannot be earlier than start date.",
   "trace.clearDates": "Clear dates",
+  "trace.tableAriaLabel": "Trace runs table",
+  "trace.statusFilterLabel": "Filter by status",
+  "trace.expandSpan": "Expand span",
+  "trace.collapseSpan": "Collapse span",
   "flow.restoreVersion": "Restore this version of your flow",
   "flow.saveVersion": "Save a version of your flow",
   "flow.moreOptions": "More options",
@@ -1520,6 +1524,8 @@
   "chat.options": "Options",
   "chat.editMessage": "Edit message",
   "chat.copied": "Copied!",
+  "chat.copyCode": "Copy code",
+  "chat.copiedCode": "Code copied",
   "chat.copyMessage": "Copy message",
   "chat.helpful": "Helpful",
   "chat.notHelpful": "Not helpful",
 
@@ -218,6 +218,8 @@
   "chat.cannotOpenDescription": "Esto no es un flujo de chat.",
   "chat.cannotOpenTitle": "No se puede abrir el chat",
   "chat.copied": "Copiado",
+  "chat.copyCode": "Copy code",
+  "chat.copiedCode": "Code copied",
   "chat.copyMessage": "Copiar mensaje",
   "chat.defaultSession": "Sesión predeterminada",
   "chat.deleteSessionsCount_one": "Eliminar una sesión de « {{count}} »",
@@ -1957,6 +1959,10 @@
   "trace.clearAll": "Borrar todo",
   "trace.clearAllConfirm": "¿Estás seguro de que quieres borrar todos los registros? Esto eliminará de forma permanente todos los registros de actividad de Flow relacionados y no se podrá deshacer.",
   "trace.clearAllRecords": "Borrar todos los registros",
+  "trace.tableAriaLabel": "Trace runs table",
+  "trace.statusFilterLabel": "Filter by status",
+  "trace.expandSpan": "Expand span",
+  "trace.collapseSpan": "Collapse span",
   "trace.clearDates": "Borrar fechas",
   "trace.clearError": "Error al borrar registros",
   "trace.clearedSuccess": "Los registros se han borrado correctamente",
 
@@ -218,6 +218,8 @@
   "chat.cannotOpenDescription": "Ce n'est pas un flux de conversation.",
   "chat.cannotOpenTitle": "Impossible d'ouvrir la discussion",
   "chat.copied": "Copié",
+  "chat.copyCode": "Copy code",
+  "chat.copiedCode": "Code copied",
   "chat.copyMessage": "Copier le message",
   "chat.defaultSession": "Session par défaut",
   "chat.deleteSessionsCount_one": "Supprimer la session d' {{count}}",
@@ -1957,6 +1959,10 @@
   "trace.clearAll": "Effacer tout",
   "trace.clearAllConfirm": "Êtes-vous sûr de vouloir effacer tous les enregistrements? Cette opération supprimera définitivement toutes les traces d'activité de flux associées et ne pourra pas être annulée.",
   "trace.clearAllRecords": "Effacer tous les enregistrements",
+  "trace.tableAriaLabel": "Trace runs table",
+  "trace.statusFilterLabel": "Filter by status",
+  "trace.expandSpan": "Expand span",
+  "trace.collapseSpan": "Collapse span",
   "trace.clearDates": "Effacer les dates",
   "trace.clearError": "Erreur lors de la suppression des enregistrements",
   "trace.clearedSuccess": "Les enregistrements ont été effacés avec succès",
Original file line number	Diff line number	Diff line change
`@@ -142,7 +142,7 @@ const DialogContent = React.forwardRef<`
`142`	`142`	`closeButtonClassName,`
`143`	`143`	`)}`
`144`	`144`	`>`
`145`		`- <Cross2Icon className="h-[18px] w-[18px]" />`
	`145`	`+ <Cross2Icon className="h-[18px] w-[18px]" aria-hidden={true} />`
`146`	`146`	`<span className="sr-only">Close</span>`
`147`	`147`	`</DialogPrimitive.Close>`
`148`	`148`	`</ShadTooltip>`