fix(playground): add accessible names to icon-only controls and fix invalid ARIA on animated/status elements

Author: Olayinka Adelakun

src/frontend/src/components/core/appHeaderComponent/components/ThemeButtons/__tests__/ThemeButtons.a11y.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { ThemeButtons } from "..";
+
+describe("ThemeButtons accessibility", () => {
+  it("has no detectable axe violations", async () => {
+    const { container } = render(<ThemeButtons />);
+
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+
+  it("names the light, dark, and system theme buttons", () => {
+    render(<ThemeButtons />);
+
+    expect(
+      screen.getByRole("button", { name: "Light theme" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Dark theme" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "System theme" }),
+    ).toBeInTheDocument();
+  });
+});

src/frontend/src/components/core/appHeaderComponent/components/ThemeButtons/index.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import { Button } from "@/components/ui/button";
 import useTheme from "@/customization/hooks/use-custom-theme";
 
 export const ThemeButtons = () => {
+  const { t } = useTranslation();
   const { systemTheme, dark, setThemePreference } = useTheme();
   const [selectedTheme, setSelectedTheme] = useState(
     systemTheme ? "system" : dark ? "dark" : "light",
@@ -59,8 +61,14 @@ export const ThemeButtons = () => {
         onClick={() => handleThemeChange("light")}
         data-testid="menu_light_button"
         id="menu_light_button"
+        aria-label={t("theme.light")}
       >
-        <ForwardedIconComponent strokeWidth={2} name="Sun" className="w-4" />
+        <ForwardedIconComponent
+          strokeWidth={2}
+          name="Sun"
+          className="w-4"
+          aria-hidden="true"
+        />
       </Button>
 
       {/* Dark Theme Button */}
@@ -74,8 +82,14 @@ export const ThemeButtons = () => {
         onClick={() => handleThemeChange("dark")}
         data-testid="menu_dark_button"
         id="menu_dark_button"
+        aria-label={t("theme.dark")}
       >
-        <ForwardedIconComponent strokeWidth={2} name="Moon" className="w-4" />
+        <ForwardedIconComponent
+          strokeWidth={2}
+          name="Moon"
+          className="w-4"
+          aria-hidden="true"
+        />
       </Button>
 
       {/* System Theme Button */}
@@ -89,11 +103,13 @@ export const ThemeButtons = () => {
         onClick={() => handleThemeChange("system")}
         data-testid="menu_system_button"
         id="menu_system_button"
+        aria-label={t("theme.system")}
       >
         <ForwardedIconComponent
           name="Monitor"
           className="w-4"
           strokeWidth={2}
+          aria-hidden="true"
         />
       </Button>
     </div>

src/frontend/src/components/ui/__tests__/textAnimation.a11y.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { TextEffectPerChar } from "../textAnimation";
+
+describe("TextEffectPerChar accessibility", () => {
+  it("has no detectable axe violations", async () => {
+    const { container } = render(
+      <TextEffectPerChar>Test your flow with a chat prompt</TextEffectPerChar>,
+    );
+
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+
+  it("exposes the full string as one accessible name via role=img", () => {
+    render(
+      <TextEffectPerChar>Test your flow with a chat prompt</TextEffectPerChar>,
+    );
+
+    expect(
+      screen.getByRole("img", { name: "Test your flow with a chat prompt" }),
+    ).toBeInTheDocument();
+  });
+});

src/frontend/src/components/ui/textAnimation.tsx

@@ -197,7 +197,7 @@ export function TextEffect({
           initial="hidden"
           animate="visible"
           exit="exit"
-          aria-label={ariaLabel}
+          {...(ariaLabel ? { role: "img", "aria-label": ariaLabel } : {})}
           variants={delayedContainerVariants}
           className={cn("whitespace-pre-wrap", className)}
           onAnimationComplete={onAnimationComplete}

src/frontend/src/locales/de.json

@@ -219,8 +219,10 @@
   "canvas.zoomTo100": "Auf 100 % vergrößern",
   "canvas.zoomToFit": "Auf Bildschirm anpassen",
   "chat.attachFileTooltip": "Datei anhängen (Bilder, PDF, CSV, DOCX, TXT, MD, JSON, YAML, XML, HTML, Quellcode-Dateien)",
+  "chat.cancelRename": "Umbenennen abbrechen",
   "chat.cannotOpenDescription": "Dies ist kein Chat-Ablauf.",
   "chat.cannotOpenTitle": "Der Chat lässt sich nicht öffnen",
+  "chat.confirmRename": "Umbenennen bestätigen",
   "chat.copied": "Kopiert!",
   "chat.copyCode": "Copy code",
   "chat.copiedCode": "Code copied",
@@ -255,6 +257,7 @@
   "chat.outputLabel": "Ausgabe:",
   "chat.outputTokens": "Ausgabe-Token:",
   "chat.processingAudio": "Verarbeitung läuft...",
+  "chat.renameSessionLabel": "Sitzungsname",
   "chat.runningStatus": "aktiv...",
   "chat.secondInitialText": "um frühere Nachrichten anzusehen.",
   "chat.selectAll": "Alles auswählen",
@@ -1950,6 +1953,9 @@
   "templatesModal.title": "Vorlagen",
   "templatesModal.tryDifferentQuery": "und versuchen Sie es mit einer anderen Abfrage.",
   "templatesModal.useCases": "Anwendungsfälle",
+  "theme.dark": "Dunkles Motiv",
+  "theme.light": "Helles Motiv",
+  "theme.system": "System-Motiv",
   "toolsModal.actionDescriptionHint": "Dies ist die Beschreibung des Tools, die dem Kunden angezeigt wird.",
   "toolsModal.actionSlugHint": "Wird als Funktionsname verwendet, wenn dieser Ablauf für Kunden zugänglich gemacht wird.",
   "toolsModal.close": "Schließen",

src/frontend/src/locales/en.json

@@ -1543,6 +1543,12 @@
   "header.goToDiscord": "Go to Discord server",
   "misc.addChatInputOutputPlayground": "Add a Chat Input or Chat Output to use the playground",
   "chat.options": "Options",
+  "chat.cancelRename": "Cancel rename",
+  "chat.confirmRename": "Confirm rename",
+  "chat.renameSessionLabel": "Session name",
+  "theme.light": "Light theme",
+  "theme.dark": "Dark theme",
+  "theme.system": "System theme",
   "chat.editMessage": "Edit message",
   "chat.copied": "Copied!",
   "chat.copyCode": "Copy code",

src/frontend/src/locales/es.json

@@ -219,8 +219,10 @@
   "canvas.zoomTo100": "Ampliar al 100 %",
   "canvas.zoomToFit": "Ajustar a la pantalla",
   "chat.attachFileTooltip": "Adjuntar archivo (imágenes, PDF, CSV, DOCX, TXT, MD, JSON, YAML, XML, HTML, archivos de código)",
+  "chat.cancelRename": "Cancelar cambio de nombre",
   "chat.cannotOpenDescription": "Esto no es un flujo de chat.",
   "chat.cannotOpenTitle": "No se puede abrir el chat",
+  "chat.confirmRename": "Confirmar cambio de nombre",
   "chat.copied": "Copiado",
   "chat.copyCode": "Copy code",
   "chat.copiedCode": "Code copied",
@@ -255,6 +257,7 @@
   "chat.outputLabel": "Salida:",
   "chat.outputTokens": "Tokens de salida:",
   "chat.processingAudio": "Procesando...",
+  "chat.renameSessionLabel": "Nombre de la sesión",
   "chat.runningStatus": "En ejecución...",
   "chat.secondInitialText": "para consultar los mensajes anteriores.",
   "chat.selectAll": "Seleccionar todo",
@@ -1950,6 +1953,9 @@
   "templatesModal.title": "Plantillas",
   "templatesModal.tryDifferentQuery": "y prueba con otra consulta.",
   "templatesModal.useCases": "Casos de uso",
+  "theme.dark": "Tema oscuro",
+  "theme.light": "Tema claro",
+  "theme.system": "Tema del sistema",
   "toolsModal.actionDescriptionHint": "Esta es la descripción de la herramienta que se muestra al cliente.",
   "toolsModal.actionSlugHint": "Se utiliza como nombre de la función cuando este flujo se pone a disposición de los clientes.",
   "toolsModal.close": "Cerrar",

src/frontend/src/locales/fr.json

@@ -219,8 +219,10 @@
   "canvas.zoomTo100": "Agrandir à 100 %",
   "canvas.zoomToFit": "Ajustement à l'écran",
   "chat.attachFileTooltip": "Joindre un fichier (images, PDF, CSV, DOCX, TXT, MD, JSON, YAML, XML, HTML, fichiers de code)",
+  "chat.cancelRename": "Annuler le renommage",
   "chat.cannotOpenDescription": "Ce n'est pas un flux de conversation.",
   "chat.cannotOpenTitle": "Impossible d'ouvrir la discussion",
+  "chat.confirmRename": "Confirmer le renommage",
   "chat.copied": "Copié",
   "chat.copyCode": "Copy code",
   "chat.copiedCode": "Code copied",
@@ -255,6 +257,7 @@
   "chat.outputLabel": "Sortie :",
   "chat.outputTokens": "Jetons de sortie :",
   "chat.processingAudio": "Traitement en cours...",
+  "chat.renameSessionLabel": "Nom de la session",
   "chat.runningStatus": "Exécution en cours...",
   "chat.secondInitialText": "pour consulter les messages précédents.",
   "chat.selectAll": "Tout sélectionner",
@@ -1950,6 +1953,9 @@
   "templatesModal.title": "Modèles",
   "templatesModal.tryDifferentQuery": "et essayez une autre requête.",
   "templatesModal.useCases": "Cas d'usage",
+  "theme.dark": "Thème sombre",
+  "theme.light": "Thème clair",
+  "theme.system": "Thème système",
   "toolsModal.actionDescriptionHint": "Voici la description de l'outil telle qu'elle est présentée au client.",
   "toolsModal.actionSlugHint": "Utilisé comme nom de fonction lorsque ce flux est mis à la disposition des clients.",
   "toolsModal.close": "Fermer",

src/frontend/src/locales/ja.json

@@ -219,8 +219,10 @@
   "canvas.zoomTo100": "100%に拡大",
   "canvas.zoomToFit": "画面に合わせる",
   "chat.attachFileTooltip": "ファイルを添付する（画像、PDF、CSV、DOCX、TXT、MD、JSON、YAML、XML、HTML、コードファイル）",
+  "chat.cancelRename": "名前変更をキャンセル",
   "chat.cannotOpenDescription": "これはチャットフローではありません。",
   "chat.cannotOpenTitle": "チャットが開けません",
+  "chat.confirmRename": "名前変更を確定",
   "chat.copied": "コピーされました",
   "chat.copyCode": "Copy code",
   "chat.copiedCode": "Code copied",
@@ -255,6 +257,7 @@
   "chat.outputLabel": "出力:",
   "chat.outputTokens": "出力トークン：",
   "chat.processingAudio": "処理中...",
+  "chat.renameSessionLabel": "セッション名",
   "chat.runningStatus": "実行中...",
   "chat.secondInitialText": "過去のメッセージを確認するには。",
   "chat.selectAll": "すべて選択",
@@ -1950,6 +1953,9 @@
   "templatesModal.title": "テンプレート",
   "templatesModal.tryDifferentQuery": "別のクエリを試してみてください。",
   "templatesModal.useCases": "ユースケース",
+  "theme.dark": "ダークテーマ",
+  "theme.light": "ライトテーマ",
+  "theme.system": "システムテーマ",
   "toolsModal.actionDescriptionHint": "これは、クライアントに公開されるツールの説明です。",
   "toolsModal.actionSlugHint": "このフローをクライアントに公開する際の関数名として使用されます。",
   "toolsModal.close": "閉じる",

src/frontend/src/locales/pt.json

@@ -219,8 +219,10 @@
   "canvas.zoomTo100": "Ampliar para 100%",
   "canvas.zoomToFit": "Ajustar à tela",
   "chat.attachFileTooltip": "Anexar arquivo (imagens, PDF, CSV, DOCX, TXT, MD, JSON, YAML, XML, HTML, arquivos de código)",
+  "chat.cancelRename": "Cancelar renomeação",
   "chat.cannotOpenDescription": "Isso não é um fluxo de chat.",
   "chat.cannotOpenTitle": "Não é possível abrir o chat",
+  "chat.confirmRename": "Confirmar renomeação",
   "chat.copied": "Copiado!",
   "chat.copyCode": "Copy code",
   "chat.copiedCode": "Code copied",
@@ -255,6 +257,7 @@
   "chat.outputLabel": "Saída:",
   "chat.outputTokens": "Tokens de saída:",
   "chat.processingAudio": "Processando...",
+  "chat.renameSessionLabel": "Nome da sessão",
   "chat.runningStatus": "Executando...",
   "chat.secondInitialText": "para verificar as mensagens anteriores.",
   "chat.selectAll": "Selecionar todos",
@@ -1950,6 +1953,9 @@
   "templatesModal.title": "Modelos",
   "templatesModal.tryDifferentQuery": "e tente uma consulta diferente.",
   "templatesModal.useCases": "Casos de uso",
+  "theme.dark": "Tema escuro",
+  "theme.light": "Tema claro",
+  "theme.system": "Tema do sistema",
   "toolsModal.actionDescriptionHint": "Esta é a descrição da ferramenta apresentada ao cliente.",
   "toolsModal.actionSlugHint": "Usado como nome da função quando este fluxo é disponibilizado aos clientes.",
   "toolsModal.close": "Fechar",