🔇 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:
Kay Belardinelli 2025-02-09 10:53:43 -05:00 committed by GitHub
parent 1519afd4b9
commit 2e8d969e35
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 55 additions and 16 deletions

View file

@ -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">

View file

@ -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,

View file

@ -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">

View file

@ -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>

View file

@ -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>

View file

@ -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}

View file

@ -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}

View file

@ -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" />;
}

View file

@ -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">

View file

@ -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>

View file

@ -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>

View file

@ -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>