fix(a11y): add screen-reader landmarks and live region for streaming responses - #2211
Merged
Conversation
…responses - Add VisuallyHidden <h1> to MainPage for document outline - Wrap main content in <main> landmark via Stack component prop - Wrap streaming response in aria-live='polite' aria-busy region - Fixes #2186
In useReasoningContent, isGenerating is true only in the branch that also
returns an empty mainContent, so {!isGenerating && mainContent} and
{mainContent} are equivalent. Removing the redundant term; no behavior
change.
felladrin
force-pushed
the
fix/2186-a11y-screen-reader-landmarks
branch
from
July 23, 2026 21:14
a510be0 to
ab5d0fa
Compare
felladrin
marked this pull request as ready for review
July 23, 2026 21:14
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Root Cause
The streaming AI response was rendered into a plain
Card/Textwith noaria-liveregion, so assistive-tech users heard nothing as tokens arrived. Separately, the main page had no<main>landmark and no<h1>, so there was no document outline or skip target for keyboard/screen-reader navigation.What Changed
client/components/Pages/Main/MainPage.tsxVisuallyHidden <h1>for document outline; wrapped main content in<main>landmark viaStack component="main"client/components/AiResponse/AiResponseContent.tsx<Box aria-live="polite" aria-busy={isGenerating}>so screen readers announce tokens as they arriveHow Verified
MainPagetests passtsc --noEmit— zero errorsFixes #2186