🔇 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

@ -7,6 +7,13 @@ body:
attributes:
value: |
Thanks for taking the time to fill out this bug report!
Before submitting, please:
- Search existing [Issues and Discussions](https://github.com/danny-avila/LibreChat/discussions) to see if your bug has already been reported
- Use [Discussions](https://github.com/danny-avila/LibreChat/discussions) instead of Issues for:
- General inquiries
- Help with setup
- Questions about whether you're experiencing a bug
- type: textarea
id: what-happened
attributes:
@ -15,6 +22,23 @@ body:
placeholder: Please give as many details as possible
validations:
required: true
- type: textarea
id: version-info
attributes:
label: Version Information
description: |
If using Docker, please run and provide the output of:
```bash
docker images | grep librechat
```
If running from source, please run and provide the output of:
```bash
git rev-parse HEAD
```
placeholder: Paste the output here
validations:
required: true
- type: textarea
id: steps-to-reproduce
attributes:
@ -39,7 +63,21 @@ body:
id: logs
attributes:
label: Relevant log output
description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
description: |
Please paste relevant logs that were created when reproducing the error.
Log locations:
- Docker: Project root directory ./logs
- npm: ./api/logs
There are two types of logs that can help diagnose the issue:
- debug logs (debug-YYYY-MM-DD.log)
- error logs (error-YYYY-MM-DD.log)
Error logs contain exact stack traces and are especially helpful, but both can provide valuable information.
Please only include the relevant portions of logs that correspond to when you reproduced the error.
For UI-related issues, browser console logs can be very helpful. You can provide these as screenshots or paste the text here.
render: shell
- type: textarea
id: screenshots
@ -53,4 +91,4 @@ body:
description: By submitting this issue, you agree to follow our [Code of Conduct](https://github.com/danny-avila/LibreChat/blob/main/.github/CODE_OF_CONDUCT.md)
options:
- label: I agree to follow this project's Code of Conduct
required: true
required: true

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>

View file

@ -67,7 +67,7 @@ export default function DashBreadcrumb() {
className="flex flex-row items-center gap-1"
onClick={chatLinkHandler}
>
<ArrowLeft className="icon-xs" />
<ArrowLeft className="icon-xs" aria-hidden="true" />
<span className="hidden md:flex">{localize('com_ui_back_to_chat')}</span>
<span className="flex md:hidden">{localize('com_ui_chat')}</span>
</BreadcrumbLink>
@ -98,7 +98,7 @@ export default function DashBreadcrumb() {
className="flex flex-row items-center gap-1"
onClick={promptsLinkHandler}
>
<MessageSquareQuote className="h-4 w-4 dark:text-gray-300" />
<MessageSquareQuote className="h-4 w-4 dark:text-gray-300" aria-hidden="true" />
{localize('com_ui_prompts')}
</BreadcrumbLink>
</BreadcrumbItem>