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/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={disabled} aria-label="Comment submission form">
+  <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 htmlFor="comment_author" 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,12 +17,14 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_author"
         onChange=handleAuthorChange
         value={author}
-        aria-label="Author name"
-        aria-required="true"
+        ariaLabel="Author name"
+        ariaRequired=true
       />
     </div>
     <div className="flex flex-col gap-0 items-center lg:gap-4 lg:flex-row">
-      <label htmlFor="comment_text" 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"
@@ -25,8 +33,8 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_text"
         onChange=handleTextChange
         value={text}
-        aria-label="Comment text"
-        aria-required="true"
+        ariaLabel="Comment text"
+        ariaRequired=true
       />
     </div>
     <div className="flex flex-col gap-0 lg:gap-4 lg:flex-row">
@@ -35,8 +43,8 @@ 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"
-        aria-label="Submit comment"
+        ariaLabel="Submit comment"
       />
     </div>
   </form>
-}
+}

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

@@ -4,9 +4,9 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
     className="form-inline flex flex-col lg:flex-row flex-wrap gap-4"
     onSubmit=handleSubmit
     disabled={disabled}
-    aria-label="Comment submission form">
+    ariaLabel="Comment submission form">
     <div className="flex gap-2 items-center">
-      <label> htmlFor="comment_author" {"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"
@@ -15,12 +15,12 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_author"
         value={author}
         onChange=handleAuthorChange
-        aria-label="Author name"
-        aria-required="true"
+        ariaLabel="Author name"
+        ariaRequired=true
       />
     </div>
     <div className="flex gap-2 items-center">
-      <label> htmlFor="comment_text" {"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"
@@ -29,17 +29,17 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_text"
         onChange=handleTextChange
         value={text}
-        aria-label="Comment text"
-        aria-required="true"
+        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"
         value="Post"
-        aria-label="Submit comment"
+        ariaLabel="Submit comment"
       />
     </div>
   </form>
-}
+}

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

@@ -1,6 +1,10 @@
 @react.component
 let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmit, ~disabled) => {
-  <form onSubmit=handleSubmit disabled={disabled} className="flex flex-col gap-4" aria-label="Comment submission form">
+  <form
+    onSubmit=handleSubmit
+    disabled={disabled}
+    className="flex flex-col gap-4"
+    ariaLabel="Comment submission form">
     <div className="flex flex-col gap-0">
       <label htmlFor="comment_author" className="w-full"> {"Name"->React.string} </label>
       <input
@@ -11,8 +15,8 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_author"
         onChange=handleAuthorChange
         value={author}
-        aria-label="Author name"
-        aria-required="true"
+        ariaLabel="Author name"
+        ariaRequired=true
       />
     </div>
     <div className="flex flex-col gap-0">
@@ -25,17 +29,17 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_text"
         onChange=handleTextChange
         value={text}
-        aria-label="Comment text"
-        aria-required="true"
+        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"
         value="Post"
-        aria-label="Submit comment"
+        ariaLabel="Submit comment"
       />
     </div>
   </form>
-}
+}