Enhance comment forms (#604)

* Fix incorrect label text in StackedFrom component

* Remove redundant onSubmit handlers

* Add htmlFor and aria-label attributes to form labels to improve accessibility

* Fix: properly bind the disabled prop

The disabled prop is incorrectly passed without a value. In ReScript, boolean props need to be explicitly set.

* Fix CI failures

- Use camelCase for aria attributes (ariaLabel, ariaRequired)
- Use boolean `true` instead of string "true" for ariaRequired
- Fix htmlFor placement inside label tags

Author: ihabadham

client/app/bundles/comments/rescript/CommentForm/CommentForm.res

@@ -122,7 +122,7 @@ let make = (~fetchData) => {
         disabled
       />
     | Stacked =>
-      <StackedFrom
+      <StackedForm
         author={state.author}
         handleAuthorChange
         text={state.text}

client/app/bundles/comments/rescript/CommentForm/forms/HorizontalForm.res

@@ -1,8 +1,14 @@
 @react.component
 let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmit, ~disabled) => {
-  <form className="form-horizontal flex flex-col gap-4" onSubmit=handleSubmit disabled>
+  <form
+    className="form-horizontal flex flex-col gap-4"
+    onSubmit=handleSubmit
+    disabled={disabled}
+    ariaLabel="Comment submission form">
     <div className="flex flex-col gap-0 items-center lg:gap-4 lg:flex-row">
-      <label className="w-full lg:w-2/12 lg:text-end shrink-0"> {"Name"->React.string} </label>
+      <label htmlFor="comment_author" className="w-full lg:w-2/12 lg:text-end shrink-0">
+        {"Name"->React.string}
+      </label>
       <input
         type_="text"
         className="px-3 py-1 leading-4 border border-gray-300 rounded w-full"
@@ -11,10 +17,14 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_author"
         onChange=handleAuthorChange
         value={author}
+        ariaLabel="Author name"
+        ariaRequired=true
       />
     </div>
     <div className="flex flex-col gap-0 items-center lg:gap-4 lg:flex-row">
-      <label className="w-full lg:w-2/12 lg:text-end shrink-0"> {"Text"->React.string} </label>
+      <label htmlFor="comment_text" className="w-full lg:w-2/12 lg:text-end shrink-0">
+        {"Text"->React.string}
+      </label>
       <input
         type_="text"
         className="px-3 py-1 leading-4 border border-gray-300 rounded w-full"
@@ -23,6 +33,8 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_text"
         onChange=handleTextChange
         value={text}
+        ariaLabel="Comment text"
+        ariaRequired=true
       />
     </div>
     <div className="flex flex-col gap-0 lg:gap-4 lg:flex-row">
@@ -31,6 +43,7 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         type_="submit"
         className="self-start px-3 py-1 font-semibold border-0 rounded text-sky-50 bg-sky-600 hover:bg-sky-800"
         value="Post"
+        ariaLabel="Submit comment"
       />
     </div>
   </form>

client/app/bundles/comments/rescript/CommentForm/forms/InlineForm.res

@@ -3,9 +3,10 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
   <form
     className="form-inline flex flex-col lg:flex-row flex-wrap gap-4"
     onSubmit=handleSubmit
-    disabled>
+    disabled={disabled}
+    ariaLabel="Comment submission form">
     <div className="flex gap-2 items-center">
-      <label> {"Name"->React.string} </label>
+      <label htmlFor="comment_author"> {"Name"->React.string} </label>
       <input
         type_="text"
         className="px-3 py-1 leading-4 border border-gray-300 rounded"
@@ -14,10 +15,12 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_author"
         value={author}
         onChange=handleAuthorChange
+        ariaLabel="Author name"
+        ariaRequired=true
       />
     </div>
     <div className="flex gap-2 items-center">
-      <label> {"Text"->React.string} </label>
+      <label htmlFor="comment_text"> {"Text"->React.string} </label>
       <input
         type_="text"
         className="px-3 py-1 leading-4 border border-gray-300 rounded"
@@ -26,14 +29,16 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_text"
         onChange=handleTextChange
         value={text}
+        ariaLabel="Comment text"
+        ariaRequired=true
       />
     </div>
     <div className="flex gap-2">
       <input
         type_="submit"
         className="self-start px-3 py-1 font-semibold border-0 rounded text-sky-50 bg-sky-600 hover:bg-sky-800"
-        onSubmit=handleSubmit
         value="Post"
+        ariaLabel="Submit comment"
       />
     </div>
   </form>

client/app/bundles/comments/rescript/CommentForm/forms/StackedFrom.res renamed to client/app/bundles/comments/rescript/CommentForm/forms/StackedForm.res

@@ -1,8 +1,12 @@
 @react.component
 let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmit, ~disabled) => {
-  <form onSubmit=handleSubmit disabled className="flex flex-col gap-4">
+  <form
+    onSubmit=handleSubmit
+    disabled={disabled}
+    className="flex flex-col gap-4"
+    ariaLabel="Comment submission form">
     <div className="flex flex-col gap-0">
-      <label className="w-full"> {"Name"->React.string} </label>
+      <label htmlFor="comment_author" className="w-full"> {"Name"->React.string} </label>
       <input
         type_="text"
         className="px-3 py-1 leading-4 border border-gray-300 rounded w-full"
@@ -11,10 +15,12 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_author"
         onChange=handleAuthorChange
         value={author}
+        ariaLabel="Author name"
+        ariaRequired=true
       />
     </div>
     <div className="flex flex-col gap-0">
-      <label className="w-full"> {"Name"->React.string} </label>
+      <label htmlFor="comment_text" className="w-full"> {"Text"->React.string} </label>
       <input
         type_="text"
         className="px-3 py-1 leading-4 border border-gray-300 rounded w-full"
@@ -23,14 +29,16 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_text"
         onChange=handleTextChange
         value={text}
+        ariaLabel="Comment text"
+        ariaRequired=true
       />
     </div>
     <div className="flex flex-col gap-0">
       <input
         type_="submit"
         className="self-start px-3 py-1 font-semibold border-0 rounded text-sky-50 bg-sky-600 hover:bg-sky-800"
-        onSubmit=handleSubmit
         value="Post"
+        ariaLabel="Submit comment"
       />
     </div>
   </form>