Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-03-13 03:16:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

⌨️ 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

50
client/src/components/Nav/SettingsTabs/Chat/Chat.tsx
View file

@ -1,6 +1,4 @@
import { memo } from 'react';
import * as Tabs from '@radix-ui/react-tabs';
import { SettingsTabValues } from 'librechat-data-provider';
import FontSizeSelector from './FontSizeSelector';
import SendMessageKeyEnter from './EnterToSend';
import ShowCodeSwitch from './ShowCodeSwitch';
@ -12,32 +10,30 @@ import SaveDraft from './SaveDraft';
function Chat() {
return (
<Tabs.Content value={SettingsTabValues.CHAT} role="tabpanel" className="md: w-full">
<div className="flex flex-col gap-3 text-sm text-black dark:text-gray-50">
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<FontSizeSelector />
</div>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<ChatDirection />
</div>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<SendMessageKeyEnter />
</div>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<ShowCodeSwitch />
</div>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<SaveDraft />
</div>
<ForkSettings />
<div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
<ModularChat />
</div>
<div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
<LaTeXParsing />
</div>
<div className="flex flex-col gap-3 p-1 text-sm text-text-primary">
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<FontSizeSelector />
</div>
</Tabs.Content>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<ChatDirection />
</div>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<SendMessageKeyEnter />
</div>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<ShowCodeSwitch />
</div>
<div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
<SaveDraft />
</div>
<ForkSettings />
<div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
<ModularChat />
</div>
<div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
<LaTeXParsing />
</div>
</div>
);
}

18
client/src/components/Nav/SettingsTabs/Chat/ChatDirection.tsx
View file

@ -14,16 +14,22 @@ const ChatDirection = () => {
return (
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<span>{localize('com_nav_chat_direction')}</span>
<span id="chat-direction-label">{localize('com_nav_chat_direction')}</span>
</div>
<label
<button
onClick={toggleChatDirection}
data-testid="chatDirection"
className="btn btn-neutral relative"
style={{ userSelect: 'none' }}
className="btn btn-neutral relative ring-ring-primary"
aria-labelledby="chat-direction-label chat-direction-status"
aria-pressed={direction === 'RTL'}
>
{direction.toLowerCase()}
</label>
<span aria-hidden="true">{direction.toLowerCase()}</span>
<span id="chat-direction-status" className="sr-only">
{direction === 'LTR'
? localize('chat_direction_left_to_right')
: localize('chat_direction_right_to_left')}
</span>
</button>
</div>
);
};