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(Settings): Improved Keyboard Navigation & Consistent Styling (#3975)

Browse source 
* feat: settings tba accessible

* refactor: cleanup unused code

* refactor: improve accessibility and user experience in ChatDirection component

* style: focus ring primary class

* improve a11y of avatar dialog

* style: a11y improvements for Settings

* style: focus ring primary class in OriginalDialog component

---------

Co-authored-by: Danny Avila <danny@librechat.ai>
This commit is contained in:
Marco Beretta 2024-09-10 10:11:39 -09:00 • committed by GitHub
parent 1a1e6850a3
commit d6c0121b19
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 507 additions and 513 deletions
Download patch file Download diff file Expand all files Collapse all files

45
client/src/components/Nav/SettingsTabs/General/General.tsx
View file

@ -1,7 +1,5 @@
import { useRecoilState } from 'recoil';
import * as Tabs from '@radix-ui/react-tabs';
import Cookies from 'js-cookie';
import { SettingsTabValues } from 'librechat-data-provider';
import React, { useContext, useCallback, useRef } from 'react';
import type { TDangerButtonProps } from '~/common';
import { ThemeContext, useLocalize } from '~/hooks';
@ -151,32 +149,25 @@ function General() {
);
return (
<Tabs.Content
value={SettingsTabValues.GENERAL}
role="tabpanel"
className="w-full md:min-h-[271px]"
ref={contentRef}
>
<div className="flex flex-col gap-3 text-sm text-text-primary">
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<ThemeSelector theme={theme} onChange={changeTheme} />
</div>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<LangSelector langcode={langcode} onChange={changeLang} />
</div>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<AutoScrollSwitch />
</div>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<HideSidePanelSwitch />
</div>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<ArchivedChats />
</div>
{/* <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
</div> */}
<div className="flex flex-col gap-3 p-1 text-sm text-text-primary">
<div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
<ThemeSelector theme={theme} onChange={changeTheme} />
</div>
</Tabs.Content>
<div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
<LangSelector langcode={langcode} onChange={changeLang} />
</div>
<div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
<AutoScrollSwitch />
</div>
<div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
<HideSidePanelSwitch />
</div>
<div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
<ArchivedChats />
</div>
{/* <div className="border-b pb-3 last-of-type:border-b-0 border-border-medium">
</div> */}
</div>
);
}