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

🙌 a11y: Searchbar/Conversations List Focus (#7096)

Browse source 
* chore: remove redundancy of useSetRecoilState and useRecoilValue with useRecoilState in SearchBar

* refactor: remove unnecessary focus effect on text area in ChatForm

* refactor: improve searchbar and clear search button accessibility

* fix: add tabIndex to Conversations component for improved accessibility, moves focus directly conversation items

* style: adjust margin in Header component for improved layout symmetry with Nav

* chore: imports order
This commit is contained in:
Danny Avila 2025-04-27 15:13:19 -04:00 • committed by GitHub
parent 550c7cc68a
commit 6826c0ed43
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 18 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Chat/Header.tsx
View file

@ -36,7 +36,7 @@ export default function Header() {
return (
<div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white p-2 font-semibold text-text-primary dark:bg-gray-800">
<div className="hide-scrollbar flex w-full items-center justify-between gap-2 overflow-x-auto">
<div className="mx-2 flex items-center gap-2">
<div className="mx-1 flex items-center gap-2">
{!navVisible && <OpenSidebar setNavVisible={setNavVisible} />}
{!navVisible && <HeaderNewChat />}
{<ModelSelector startupConfig={startupConfig} />}

6
client/src/components/Chat/Input/ChatForm.tsx
View file

@ -151,12 +151,6 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
const textValue = useWatch({ control: methods.control, name: 'text' });
useEffect(() => {
if (!search.isSearching && textAreaRef.current && !disableInputs) {
textAreaRef.current.focus();
}
}, [search.isSearching, disableInputs]);
useEffect(() => {
if (textAreaRef.current) {
const style = window.getComputedStyle(textAreaRef.current);