Skip to content

fix(a11y): announce that a reply is generating, and that one failed #3014

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
opensource-joe wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix(a11y): announce that a reply is generating, and that one failed #3014

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a104c1
fix(a11y): announce that a reply is generating, and that one failed
opensource-joe Aug 19, 2026
f5c49c6
Merge branch 'main' into a11y/announce-reply-status
dokterbob Aug 25, 2026
0864fc1
Merge remote-tracking branch 'upstream/main' into a11y/announce-reply…
opensource-joe Sep 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions backend/chainlit/translations/ar-SA.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@
},
"messages": {
"status": {
"generating": "Generating response",
"using": "يستخدم",
"used": "مستخدم"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/bn.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",

@cubic-dev-ai cubic-dev-ai Bot Aug 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: The added key uses the English placeholder "Generating response" in the Bengali locale file bn.json. Since this string is what a screen reader announces in the live region, Bengali users will hear English text, contradicting the a11y goal of the PR. Translate the value to Bengali (e.g., "প্রতিক্রিয়া তৈরি হচ্ছে") so the announcement is localized like the surrounding keys in this file.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At backend/chainlit/translations/bn.json, line 102:

<comment>The added key uses the English placeholder "Generating response" in the Bengali locale file bn.json. Since this string is what a screen reader announces in the live region, Bengali users will hear English text, contradicting the a11y goal of the PR. Translate the value to Bengali (e.g., "প্রতিক্রিয়া তৈরি হচ্ছে") so the announcement is localized like the surrounding keys in this file.</comment>

<file context>
@@ -99,6 +99,7 @@
     },
     "messages": {
       "status": {
+        "generating": "Generating response",
         "using": "ব্যবহার করছে",
         "used": "ব্যবহৃত"
</file context>

"using": "ব্যবহার করছে",
"used": "ব্যবহৃত"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/da-DK.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@
},
"messages": {
"status": {
"generating": "Generating response",

@cubic-dev-ai cubic-dev-ai Bot Aug 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: The new messages.status.generating key ships the English placeholder "Generating response" in the Danish locale file. This string is read aloud to screen-reader users via the new role="status" live region, so Danish users will hear the announcement in English rather than Danish, unlike every neighboring status string in this file (e.g. "using": "Bruger", "used": "Brugte"). Provide a proper Danish translation (e.g. "Genererer svar") before shipping this locale.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At backend/chainlit/translations/da-DK.json, line 101:

<comment>The new `messages.status.generating` key ships the English placeholder "Generating response" in the Danish locale file. This string is read aloud to screen-reader users via the new role="status" live region, so Danish users will hear the announcement in English rather than Danish, unlike every neighboring status string in this file (e.g. "using": "Bruger", "used": "Brugte"). Provide a proper Danish translation (e.g. "Genererer svar") before shipping this locale.</comment>

<file context>
@@ -98,6 +98,7 @@
     },
     "messages": {
       "status": {
+        "generating": "Generating response",
         "using": "Bruger",
         "used": "Brugte"
</file context>

"using": "Bruger",
"used": "Brugte"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/de-DE.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",

@cubic-dev-ai cubic-dev-ai Bot Aug 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: The new generating key in the German locale ships the English string "Generating response" instead of a German translation, while every sibling key (using, used) is translated. Since this live-region text is announced aloud to screen-reader users, German users hear English during generation — the exact a11y behavior this PR adds will be in the wrong language. Use the German translation (e.g., "Antwort wird generiert") in this file.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At backend/chainlit/translations/de-DE.json, line 102:

<comment>The new `generating` key in the German locale ships the English string "Generating response" instead of a German translation, while every sibling key (`using`, `used`) is translated. Since this live-region text is announced aloud to screen-reader users, German users hear English during generation — the exact a11y behavior this PR adds will be in the wrong language. Use the German translation (e.g., "Antwort wird generiert") in this file.</comment>

<file context>
@@ -99,6 +99,7 @@
     },
     "messages": {
       "status": {
+        "generating": "Generating response",
         "using": "Verwendet",
         "used": "Verwendete"
</file context>
Suggested change
"generating": "Generating response",
"generating": "Antwort wird generiert",

"using": "Verwendet",
"used": "Verwendete"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/el-GR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",
"using": "Με τη χρήση",
"used": "Χρησιμοποιήθηκε"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",
"using": "Using",
"used": "Used"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/es.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",

@cubic-dev-ai cubic-dev-ai Bot Aug 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: The Spanish locale file ships the untranslated placeholder "Generating response" for the new chat.messages.status.generating key. Since this string drives the role="status" live region, Spanish-locale screen reader users will hear the generation announcement in English while the surrounding keys ("Usando", "Usado") are properly localized. Replace the placeholder with Spanish, e.g. "Generando respuesta".

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At backend/chainlit/translations/es.json, line 102:

<comment>The Spanish locale file ships the untranslated placeholder "Generating response" for the new `chat.messages.status.generating` key. Since this string drives the `role="status"` live region, Spanish-locale screen reader users will hear the generation announcement in English while the surrounding keys ("Usando", "Usado") are properly localized. Replace the placeholder with Spanish, e.g. "Generando respuesta".</comment>

<file context>
@@ -99,6 +99,7 @@
     },
     "messages": {
       "status": {
+        "generating": "Generating response",
         "using": "Usando",
         "used": "Usado"
</file context>
Suggested change
"generating": "Generating response",
"generating": "Generando respuesta",

"using": "Usando",
"used": "Usado"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/fr-FR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",

@cubic-dev-ai cubic-dev-ai Bot Aug 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: The generating value in fr-FR.json is the English placeholder "Generating response", but this key drives the new live region in MessagesContainer (t('chat.messages.status.generating')). French screen reader users will be announced "Generating response" in English, which undermines the very accessibility feature this PR adds. The PR description flags the placeholder as a way to keep keys in sync, but for this announcement the locale value is the user-facing content. Translate it (e.g. "Génération de la réponse en cours") rather than shipping English to every non-English locale; missing keys can fall back instead.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At backend/chainlit/translations/fr-FR.json, line 102:

<comment>The `generating` value in fr-FR.json is the English placeholder "Generating response", but this key drives the new live region in MessagesContainer (`t('chat.messages.status.generating')`). French screen reader users will be announced "Generating response" in English, which undermines the very accessibility feature this PR adds. The PR description flags the placeholder as a way to keep keys in sync, but for this announcement the locale value is the user-facing content. Translate it (e.g. "Génération de la réponse en cours") rather than shipping English to every non-English locale; missing keys can fall back instead.</comment>

<file context>
@@ -99,6 +99,7 @@
     },
     "messages": {
       "status": {
+        "generating": "Generating response",
         "using": "Utilise",
         "used": "Utilisé"
</file context>
Suggested change
"generating": "Generating response",
"generating": "Génération de la réponse en cours",

"using": "Utilise",
"used": "Utilisé"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/gu.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",
"using": "વાપરી રહ્યા છે",
"used": "વપરાયેલ"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/he-IL.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",
"using": "משתמש ב",
"used": "השתמש ב"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/hi.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",

@cubic-dev-ai cubic-dev-ai Bot Aug 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: The generating value in the Hindi locale file is left as the English placeholder "Generating response", so Hindi users with screen readers will hear the new role="status" announcement in English. Translate it (e.g., "प्रतिक्रिया उत्पन्न हो रही है") instead of committing the English placeholder to the hi.json file.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At backend/chainlit/translations/hi.json, line 102:

<comment>The `generating` value in the Hindi locale file is left as the English placeholder "Generating response", so Hindi users with screen readers will hear the new role="status" announcement in English. Translate it (e.g., "प्रतिक्रिया उत्पन्न हो रही है") instead of committing the English placeholder to the hi.json file.</comment>

<file context>
@@ -99,6 +99,7 @@
     },
     "messages": {
       "status": {
+        "generating": "Generating response",
         "using": "उपयोग कर रहे हैं",
         "used": "उपयोग किया"
</file context>
Suggested change
"generating": "Generating response",
"generating": "प्रतिक्रिया उत्पन्न हो रही है",

"using": "उपयोग कर रहे हैं",
"used": "उपयोग किया"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/it.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",

@cubic-dev-ai cubic-dev-ai Bot Aug 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: The new generating value is an English placeholder in the Italian locale, so Italian UI users get the English string "Generating response" in the screen-reader live region instead of a localized announcement. This key is displayed to users (not just a key-maintenance artifact), so it should be translated, e.g. "Generazione della risposta".

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At backend/chainlit/translations/it.json, line 102:

<comment>The new generating value is an English placeholder in the Italian locale, so Italian UI users get the English string "Generating response" in the screen-reader live region instead of a localized announcement. This key is displayed to users (not just a key-maintenance artifact), so it should be translated, e.g. "Generazione della risposta".</comment>

<file context>
@@ -99,6 +99,7 @@
     },
     "messages": {
       "status": {
+        "generating": "Generating response",
         "using": "In uso",
         "used": "Utilizzato"
</file context>

"using": "In uso",
"used": "Utilizzato"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/ja.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@
},
"messages": {
"status": {
"generating": "Generating response",

@cubic-dev-ai cubic-dev-ai Bot Aug 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: The ja.json "generating" key uses the English placeholder "Generating response" instead of a Japanese translation. This value is announced to Japanese-speaking screen reader users through the new role="status" live region, so they will hear English text in a Japanese UI. Translate it for the ja locale (e.g., "応答を生成中") rather than shipping the placeholder; only en-US.json should keep the English string.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At backend/chainlit/translations/ja.json, line 101:

<comment>The ja.json "generating" key uses the English placeholder "Generating response" instead of a Japanese translation. This value is announced to Japanese-speaking screen reader users through the new role="status" live region, so they will hear English text in a Japanese UI. Translate it for the ja locale (e.g., "応答を生成中") rather than shipping the placeholder; only en-US.json should keep the English string.</comment>

<file context>
@@ -98,6 +98,7 @@
     },
     "messages": {
       "status": {
+        "generating": "Generating response",
         "using": "使用中",
         "used": "使用済み"
</file context>
Suggested change
"generating": "Generating response",
"generating": "応答を生成中",

"using": "使用中",
"used": "使用済み"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/kn.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",
"using": "ಬಳಸುತ್ತಿರುವುದು",
"used": "ಬಳಸಲಾಗಿದೆ"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/ko.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",
"using": "사용 중",
"used": "사용됨"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/ml.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",
"using": "ഉപയോഗിക്കുന്നു",
"used": "ഉപയോഗിച്ചു"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/mr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",
"using": "वापरत आहे",
"used": "वापरले"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/nl.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",
"using": "In gebruik",
"used": "Gebruikt"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/pt-PT.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",
"using": "A utilizar",
"used": "Utilizado"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/ta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",
"using": "பயன்படுத்துகிறது",
"used": "பயன்படுத்தப்பட்டது"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/te.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",

@cubic-dev-ai cubic-dev-ai Bot Aug 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: The new key uses an English placeholder ("Generating response") in the Telugu locale (and the other 22 non-English locale files). Because this value drives the role="status" live region, Telugu screen-reader users — the very audience this a11y change targets — will hear the announcement in English. The PR description suggests narrowing to en-US.json, but keeping untranslated placeholders in every locale means the shipped announcement is wrong in all of them. Translate this value (and the equivalents in the other locale files), or if the key should only exist in en-US.json, drop it from the non-English files.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At backend/chainlit/translations/te.json, line 102:

<comment>The new key uses an English placeholder ("Generating response") in the Telugu locale (and the other 22 non-English locale files). Because this value drives the role="status" live region, Telugu screen-reader users — the very audience this a11y change targets — will hear the announcement in English. The PR description suggests narrowing to en-US.json, but keeping untranslated placeholders in every locale means the shipped announcement is wrong in all of them. Translate this value (and the equivalents in the other locale files), or if the key should only exist in en-US.json, drop it from the non-English files.</comment>

<file context>
@@ -99,6 +99,7 @@
     },
     "messages": {
       "status": {
+        "generating": "Generating response",
         "using": "ఉపయోగిస్తోంది",
         "used": "ఉపయోగించబడింది"
</file context>

"using": "ఉపయోగిస్తోంది",
"used": "ఉపయోగించబడింది"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",

@cubic-dev-ai cubic-dev-ai Bot Aug 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: This key's value is the English placeholder "Generating response" in the Simplified-Chinese locale file, so Chinese screen-reader users will hear the new a11y announcement in English. Every sibling key under chat.messages.status is translated (使用中, 已使用). Provide a Chinese translation, e.g. "正在生成回复", here (and in the other non-English locale files). The live-region announcement added elsewhere in this PR only achieves its a11y goal when it is localized.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At backend/chainlit/translations/zh-CN.json, line 102:

<comment>This key's value is the English placeholder "Generating response" in the Simplified-Chinese locale file, so Chinese screen-reader users will hear the new a11y announcement in English. Every sibling key under chat.messages.status is translated (使用中, 已使用). Provide a Chinese translation, e.g. "正在生成回复", here (and in the other non-English locale files). The live-region announcement added elsewhere in this PR only achieves its a11y goal when it is localized.</comment>

<file context>
@@ -99,6 +99,7 @@
     },
     "messages": {
       "status": {
+        "generating": "Generating response",
         "using": "使用中",
         "used": "已使用"
</file context>
Suggested change
"generating": "Generating response",
"generating": "正在生成回复",

"using": "使用中",
"used": "已使用"
},
Expand Down
1 change: 1 addition & 0 deletions backend/chainlit/translations/zh-TW.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
},
"messages": {
"status": {
"generating": "Generating response",
"using": "正在使用",
"used": "已使用"
},
Expand Down
10 changes: 9 additions & 1 deletion frontend/src/components/chat/Messages/Message/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,15 @@ const Message = memo(
</UserMessage>
</div>
) : (
<div className="ai-message flex gap-4 w-full">
<div
className="ai-message flex gap-4 w-full"
/*
An errored reply is only marked visually, by a red avatar
and red text, so announce it. A complete message rather
than a streamed one, so alert does not re-read.
*/
role={message.isError ? 'alert' : undefined}
>
{!isStep || !indent ? (
<MessageAvatar
author={message.metadata?.avatarName || message.name}
Expand Down
12 changes: 12 additions & 0 deletions frontend/src/components/chat/MessagesContainer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,18 @@ const MessagesContainer = ({ navigate }: Props) => {

return (
<MessageContext.Provider value={memoizedContext}>
{/*
Announce that a reply is being generated. The blinking cursor that
signals this visually is an empty <span> driven by CSS, so it carries
no text for a screen reader to read.

The announcement is deliberately the state, not the reply itself:
wrapping streamed content in a live region makes it re-read the
partial message on every chunk.
*/}
<div className="sr-only" role="status" aria-live="polite">
{loading ? t('chat.messages.status.generating') : ''}
</div>
<Messages
indent={0}
isRunning={loading}
Expand Down