docs(fix): better usability on feedback form (#10382)

### Description

I went back to use our feedback form to test it out and realized the
behavior and user feedback feels awkward. You can type a message, but
its not clear that you need to select an emoji before you can submit the
form.

This PR adds a small message to ensure the required action for form
submission is clear.

### Testing Instructions

Try out the feedaback form on the preview.

Author: anthonyshew

docs/site/components/feedback-widget.tsx

@@ -22,7 +22,9 @@ export function FeedbackWidget() {
     { emoji: "😭", component: <FaceSad />, label: "Hate it" },
   ];
 
-  const handleSubmit = (e?: React.FormEvent<HTMLFormElement>): void => {
+  const handleSubmit = (
+    e?: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>
+  ): void => {
     e?.preventDefault();
 
     setLoading(true);
@@ -108,6 +110,19 @@ export function FeedbackWidget() {
                   />
                 </div>
 
+                {!selectedEmoji && feedback ? (
+                  <p
+                    className="text-red-900 text-right mb-4 text-sm"
+                    role="alert"
+                    aria-live="assertive"
+                    id="emoji-selection-error"
+                  >
+                    Please select an emoji.
+                  </p>
+                ) : (
+                  <div className="h-9" />
+                )}
+
                 <div className="flex items-center justify-between text-black dark:text-gray-900">
                   <div className="flex space-x-4">
                     {emojis.map((item) => {
@@ -123,6 +138,11 @@ export function FeedbackWidget() {
                               : ""
                           )}
                           aria-label={item.label}
+                          aria-describedby={
+                            !selectedEmoji && feedback
+                              ? "emoji-selection-error"
+                              : undefined
+                          }
                         >
                           <span className="relative">{item.component}</span>
                         </button>
@@ -133,7 +153,9 @@ export function FeedbackWidget() {
                   <div className="flex items-center gap-2">
                     <Button
                       type="submit"
-                      onClick={(e: any) => handleSubmit(e)}
+                      onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
+                        handleSubmit(e)
+                      }
                       disabled={loading || !feedback || !selectedEmoji}
                     >
                       Send

packages/turbo-types/schemas/schema.json

@@ -378,4 +378,4 @@
       "additionalProperties": false
     }
   }
-}
+}

packages/turbo-types/schemas/schema.v1.json

@@ -244,4 +244,4 @@
       "additionalProperties": false
     }
   }
-}
+}

packages/turbo-types/schemas/schema.v2.json

@@ -378,4 +378,4 @@
       "additionalProperties": false
     }
   }
-}
+}