From 3f36bc89bbf95c378b6d09dd46b202fc7be2d226 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Tue, 3 Sep 2024 18:51:07 -0400
Subject: [PATCH] fix: share prompt a11y issue

---
 client/src/components/Prompts/SharePrompt.tsx | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Prompts/SharePrompt.tsx b/client/src/components/Prompts/SharePrompt.tsx
index 696b6a9490..540c491f5f 100644
--- a/client/src/components/Prompts/SharePrompt.tsx
+++ b/client/src/components/Prompts/SharePrompt.tsx
@@ -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()}
                 />
               )}
             />