fix: settings/messages accessibility (#14064)

refactor: enhance accessibility and styling in various components

- Updated StringReader component to improve styling with min-width and leading adjustments.
- Added keyboard event handling in TableComponent to prevent double activation of dialogs.
- Enhanced SessionView component with new keyboard event handling for cell selection.
- Improved TextModal styling for better alignment and readability.
- Added aria-label to TextEditorArea for improved accessibility.
- Introduced accessibility tests for HeaderMessagesComponent and messagesPage to ensure compliance.

These changes aim to enhance user experience and accessibility across the application.

Author: deon-sanchez

src/frontend/src/components/common/stringReaderComponent/index.tsx

@@ -12,7 +12,7 @@ export default function StringReader({
   return (
     <TextModal editable={editable} setValue={setValue} value={string ?? ""}>
       {/* INVISIBLE CHARACTER TO PREVENT AGgrid bug */}
-      <span className="truncate">{string ?? "‎"}</span>
+      <span className="min-w-0 truncate leading-6">{string ?? "‎"}</span>
     </TextModal>
   );
 }

src/frontend/src/modals/IOModal/components/session-view.tsx

@@ -1,5 +1,10 @@
 import { useIsFetching } from "@tanstack/react-query";
-import type { NewValueParams, SelectionChangedEvent } from "ag-grid-community";
+import type {
+  CellKeyDownEvent,
+  NewValueParams,
+  SelectionChangedEvent,
+  SuppressKeyboardEventParams,
+} from "ag-grid-community";
 import cloneDeep from "lodash/cloneDeep";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -16,6 +21,14 @@ import useAlertStore from "../../../stores/alertStore";
 import { useMessagesStore } from "../../../stores/messagesStore";
 import { extractColumnsFromRows, messagesSorter } from "../../../utils/utils";
 
+function suppressMessageRowActionKeys(params: SuppressKeyboardEventParams) {
+  return (
+    params.event.key === "Enter" ||
+    params.event.key === " " ||
+    params.event.key === "Spacebar"
+  );
+}
+
 export default function SessionView({
   session,
   id,
@@ -73,10 +86,17 @@ export default function SessionView({
     files: t("messages.column.files"),
   };
 
-  const columns = extractColumnsFromRows(messages, "intersection").map((col) =>
-    col.field && columnHeaderMap[col.field]
-      ? { ...col, headerName: columnHeaderMap[col.field] }
-      : col,
+  const columns = extractColumnsFromRows(messages, "intersection").map(
+    (col) => ({
+      ...col,
+      ...(col.field && columnHeaderMap[col.field]
+        ? { headerName: columnHeaderMap[col.field] }
+        : {}),
+      ...(col.field === "text"
+        ? { flex: 3, minWidth: 320, tooltipField: "text" }
+        : {}),
+      suppressKeyboardEvent: suppressMessageRowActionKeys,
+    }),
   );
   const isFetchingCount = useIsFetching({
     queryKey: ["useGetMessagesQuery"],
@@ -149,26 +169,44 @@ export default function SessionView({
     deleteMessages({ ids: selectedRows });
   }
 
+  function handleCellKeyDown(event: CellKeyDownEvent) {
+    const keyboardEvent = event.event as KeyboardEvent | undefined;
+    if (keyboardEvent?.key !== " " && keyboardEvent?.key !== "Spacebar") {
+      return;
+    }
+
+    keyboardEvent.preventDefault();
+    keyboardEvent.stopPropagation();
+    event.node.setSelected(!event.node.isSelected(), false);
+    setSelectedRows(event.api.getSelectedRows().map((row) => row.id));
+  }
+
   const editable = useMemo(() => {
     return playgroundPage
       ? false
       : [{ field: "text", onUpdate: handleUpdateMessage, editableCell: false }];
   }, [handleUpdateMessage]);
 
   return isFetching ? (
-    <div className="flex h-full w-full items-center justify-center align-middle">
+    <div
+      aria-label={t("common.loading")}
+      className="flex h-full w-full items-center justify-center align-middle"
+      role="status"
+    >
       <Loading></Loading>
     </div>
   ) : (
     <TableComponent
       key={"sessionView"}
+      tableLabel={t("messages.title")}
       onDelete={playgroundPage ? undefined : handleRemoveMessages}
       readOnlyEdit
       editable={editable}
       overlayNoRowsTemplate={t("table.noRowsToShow")}
       onSelectionChanged={(event: SelectionChangedEvent) => {
         setSelectedRows(event.api.getSelectedRows().map((row) => row.id));
       }}
+      onCellKeyDown={handleCellKeyDown}
       rowSelection={playgroundPage ? undefined : "multiple"}
       suppressRowClickSelection={true}
       pagination={true}

src/frontend/src/modals/textModal/components/textEditorArea/index.tsx

@@ -21,6 +21,7 @@ const TextEditorArea = ({
   }
   return (
     <Textarea
+      aria-label={t("modal.viewText")}
       readOnly={readonly}
       className={`w-full custom-scroll ${left ? "min-h-32" : "h-full"} ${
         resizable ? "resize-y" : "resize-none"

src/frontend/src/modals/textModal/index.tsx

@@ -44,7 +44,7 @@ export default function TextModal({
           tabIndex={-1}
           data-langflow-text-cell-trigger
           aria-haspopup="dialog"
-          className="h-full w-full truncate text-left"
+          className="flex h-6 min-h-6 w-full items-center truncate text-left leading-6"
         >
           {children}
         </button>

src/frontend/src/pages/SettingsPage/pages/messagesPage/components/headerMessages/__tests__/headerMessages.a11y.test.tsx

@@ -0,0 +1,11 @@
+import { render } from "@testing-library/react";
+import { axe } from "@/utils/a11y-test";
+import HeaderMessagesComponent from "..";
+
+describe("HeaderMessagesComponent accessibility", () => {
+  it("should have no axe violations", async () => {
+    const { container } = render(<HeaderMessagesComponent />);
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});