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

🤲 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

18
client/src/components/Files/FileList/DataTableFile.tsx
View file

@ -45,7 +45,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',
};
@ -121,7 +121,7 @@ export default function DataTableFile<TData, TValue>({
{' '}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="ml-auto">
<Button variant="outline" className="ml-auto border border-border-medium">
<ListFilter className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
@ -138,7 +138,7 @@ export default function DataTableFile<TData, TValue>({
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>
@ -148,15 +148,11 @@ export default function DataTableFile<TData, TValue>({
</DropdownMenu>
<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"
/>
<UploadFileButton
onClick={() => {
console.log('click');
}}
className="max-w-sm border-border-medium placeholder:text-text-secondary"
/>
<UploadFileButton onClick={() => console.log('click')} />
</div>
</div>
</div>
@ -213,7 +209,7 @@ export default function DataTableFile<TData, TValue>({
>
{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 = {};