mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-02-28 05:14:08 +01:00
44dbbd5328
* fix(a11y): hide collapsed thinking content from screen readers and link toggle to controlled region
The thinking/reasoning toggle button visually collapsed content using a CSS
grid animation (gridTemplateRows: 0fr + overflow-hidden), but the content
remained in the DOM and fully accessible to screen readers, cluttering the
reading flow for assistive technology users.
- Add aria-hidden={!isExpanded} to the collapsible content region in both
the legacy Thinking component and the modern Reasoning component, so
screen readers skip collapsed thoughts entirely
- Add role="region" and a unique id (via useId) to each collapsible content
div, giving it a semantic landmark for assistive technology
- Add contentId prop to the shared ThinkingButton and wire it to
aria-controls on the toggle button, establishing an explicit relationship
between the button and the region it expands/collapses
- aria-expanded was already present on the button; combined with
aria-controls, screen readers can now fully convey the toggle state and
its target
* fix(a11y): add aria-label to collapsible content regions in Thinking and Reasoning components
Enhanced accessibility by adding aria-label attributes to the collapsible content regions in both the Thinking and Reasoning components. This change ensures that screen readers can provide better context for users navigating through the content.
* fix(a11y): update roles and aria attributes in Thinking and Reasoning components
Changed role from "region" to "group" for collapsible content areas in both Thinking and Reasoning components to better align with ARIA practices. Updated aria-hidden to handle undefined values correctly and ensured contentId is passed to relevant components for improved accessibility and screen reader support.
|
||
|---|---|---|
| .. | ||
| @types | ||
| a11y | ||
| common | ||
| components | ||
| constants | ||
| data-provider | ||
| hooks | ||
| locales | ||
| Providers | ||
| routes | ||
| store | ||
| utils | ||
| App.jsx | ||
| main.jsx | ||
| mobile.css | ||
| style.css | ||
| vite-env.d.ts | ||