fix(a11y): fix traces page accessibility violations — rowgroup tabbable

src/frontend/src/components/core/codeTabsComponent/index.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import {
   oneDark,
@@ -19,6 +20,7 @@ export default function SimplifiedCodeTabComponent({
   language,
   maxHeight,
 }: SimplifiedCodeTabProps) {
+  const { t } = useTranslation();
   const [isCopied, setIsCopied] = useState<boolean>(false);
   const dark = useDarkStore((state) => state.dark);
 
@@ -51,6 +53,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" />

src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/index.tsx

@@ -13,6 +13,7 @@ import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
 import cloneDeep from "lodash";
 import { type ElementRef, forwardRef, 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,6 +265,7 @@ 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);
@@ -382,6 +384,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 +497,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

src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/utils/applyRowTabIndices.ts

@@ -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");
+    });
+}

src/frontend/src/components/ui/alert.tsx

@@ -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}

src/frontend/src/locales/de.json

@@ -217,6 +217,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",
@@ -1948,6 +1950,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",

src/frontend/src/locales/en.json

@@ -1341,6 +1341,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",
@@ -1515,6 +1519,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",

src/frontend/src/locales/es.json

@@ -217,6 +217,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}} »",
@@ -1948,6 +1950,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",

src/frontend/src/locales/fr.json

@@ -217,6 +217,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}}",
@@ -1948,6 +1950,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",

src/frontend/src/locales/ja.json

@@ -217,6 +217,8 @@
   "chat.cannotOpenDescription": "これはチャットフローではありません。",
   "chat.cannotOpenTitle": "チャットが開けません",
   "chat.copied": "コピーされました",
+  "chat.copyCode": "Copy code",
+  "chat.copiedCode": "Code copied",
   "chat.copyMessage": "メッセージをコピーする",
   "chat.defaultSession": "デフォルトのセッション",
   "chat.deleteSessionsCount_one": "{{count}} のセッションを削除する",
@@ -1948,6 +1950,10 @@
   "trace.clearAll": "すべて消去",
   "trace.clearAllConfirm": "すべての記録を削除してもよろしいですか？ これにより、関連するすべてのフローアクティビティトレースが完全に削除され、元に戻すことはできません。",
   "trace.clearAllRecords": "すべての記録を消去",
+  "trace.tableAriaLabel": "Trace runs table",
+  "trace.statusFilterLabel": "Filter by status",
+  "trace.expandSpan": "Expand span",
+  "trace.collapseSpan": "Collapse span",
   "trace.clearDates": "日付を消去",
   "trace.clearError": "レコードの削除中にエラーが発生しました",
   "trace.clearedSuccess": "レコードのクリアに成功しました",

src/frontend/src/locales/pt.json

@@ -217,6 +217,8 @@
   "chat.cannotOpenDescription": "Isso não é um fluxo de chat.",
   "chat.cannotOpenTitle": "Não é possível abrir o chat",
   "chat.copied": "Copiado!",
+  "chat.copyCode": "Copy code",
+  "chat.copiedCode": "Code copied",
   "chat.copyMessage": "Copiar mensagem",
   "chat.defaultSession": "Sessão padrão",
   "chat.deleteSessionsCount_one": "Excluir a sessão do {{count}}",
@@ -1948,6 +1950,10 @@
   "trace.clearAll": "Limpar Tudo",
   "trace.clearAllConfirm": "Tem certeza de que deseja apagar todos os registros? Isso excluirá permanentemente todos os rastros de atividade do fluxo relacionados e não poderá ser desfeito.",
   "trace.clearAllRecords": "Limpar todos os registros",
+  "trace.tableAriaLabel": "Trace runs table",
+  "trace.statusFilterLabel": "Filter by status",
+  "trace.expandSpan": "Expand span",
+  "trace.collapseSpan": "Collapse span",
   "trace.clearDates": "Limpar datas",
   "trace.clearError": "Erro ao limpar registros",
   "trace.clearedSuccess": "Os registros foram apagados com sucesso",

src/frontend/src/locales/zh-Hans.json

@@ -217,6 +217,8 @@
   "chat.cannotOpenDescription": "这不是一个聊天流程。",
   "chat.cannotOpenTitle": "无法打开聊天窗口",
   "chat.copied": "已复制！",
+  "chat.copyCode": "Copy code",
+  "chat.copiedCode": "Code copied",
   "chat.copyMessage": "复制消息",
   "chat.defaultSession": "默认会话",
   "chat.deleteSessionsCount_one": "删除 {{count}} 会话",
@@ -1948,6 +1950,10 @@
   "trace.clearAll": "全部清除",
   "trace.clearAllConfirm": "您确定要清除所有记录吗？ 这将永久删除所有相关的流程活动跟踪记录，且无法撤销。",
   "trace.clearAllRecords": "清除所有记录",
+  "trace.tableAriaLabel": "Trace runs table",
+  "trace.statusFilterLabel": "Filter by status",
+  "trace.expandSpan": "Expand span",
+  "trace.collapseSpan": "Collapse span",
   "trace.clearDates": "清除日期",
   "trace.clearError": "清除记录时发生错误",
   "trace.clearedSuccess": "记录已成功清除",

src/frontend/src/pages/FlowPage/components/TraceComponent/FlowInsightsContent.tsx

@@ -1,4 +1,4 @@
-import type { CellClickedEvent } from "ag-grid-community";
+import type { CellClickedEvent, CellKeyDownEvent } from "ag-grid-community";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSearchParams } from "react-router-dom";
@@ -182,6 +182,15 @@ export function FlowInsightsContent({
     setTracePanelOpen(true);
   }, []);
 
+  const handleCellKeyDown = useCallback((event: CellKeyDownEvent) => {
+    const keyboardEvent = event.event as KeyboardEvent | undefined;
+    if (keyboardEvent?.key === "Enter") {
+      const rowData = event.data as TraceListItem | undefined;
+      setTracePanelTraceId(rowData?.id ?? null);
+      setTracePanelOpen(true);
+    }
+  }, []);
+
   const totalRuns = tracesData?.total ?? rows.length;
   const totalPages = Math.max(
     1,
@@ -306,7 +315,10 @@ export function FlowInsightsContent({
             </div>
 
             <Select value={statusFilter} onValueChange={setStatusFilter}>
-              <SelectTrigger className="h-8 w-[130px] [&>span]:truncate">
+              <SelectTrigger
+                className="h-8 w-[130px] [&>span]:truncate"
+                aria-label={t("trace.statusFilterLabel")}
+              >
                 <SelectValue placeholder={t("trace.allStatus")} />
               </SelectTrigger>
               <SelectContent>
@@ -404,6 +416,7 @@ export function FlowInsightsContent({
             <TableComponent
               key="Executions"
               readOnlyEdit
+              aria-label={t("trace.tableAriaLabel")}
               className="h-max-full h-full w-full"
               data-testid="flow-insights-trace-table"
               pagination={false}
@@ -412,6 +425,7 @@ export function FlowInsightsContent({
               rowData={rows}
               headerHeight={rows.length === 0 ? 0 : undefined}
               onCellClicked={handleCellClicked}
+              onCellKeyDown={handleCellKeyDown}
             />
           )}
         </div>

src/frontend/src/pages/FlowPage/components/TraceComponent/SpanNode.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import IconComponent from "@/components/common/genericIconComponent";
 import useFlowStore from "@/stores/flowStore";
 import { cn } from "@/utils/utils";
@@ -22,6 +23,7 @@ export function SpanNode({
   onToggle,
   onSelect,
 }: SpanNodeProps) {
+  const { t } = useTranslation();
   const nodes = useFlowStore((state) => state.nodes);
   const componentIconMap = useMemo(() => {
     const map = new Map<string, string>();
@@ -71,6 +73,13 @@ export function SpanNode({
         }}
         tabIndex={-1}
         aria-hidden={!hasChildren}
+        aria-label={
+          hasChildren
+            ? isExpanded
+              ? t("trace.collapseSpan")
+              : t("trace.expandSpan")
+            : undefined
+        }
       >
         <IconComponent
           name={isExpanded ? "ChevronDown" : "ChevronRight"}

src/frontend/src/pages/FlowPage/components/TraceComponent/__tests__/FlowInsightsContent.a11y.test.ts

@@ -0,0 +1,60 @@
+import { applyRowTabIndices } from "@/components/core/parameterRenderComponent/components/tableComponent/utils/applyRowTabIndices";
+
+function makeGrid(rowCount: number): HTMLElement {
+  const container = document.createElement("div");
+  const colsContainer = document.createElement("div");
+  colsContainer.className = "ag-center-cols-container";
+
+  for (let i = 0; i < rowCount; i++) {
+    const row = document.createElement("div");
+    row.setAttribute("role", "row");
+    colsContainer.appendChild(row);
+  }
+
+  container.appendChild(colsContainer);
+  return container;
+}
+
+describe("applyRowTabIndices — rowgroup tabbable fix", () => {
+  it("sets tabindex=0 on the first row and -1 on all others", () => {
+    const container = makeGrid(3);
+    applyRowTabIndices(container);
+
+    const rows = container.querySelectorAll<HTMLElement>("[role='row']");
+    expect(rows[0].getAttribute("tabindex")).toBe("0");
+    expect(rows[1].getAttribute("tabindex")).toBe("-1");
+    expect(rows[2].getAttribute("tabindex")).toBe("-1");
+  });
+
+  it("handles a single row — that row gets tabindex=0", () => {
+    const container = makeGrid(1);
+    applyRowTabIndices(container);
+
+    const rows = container.querySelectorAll<HTMLElement>("[role='row']");
+    expect(rows[0].getAttribute("tabindex")).toBe("0");
+  });
+
+  it("does nothing when containerEl is null", () => {
+    expect(() => applyRowTabIndices(null)).not.toThrow();
+  });
+
+  it("does nothing when there are no rows", () => {
+    const container = makeGrid(0);
+    applyRowTabIndices(container);
+
+    const rows = container.querySelectorAll("[role='row']");
+    expect(rows.length).toBe(0);
+  });
+
+  it("overwrites any existing tabindex on rows", () => {
+    const container = makeGrid(2);
+    const rows = container.querySelectorAll<HTMLElement>("[role='row']");
+    rows[0].setAttribute("tabindex", "5");
+    rows[1].setAttribute("tabindex", "5");
+
+    applyRowTabIndices(container);
+
+    expect(rows[0].getAttribute("tabindex")).toBe("0");
+    expect(rows[1].getAttribute("tabindex")).toBe("-1");
+  });
+});

src/frontend/tests/a11y/auth-pages.a11y.spec.ts

@@ -1,4 +1,5 @@
-import { expect, type LangflowPage, test } from "../fixtures";
+import { expect, test } from "../fixtures";
+import type { LangflowPage } from "../utils/types";
 
 async function disableAutoLogin(page: LangflowPage) {
   await page.route("**/api/v1/auto_login", (route) => {

src/frontend/tests/fixtures.ts

@@ -13,8 +13,6 @@ import {
 } from "./utils/accessibility-checker";
 import type { A11yScanOptions, LangflowPage } from "./utils/types";
 
-export type { A11yScanOptions, LangflowPage } from "./utils/types";
-
 const RUN_A11Y = process.env.RUN_A11Y === "true";
 const RUN_A11Y_ASSERT = process.env.RUN_A11Y_ASSERT === "true";