fix(a11y): resolve WCAG 2.1 Level A and AA violations on settings general page

Author: Olayinka Adelakun

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

@@ -1,4 +1,5 @@
 import type { To } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import { CustomBanner } from "@/customization/components/custom-banner";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
 import { Button } from "../../ui/button";
@@ -21,11 +22,16 @@ export default function PageLayout({
   backTo?: To;
 }) {
   const navigate = useCustomNavigate();
+  const { t } = useTranslation();
 
   return (
     <div className="flex w-full flex-1 flex-col justify-between overflow-auto overflow-x-hidden bg-background">
       <div className="mx-auto flex w-full max-w-[1440px] flex-1 flex-col">
-        <div className="flex flex-col gap-4 p-6 pt-0">
+        <div
+          role="region"
+          aria-labelledby="page-layout-heading"
+          className="flex flex-col gap-4 p-6 pt-0"
+        >
           <CustomBanner />
           <div className="flex w-full items-center justify-between gap-4 space-y-0.5 pb-2 pt-10">
             <div className="flex w-full flex-col">
@@ -37,6 +43,7 @@ export default function PageLayout({
                       navigate(backTo);
                     }}
                     data-testid="back_page_button"
+                    aria-label={t("navigation.goBack")}
                   >
                     <ForwardedIconComponent
                       name="ChevronLeft"
@@ -45,6 +52,7 @@ export default function PageLayout({
                   </Button>
                 )}
                 <h2
+                  id="page-layout-heading"
                   className="text-2xl font-bold tracking-tight"
                   data-testid="mainpage_title"
                 >

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

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { CustomLink } from "@/customization/components/custom-link";
 import { useIsMobile } from "@/hooks/use-mobile";
@@ -21,13 +22,19 @@ type SideBarButtonsComponentProps = {
 };
 
 const SideBarButtonsComponent = ({ items }: SideBarButtonsComponentProps) => {
+  const { t } = useTranslation();
   const location = useLocation();
   const pathname = location.pathname;
 
   const isMobile = useIsMobile();
 
   return (
-    <Sidebar collapsible={isMobile ? "icon" : "none"} className="border-none">
+    <Sidebar
+      collapsible={isMobile ? "icon" : "none"}
+      className="border-none"
+      role="navigation"
+      aria-label={t("settings.nav.label")}
+    >
       <SidebarContent className="pr-6">
         <SidebarGroup>
           <SidebarGroupContent>

src/frontend/src/locales/de.json

@@ -1656,6 +1656,7 @@
   "settings.mcpClient.title": "Langflow MCP-Client",
   "settings.nav.apiKeys": "Langflow-API-Schlüssel",
   "settings.nav.dbProviders": "Datenbankanbieter",
+  "settings.nav.label": "Einstellungsnavigation",
   "settings.nav.general": "Allgemein",
   "settings.nav.globalVariables": "Globale Variablen",
   "settings.nav.mcpClient": "Langflow MCP-Client",
@@ -1672,6 +1673,8 @@
   "settings.passwordTitle": "Speicherposition",
   "settings.profilePictureCategory.People": "Personen",
   "settings.profilePictureCategory.Space": "Bereich",
+  "settings.avatarAlt": "{{folder}} Avatar {{index}}",
+  "navigation.goBack": "Zurück",
   "settings.profilePictureDescription": "Wähle das Bild aus, das als dein Profilbild angezeigt werden soll.",
   "settings.profilePictureTitle": "Profilbild",
   "settings.recordingKeyboard": "Aufnahme Ihres Keyboards",

src/frontend/src/locales/en.json

@@ -288,6 +288,8 @@
   "settings.profilePictureDescription": "Choose the image that appears as your profile picture.",
   "settings.profilePictureCategory.People": "People",
   "settings.profilePictureCategory.Space": "Space",
+  "settings.avatarAlt": "{{folder}} avatar {{index}}",
+  "navigation.goBack": "Go back",
   "settings.apiKeysTitle": "Langflow API Keys",
   "settings.apiKeys.columnName": "Name",
   "settings.apiKeys.columnKey": "Key",
@@ -501,6 +503,7 @@
   "sidebar.emptyMessage": "Start creating a project or flow",
   "sidebar.knowledge": "Knowledge",
   "sidebar.myFiles": "My Files",
+  "settings.nav.label": "Settings navigation",
   "settings.nav.general": "General",
   "settings.nav.mcpServers": "MCP Servers",
   "settings.nav.mcpClient": "Langflow MCP Client",

src/frontend/src/locales/es.json

@@ -1656,6 +1656,7 @@
   "settings.mcpClient.title": "Cliente Langflow MCP",
   "settings.nav.apiKeys": "Claves API de Langflow",
   "settings.nav.dbProviders": "Proveedores de bases de datos",
+  "settings.nav.label": "Navegación de configuración",
   "settings.nav.general": "Tema general",
   "settings.nav.globalVariables": "Variables globales",
   "settings.nav.mcpClient": "Cliente Langflow MCP",
@@ -1672,6 +1673,8 @@
   "settings.passwordTitle": "Contraseña",
   "settings.profilePictureCategory.People": "Personas",
   "settings.profilePictureCategory.Space": "Espacio",
+  "settings.avatarAlt": "avatar {{folder}} {{index}}",
+  "navigation.goBack": "Volver",
   "settings.profilePictureDescription": "Elige la imagen que quieras que aparezca como foto de perfil.",
   "settings.profilePictureTitle": "Foto de perfil",
   "settings.recordingKeyboard": "Grabar el teclado",

src/frontend/src/locales/fr.json

@@ -1656,6 +1656,7 @@
   "settings.mcpClient.title": "Client Langflow MCP",
   "settings.nav.apiKeys": "Clés API Langflow",
   "settings.nav.dbProviders": "Fournisseurs de bases de données",
+  "settings.nav.label": "Navigation des paramètres",
   "settings.nav.general": "Général",
   "settings.nav.globalVariables": "Variables globales",
   "settings.nav.mcpClient": "Client Langflow MCP",
@@ -1672,6 +1673,8 @@
   "settings.passwordTitle": "Mot de passe",
   "settings.profilePictureCategory.People": "Personnes",
   "settings.profilePictureCategory.Space": "Espace",
+  "settings.avatarAlt": "avatar {{folder}} {{index}}",
+  "navigation.goBack": "Retour",
   "settings.profilePictureDescription": "Choisissez l'image qui apparaîtra comme photo de profil.",
   "settings.profilePictureTitle": "Photo de profil",
   "settings.recordingKeyboard": "Enregistrer votre clavier",

src/frontend/src/locales/ja.json

@@ -1656,6 +1656,7 @@
   "settings.mcpClient.title": "Langflow MCP クライアント",
   "settings.nav.apiKeys": "Langflow API キー",
   "settings.nav.dbProviders": "DBプロバイダー",
+  "settings.nav.label": "設定ナビゲーション",
   "settings.nav.general": "一般",
   "settings.nav.globalVariables": "グローバル変数",
   "settings.nav.mcpClient": "Langflow MCP クライアント",
@@ -1672,6 +1673,8 @@
   "settings.passwordTitle": "パスワード",
   "settings.profilePictureCategory.People": "担当者",
   "settings.profilePictureCategory.Space": "スペース",
+  "settings.avatarAlt": "{{folder}}アバター{{index}}",
+  "navigation.goBack": "戻る",
   "settings.profilePictureDescription": "プロフィール写真として表示される画像を選んでください。",
   "settings.profilePictureTitle": "プロフィール写真",
   "settings.recordingKeyboard": "キーボードの録音",

src/frontend/src/locales/pt.json

@@ -1656,6 +1656,7 @@
   "settings.mcpClient.title": "Cliente Langflow MCP",
   "settings.nav.apiKeys": "Chaves de API do Langflow",
   "settings.nav.dbProviders": "Provedores de banco de dados",
+  "settings.nav.label": "Navegação de configurações",
   "settings.nav.general": "Geral",
   "settings.nav.globalVariables": "Variáveis globais",
   "settings.nav.mcpClient": "Cliente Langflow MCP",
@@ -1672,6 +1673,8 @@
   "settings.passwordTitle": "Senha",
   "settings.profilePictureCategory.People": "Pessoas",
   "settings.profilePictureCategory.Space": "Espaço",
+  "settings.avatarAlt": "avatar {{folder}} {{index}}",
+  "navigation.goBack": "Voltar",
   "settings.profilePictureDescription": "Escolha a imagem que aparecerá como sua foto de perfil.",
   "settings.profilePictureTitle": "Foto de perfil",
   "settings.recordingKeyboard": "Gravando o teclado",

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

@@ -1656,6 +1656,7 @@
   "settings.mcpClient.title": "Langflow MCP 客户端",
   "settings.nav.apiKeys": "Langflow API 密钥",
   "settings.nav.dbProviders": "数据库提供商",
+  "settings.nav.label": "设置导航",
   "settings.nav.general": "常规",
   "settings.nav.globalVariables": "全局变量",
   "settings.nav.mcpClient": "Langflow MCP 客户端",
@@ -1672,6 +1673,8 @@
   "settings.passwordTitle": "密码",
   "settings.profilePictureCategory.People": "人员",
   "settings.profilePictureCategory.Space": "空间",
+  "settings.avatarAlt": "{{folder}}头像{{index}}",
+  "navigation.goBack": "返回",
   "settings.profilePictureDescription": "选择要作为个人头像显示的图片。",
   "settings.profilePictureTitle": "头像",
   "settings.recordingKeyboard": "录制键盘",

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

@@ -102,8 +102,6 @@ export function TraceDetailView({ traceId, flowName }: TraceDetailViewProps) {
     );
   }
 
-  const headerTitle = `${trace.name || flowName || "Trace"}`;
-
   return (
     <div
       className="flex h-full flex-col overflow-hidden"