mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-16 16:30:15 +01:00
1143f73f59
If you've got a screen reader that is reading out the whole page, each icon button (i.e., `<button><SVG></button>`) will have both the button's aria-label read out as well as the title from the SVG (which is usually just "image"). Since we are pretty good about setting aria-labels, we should instead use `aria-hidden="true"` on these images, since they are not useful to be read out. I don't consider this a comprehensive review of all icons in the app, but I knocked out all the low hanging fruit in this commit.
57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
/* eslint-disable react-hooks/rules-of-hooks */
|
|
import { ArrowUpDown } from 'lucide-react';
|
|
import { Button } from '@librechat/client';
|
|
import type { ColumnDef } from '@tanstack/react-table';
|
|
import type { TFile } from 'librechat-data-provider';
|
|
import PanelFileCell from './PanelFileCell';
|
|
import { useLocalize } from '~/hooks';
|
|
import { formatDate } from '~/utils';
|
|
|
|
export const columns: ColumnDef<TFile | undefined>[] = [
|
|
{
|
|
accessorKey: 'filename',
|
|
header: ({ column }) => {
|
|
const localize = useLocalize();
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
className="hover:bg-surface-hover"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
|
aria-label={localize('com_ui_name')}
|
|
>
|
|
{localize('com_ui_name')}
|
|
<ArrowUpDown className="ml-2 h-4 w-4" aria-hidden="true" />
|
|
</Button>
|
|
);
|
|
},
|
|
meta: {
|
|
size: '150px',
|
|
},
|
|
cell: ({ row }) => <PanelFileCell row={row} />,
|
|
},
|
|
{
|
|
accessorKey: 'updatedAt',
|
|
meta: {
|
|
size: '10%',
|
|
},
|
|
header: ({ column }) => {
|
|
const localize = useLocalize();
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
className="hover:bg-surface-hover"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
|
aria-label={localize('com_ui_date')}
|
|
>
|
|
{localize('com_ui_date')}
|
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
);
|
|
},
|
|
cell: ({ row }) => (
|
|
<span className="flex justify-end text-xs">
|
|
{formatDate(row.original?.updatedAt?.toString() ?? '')}
|
|
</span>
|
|
),
|
|
},
|
|
];
|