Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-19 09:50:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

👐 a11y: Improve Fork and SplitText Accessibility (#7147)

Browse source 
* refactor: Replace Popover with Ariakit components for improved accessibility and UX

* wip: first pass, fork a11y

* feat(i18n): Add localization for fork options and related UI elements

* fix: Ensure Dropdown component has correct z-index for proper layering

* style: Update Fork PopoverButton styles and remove unused sideOffset prop

* style: Update text colors and spacing in Fork component for improved readability

* style: Enhance Fork component's UI by adding select-none class to prevent text selection

* chore: Remove unused Checkbox import from Fork component

* fix: Add sr-only span for accessibility in SplitText component

* chore: Reorder imports in Fork component for better organization
This commit is contained in:
Danny Avila 2025-04-29 17:39:12 -04:00 • committed by GitHub
parent a6f0a8244f
commit dd23559d1f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 286 additions and 207 deletions
Download patch file Download diff file Expand all files Collapse all files

56
client/src/components/ui/SplitText.tsx
View file

@ -90,33 +90,37 @@ const SplitText: React.FC<SplitTextProps> = ({
}, [inView, text, onLineCountChange]);
return (
<p
ref={ref}
className={`split-parent inline overflow-hidden ${className}`}
style={{ textAlign, whiteSpace: 'normal', wordWrap: 'break-word' }}
>
{words.map((word, wordIndex) => (
<span key={wordIndex} style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>
{word.map((letter, letterIndex) => {
const index =
words.slice(0, wordIndex).reduce((acc, w) => acc + w.length, 0) + letterIndex;
<>
<span className="sr-only">{text}</span>
<p
ref={ref}
className={`split-parent inline overflow-hidden ${className}`}
style={{ textAlign, whiteSpace: 'normal', wordWrap: 'break-word' }}
aria-hidden="true"
>
{words.map((word, wordIndex) => (
<span key={wordIndex} style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>
{word.map((letter, letterIndex) => {
const index =
words.slice(0, wordIndex).reduce((acc, w) => acc + w.length, 0) + letterIndex;
return (
<animated.span
key={index}
style={springs[index] as unknown as React.CSSProperties}
className="inline-block transform transition-opacity will-change-transform"
>
{letter}
</animated.span>
);
})}
{wordIndex < words.length - 1 && (
<span style={{ display: 'inline-block', width: '0.3em' }}>&nbsp;</span>
)}
</span>
))}
</p>
return (
<animated.span
key={index}
style={springs[index] as unknown as React.CSSProperties}
className="inline-block transform transition-opacity will-change-transform"
>
{letter}
</animated.span>
);
})}
{wordIndex < words.length - 1 && (
<span style={{ display: 'inline-block', width: '0.3em' }}>&nbsp;</span>
)}
</span>
))}
</p>
</>
);
};