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

🤲 a11y: Keyboard Accessibility for Account Settings (#3666)

Browse source 
* refactor(NavLinks -> AccountSettings): add theming, fix minor type issues, and rename component

* fix: closes #3499 - Account settings menu is not keyboard accessible

* fix(DataTable): type issue causing application crash, update contextMap key for storage
This commit is contained in:
Danny Avila 2024-08-16 15:09:03 -04:00 • committed by GitHub
parent 6ad65ff065
commit 3826af5909
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 85 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

16
client/src/components/Chat/Input/Files/Table/DataTable.tsx
View file

@ -43,7 +43,7 @@ interface DataTableProps<TData, TValue> {
const contextMap = {
[FileContext.filename]: 'com_ui_name',
[FileContext.updatedAt]: 'com_ui_date',
[FileContext.source]: 'com_ui_storage',
[FileContext.filterSource]: 'com_ui_storage',
[FileContext.context]: 'com_ui_context',
[FileContext.bytes]: 'com_ui_size',
};
@ -108,13 +108,13 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
</Button>
<Input
placeholder={localize('com_files_filter')}
value={(table.getColumn('filename')?.getFilterValue() as string) ?? ''}
value={(table.getColumn('filename')?.getFilterValue() as string | undefined) ?? ''}
onChange={(event) => table.getColumn('filename')?.setFilterValue(event.target.value)}
className="max-w-sm border-border-light placeholder:text-text-secondary"
className="max-w-sm border-border-medium placeholder:text-text-secondary"
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="ml-auto">
<Button variant="outline" className="ml-auto border border-border-medium">
<ListFilter className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
@ -132,7 +132,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
key={column.id}
className="cursor-pointer capitalize dark:text-white dark:hover:bg-gray-800"
checked={column.getIsVisible()}
onCheckedChange={(value) => column.toggleVisibility(!!value)}
onCheckedChange={(value) => column.toggleVisibility(Boolean(value))}
>
{localize(contextMap[column.id])}
</DropdownMenuCheckboxItem>
@ -184,7 +184,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
>
{row.getVisibleCells().map((cell, index) => {
const maxWidth =
(cell.column.columnDef as AugmentedColumnDef<TData, TValue>).meta.size ??
(cell.column.columnDef as AugmentedColumnDef<TData, TValue>).meta?.size ??
'auto';
const style: Style = {};
@ -225,7 +225,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
)}
</div>
<Button
className="select-none dark:border-gray-500 dark:hover:bg-gray-600"
className="select-none border-border-medium"
variant="outline"
size="sm"
onClick={() => table.previousPage()}
@ -234,7 +234,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
{localize('com_ui_prev')}
</Button>
<Button
className="select-none dark:border-gray-500 dark:hover:bg-gray-600"
className="select-none border-border-medium"
variant="outline"
size="sm"
onClick={() => table.nextPage()}