Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-02-11 12:04:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix: share prompt a11y issue

Browse source
This commit is contained in:
Danny Avila 2024-09-03 18:51:07 -04:00
parent 43b280fb5d
commit 3f36bc89bb
No known key found for this signature in database
GPG key ID: 2DD9CC89B9B50364
1 changed files with 29 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

44
client/src/components/Prompts/SharePrompt.tsx
View file

@ -91,20 +91,34 @@ const SharePrompt = ({ group, disabled }: { group?: TPromptGroup; disabled: bool
<OGDialogTitle>{localize('com_ui_share_var', `"${group.name}"`)}</OGDialogTitle> <OGDialogTitle>{localize('com_ui_share_var', `"${group.name}"`)}</OGDialogTitle>
<form className="p-2" onSubmit={handleSubmit(onSubmit)}> <form className="p-2" onSubmit={handleSubmit(onSubmit)}>
<div className="mb-4 flex items-center justify-between gap-2 py-4"> <div className="mb-4 flex items-center justify-between gap-2 py-4">
<label <div className="flex items-center">
className="cursor-pointer select-none" <button
htmlFor={Permissions.SHARED_GLOBAL} type="button"
onClick={() => className="mr-2 cursor-pointer"
setValue(Permissions.SHARED_GLOBAL, !getValues(Permissions.SHARED_GLOBAL), { onClick={() =>
shouldDirty: true, setValue(Permissions.SHARED_GLOBAL, !getValues(Permissions.SHARED_GLOBAL), {
}) shouldDirty: true,
} })
> }
{localize('com_ui_share_to_all_users')} onKeyDown={(e) => {
{groupIsGlobal && ( if (e.key === 'Enter' || e.key === ' ') {
<span className="ml-2 text-xs">{localize('com_ui_prompt_shared_to_all')}</span> e.preventDefault();
)} setValue(Permissions.SHARED_GLOBAL, !getValues(Permissions.SHARED_GLOBAL), {
</label> shouldDirty: true,
});
}
}}
aria-checked={getValues(Permissions.SHARED_GLOBAL)}
role="checkbox"
>
{localize('com_ui_share_to_all_users')}
</button>
<label htmlFor={Permissions.SHARED_GLOBAL} className="select-none">
{groupIsGlobal && (
<span className="ml-2 text-xs">{localize('com_ui_prompt_shared_to_all')}</span>
)}
</label>
</div>
<Controller <Controller
name={Permissions.SHARED_GLOBAL} name={Permissions.SHARED_GLOBAL}
control={control} control={control}
@ -126,7 +140,7 @@ const SharePrompt = ({ group, disabled }: { group?: TPromptGroup; disabled: bool
{...field} {...field}
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
value={field?.value?.toString()} value={field.value.toString()}
/> />
)} )}
/> />