Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-26 21:28:50 +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>
<form className="p-2" onSubmit={handleSubmit(onSubmit)}>
<div className="mb-4 flex items-center justify-between gap-2 py-4">
<label
className="cursor-pointer select-none"
htmlFor={Permissions.SHARED_GLOBAL}
onClick={() =>
setValue(Permissions.SHARED_GLOBAL, !getValues(Permissions.SHARED_GLOBAL), {
shouldDirty: true,
})
}
>
{localize('com_ui_share_to_all_users')}
{groupIsGlobal && (
<span className="ml-2 text-xs">{localize('com_ui_prompt_shared_to_all')}</span>
)}
</label>
<div className="flex items-center">
<button
type="button"
className="mr-2 cursor-pointer"
onClick={() =>
setValue(Permissions.SHARED_GLOBAL, !getValues(Permissions.SHARED_GLOBAL), {
shouldDirty: true,
})
}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
setValue(Permissions.SHARED_GLOBAL, !getValues(Permissions.SHARED_GLOBAL), {
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
name={Permissions.SHARED_GLOBAL}
control={control}
@ -126,7 +140,7 @@ const SharePrompt = ({ group, disabled }: { group?: TPromptGroup; disabled: bool
{...field}
checked={field.value}
onCheckedChange={field.onChange}
value={field?.value?.toString()}
value={field.value.toString()}
/>
)}
/>