mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 00:40:14 +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
42
.github/ISSUE_TEMPLATE/BUG-REPORT.yml
vendored
42
.github/ISSUE_TEMPLATE/BUG-REPORT.yml
vendored
|
|
@ -7,6 +7,13 @@ body:
|
||||||
attributes:
|
attributes:
|
||||||
value: |
|
value: |
|
||||||
Thanks for taking the time to fill out this bug report!
|
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
|
- type: textarea
|
||||||
id: what-happened
|
id: what-happened
|
||||||
attributes:
|
attributes:
|
||||||
|
|
@ -15,6 +22,23 @@ body:
|
||||||
placeholder: Please give as many details as possible
|
placeholder: Please give as many details as possible
|
||||||
validations:
|
validations:
|
||||||
required: true
|
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
|
- type: textarea
|
||||||
id: steps-to-reproduce
|
id: steps-to-reproduce
|
||||||
attributes:
|
attributes:
|
||||||
|
|
@ -39,7 +63,21 @@ body:
|
||||||
id: logs
|
id: logs
|
||||||
attributes:
|
attributes:
|
||||||
label: Relevant log output
|
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
|
render: shell
|
||||||
- type: textarea
|
- type: textarea
|
||||||
id: screenshots
|
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)
|
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:
|
options:
|
||||||
- label: I agree to follow this project's Code of Conduct
|
- label: I agree to follow this project's Code of Conduct
|
||||||
required: true
|
required: true
|
||||||
|
|
@ -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">
|
<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">
|
<span className="mt-0 flex h-6 w-6 flex-shrink-0 items-center justify-center">
|
||||||
<div className="icon-md">
|
<div className="icon-md">
|
||||||
<MessageCircleDashed className="icon-md" />
|
<MessageCircleDashed className="icon-md" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
<span className="text-token-text-secondary line-clamp-3 flex-1 py-0.5 font-semibold">
|
<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
|
<div
|
||||||
data-testid="convo-icon"
|
data-testid="convo-icon"
|
||||||
title={name}
|
title={name}
|
||||||
|
aria-hidden="true"
|
||||||
style={{
|
style={{
|
||||||
width: size,
|
width: size,
|
||||||
height: 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="sticky bottom-0 border-none bg-surface-tertiary px-6 py-4 ">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<div className={cn('flex flex-1 items-center gap-2', isActiveConvo && 'opacity-40')}>
|
<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>
|
<span className="text-sm text-text-primary">{localize('com_ui_temporary_chat')}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="ml-auto flex items-center">
|
<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="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">
|
<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 ? (
|
{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>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -153,7 +153,7 @@ const AdminSettings = () => {
|
||||||
variant="outline"
|
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"
|
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>
|
<span className="hidden sm:flex">{localize('com_ui_admin')}</span>
|
||||||
</Button>
|
</Button>
|
||||||
</OGDialogTrigger>
|
</OGDialogTrigger>
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@ const Command = ({
|
||||||
return (
|
return (
|
||||||
<div className="rounded-xl border border-border-light">
|
<div className="rounded-xl border border-border-light">
|
||||||
<h3 className="flex h-10 items-center gap-1 pl-4 text-sm text-text-secondary">
|
<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
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
tabIndex={tabIndex}
|
tabIndex={tabIndex}
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@ const Description = ({
|
||||||
return (
|
return (
|
||||||
<div className="rounded-xl border border-border-light">
|
<div className="rounded-xl border border-border-light">
|
||||||
<h3 className="flex h-10 items-center gap-1 pl-4 text-sm text-text-secondary">
|
<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
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
tabIndex={tabIndex}
|
tabIndex={tabIndex}
|
||||||
|
|
|
||||||
|
|
@ -48,5 +48,5 @@ export default function CategoryIcon({
|
||||||
if (!IconComponent) {
|
if (!IconComponent) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
return <IconComponent className={cn(colorClass, className)} />;
|
return <IconComponent className={cn(colorClass, className)} aria-hidden="true" />;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ const PromptVariables = ({
|
||||||
return (
|
return (
|
||||||
<div className="rounded-xl border border-border-light bg-transparent p-4 shadow-md ">
|
<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">
|
<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')}
|
{localize('com_ui_variables')}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="flex flex-col space-y-4">
|
<div className="flex flex-col space-y-4">
|
||||||
|
|
|
||||||
|
|
@ -144,7 +144,7 @@ const AdminSettings = () => {
|
||||||
variant={'outline'}
|
variant={'outline'}
|
||||||
className="btn btn-neutral border-token-border-light relative mb-4 h-9 w-full gap-1 rounded-lg font-medium"
|
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')}
|
{localize('com_ui_admin_settings')}
|
||||||
</Button>
|
</Button>
|
||||||
</OGDialogTrigger>
|
</OGDialogTrigger>
|
||||||
|
|
|
||||||
|
|
@ -221,7 +221,7 @@ export default function Parameters({
|
||||||
onClick={handleResetParameters}
|
onClick={handleResetParameters}
|
||||||
className="btn btn-neutral flex w-full items-center justify-center gap-2 px-4 py-2 text-sm"
|
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'))}
|
{localize('com_ui_reset_var', localize('com_ui_model_parameters'))}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -279,7 +279,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
|
||||||
onClick={() => setShowFiles(true)}
|
onClick={() => setShowFiles(true)}
|
||||||
aria-label={localize('com_sidepanel_manage_files')}
|
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>
|
<span className="ml-2">{localize('com_sidepanel_manage_files')}</span>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -67,7 +67,7 @@ export default function DashBreadcrumb() {
|
||||||
className="flex flex-row items-center gap-1"
|
className="flex flex-row items-center gap-1"
|
||||||
onClick={chatLinkHandler}
|
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="hidden md:flex">{localize('com_ui_back_to_chat')}</span>
|
||||||
<span className="flex md:hidden">{localize('com_ui_chat')}</span>
|
<span className="flex md:hidden">{localize('com_ui_chat')}</span>
|
||||||
</BreadcrumbLink>
|
</BreadcrumbLink>
|
||||||
|
|
@ -98,7 +98,7 @@ export default function DashBreadcrumb() {
|
||||||
className="flex flex-row items-center gap-1"
|
className="flex flex-row items-center gap-1"
|
||||||
onClick={promptsLinkHandler}
|
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')}
|
{localize('com_ui_prompts')}
|
||||||
</BreadcrumbLink>
|
</BreadcrumbLink>
|
||||||
</BreadcrumbItem>
|
</BreadcrumbItem>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue