Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 17:30:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

4
client/src/components/ui/Dropdown.tsx
View file

@ -46,7 +46,7 @@ const Dropdown: FC<DropdownProps> = ({
<ListboxButton
data-testid={testId}
className={cn(
'focus:ring-offset-ring-offset relative inline-flex w-auto items-center justify-between rounded-md border-border-light bg-header-primary py-2 pl-3 pr-8 text-text-primary transition-all duration-100 ease-in-out hover:bg-header-hover focus:ring-ring-primary',
'btn-neutral focus:ring-offset-ring-offset relative inline-flex w-auto items-center justify-between rounded-md border-border-light bg-header-primary py-2 pl-3 pr-8 text-text-primary transition-all duration-100 ease-in-out hover:bg-header-hover focus:ring-ring-primary',
className,
)}
aria-label="Select an option"
@ -88,7 +88,7 @@ const Dropdown: FC<DropdownProps> = ({
<ListboxOption
key={index}
value={typeof item === 'string' ? item : item.value}
className="focus-visible:ring-offset ring-offset-ring-offset relative cursor-pointer select-none rounded border-border-light bg-header-primary py-2.5 pl-3 pr-3 text-sm text-text-secondary ring-ring-primary hover:bg-header-hover focus-visible:ring"
className="focus-visible:ring-offset ring-offset-ring-offset relative cursor-pointer select-none rounded border-border-light bg-header-primary py-2.5 pl-3 pr-3 text-sm text-text-secondary ring-ring-primary hover:bg-header-hover focus-visible:ring data-[focus]:bg-surface-hover data-[focus]:text-text-primary"
style={{ width: '100%' }}
data-theme={typeof item === 'string' ? item : (item as Option).value}
>