mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-31 23:58:50 +01:00
🔇 a11y: Silence Unnecessary Icons for Screen Readers (#5726)
* a11y: silence miscellaneous icons that should not be read by screen reader (#5723, #5724) * 📝 chore: Update bug report template with additional guidance and version information * 📝 chore: Update bug report template to guide users on using Discussions for general inquiries and setup help --------- Co-authored-by: Danny Avila <danny@librechat.ai>
This commit is contained in:
parent
1519afd4b9
commit
2e8d969e35
14 changed files with 55 additions and 16 deletions
|
|
@ -18,7 +18,7 @@ export const TemporaryChat = ({ isTemporaryChat, setIsTemporaryChat }: Temporary
|
|||
<div className="flex items-start gap-4 py-2.5 pl-3 pr-1.5 text-sm">
|
||||
<span className="mt-0 flex h-6 w-6 flex-shrink-0 items-center justify-center">
|
||||
<div className="icon-md">
|
||||
<MessageCircleDashed className="icon-md" />
|
||||
<MessageCircleDashed className="icon-md" aria-hidden="true" />
|
||||
</div>
|
||||
</span>
|
||||
<span className="text-token-text-secondary line-clamp-3 flex-1 py-0.5 font-semibold">
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
|
|||
<div
|
||||
data-testid="convo-icon"
|
||||
title={name}
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export const TemporaryChat = () => {
|
|||
<div className="sticky bottom-0 border-none bg-surface-tertiary px-6 py-4 ">
|
||||
<div className="flex items-center">
|
||||
<div className={cn('flex flex-1 items-center gap-2', isActiveConvo && 'opacity-40')}>
|
||||
<MessageCircleDashed className="icon-sm" />
|
||||
<MessageCircleDashed className="icon-sm" aria-hidden="true" />
|
||||
<span className="text-sm text-text-primary">{localize('com_ui_temporary_chat')}</span>
|
||||
</div>
|
||||
<div className="ml-auto flex items-center">
|
||||
|
|
|
|||
|
|
@ -35,9 +35,9 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags, isSmallScreen }: Boo
|
|||
<div className="h-7 w-7 flex-shrink-0">
|
||||
<div className="relative flex h-full items-center justify-center rounded-full border border-border-medium bg-surface-primary-alt text-text-primary">
|
||||
{tags.length > 0 ? (
|
||||
<BookmarkFilledIcon className="h-4 w-4" />
|
||||
<BookmarkFilledIcon className="h-4 w-4" aria-hidden="true" />
|
||||
) : (
|
||||
<BookmarkIcon className="h-4 w-4" />
|
||||
<BookmarkIcon className="h-4 w-4" aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ const AdminSettings = () => {
|
|||
variant="outline"
|
||||
className="mr-2 h-10 w-fit gap-1 border transition-all dark:bg-transparent dark:hover:bg-surface-tertiary sm:m-0"
|
||||
>
|
||||
<ShieldEllipsis className="cursor-pointer" />
|
||||
<ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
|
||||
<span className="hidden sm:flex">{localize('com_ui_admin')}</span>
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const Command = ({
|
|||
return (
|
||||
<div className="rounded-xl border border-border-light">
|
||||
<h3 className="flex h-10 items-center gap-1 pl-4 text-sm text-text-secondary">
|
||||
<SquareSlash className="icon-sm" />
|
||||
<SquareSlash className="icon-sm" aria-hidden="true" />
|
||||
<Input
|
||||
type="text"
|
||||
tabIndex={tabIndex}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const Description = ({
|
|||
return (
|
||||
<div className="rounded-xl border border-border-light">
|
||||
<h3 className="flex h-10 items-center gap-1 pl-4 text-sm text-text-secondary">
|
||||
<Info className="icon-sm" />
|
||||
<Info className="icon-sm" aria-hidden="true" />
|
||||
<Input
|
||||
type="text"
|
||||
tabIndex={tabIndex}
|
||||
|
|
|
|||
|
|
@ -48,5 +48,5 @@ export default function CategoryIcon({
|
|||
if (!IconComponent) {
|
||||
return null;
|
||||
}
|
||||
return <IconComponent className={cn(colorClass, className)} />;
|
||||
return <IconComponent className={cn(colorClass, className)} aria-hidden="true" />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const PromptVariables = ({
|
|||
return (
|
||||
<div className="rounded-xl border border-border-light bg-transparent p-4 shadow-md ">
|
||||
<h3 className="flex items-center gap-2 py-2 text-lg font-semibold text-text-primary">
|
||||
<Variable className="icon-sm" />
|
||||
<Variable className="icon-sm" aria-hidden="true" />
|
||||
{localize('com_ui_variables')}
|
||||
</h3>
|
||||
<div className="flex flex-col space-y-4">
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ const AdminSettings = () => {
|
|||
variant={'outline'}
|
||||
className="btn btn-neutral border-token-border-light relative mb-4 h-9 w-full gap-1 rounded-lg font-medium"
|
||||
>
|
||||
<ShieldEllipsis className="cursor-pointer" />
|
||||
<ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
|
||||
{localize('com_ui_admin_settings')}
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
|
|
|
|||
|
|
@ -221,7 +221,7 @@ export default function Parameters({
|
|||
onClick={handleResetParameters}
|
||||
className="btn btn-neutral flex w-full items-center justify-center gap-2 px-4 py-2 text-sm"
|
||||
>
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
<RotateCcw className="h-4 w-4" aria-hidden="true" />
|
||||
{localize('com_ui_reset_var', localize('com_ui_model_parameters'))}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -279,7 +279,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
|
|||
onClick={() => setShowFiles(true)}
|
||||
aria-label={localize('com_sidepanel_manage_files')}
|
||||
>
|
||||
<ArrowUpLeft className="h-4 w-4" />
|
||||
<ArrowUpLeft className="h-4 w-4" aria-hidden="true" />
|
||||
<span className="ml-2">{localize('com_sidepanel_manage_files')}</span>
|
||||
</Button>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue